결제 연동
목차

✅ 기존 커넥트페이에서 브랜드페이로 마이그레이션 하는 방법입니다.

변경 사항

커넥트페이 제품의 이름이 브랜드페이로 변경되어 SDK 스크립트 경로와 npm 패키지가 변경되었습니다. 기존 커넥트페이와 제공하는 기능은 동일하므로, SDK 추가 과정만 다시 진행하시면 됩니다.

<script> 태그로 설치했다면

먼저 기존 스크립트 경로 js.tosspayments.com/v1/connectpayjs.tosspayments.com/v1/brandpay로 변경해주세요.

초기화 과정에서는 전역 객체에 생성된 BrandPay() 함수를 ConnectPay() 함수 대신 사용하세요.

index.html
HTML
<head>
<title>브랜드페이로 결제하기</title>
<meta charset="utf-8" />
<!-- 1. 스크립트 추가 -->
<script src="https://js.tosspayments.com/v1/brandpay"></script>
</head>
<script> var clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq' // 테스트용 클라이언트 키 var customerKey = '{CUSTOMER_KEY}' // 고객 ID // 2. 초기화 var brandpay = BrandPay(clientKey, customerKey, { redirectUrl: 'http://example.com', ui: { buttonStyle: 'full', highlightColor: '#26C2E3', labels: { oneTouchPay: '내 상점 원터치결제', }, }, }) </script>

패키지 매니저로 설치한 경우

아래와 같이 @tosspayments/connectpay-sdk를 삭제하고 @tosspayments/brandpay-sdk를 새로 설치해주세요.

npm uninstall @tosspayments/connectpay-sdk
npm install @tosspayments/brandpay-sdk --save

코드에서는 import 문에서 불러오는 함수를 loadConnectPay() 에서 loadBrandPay()로 수정해주세요.

JavaScript
import { loadBrandPay } from '@tosspayments/brandpay-sdk'
const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'
// async/await을 사용하는 경우
async function main() {
const brandpay = await loadBrandPay(clientKey, customerKey, {
redirectUrl: 'http://example.com',
})
}
// Promise를 사용하는 경우
loadBrandPay(clientKey).then(brandpay => {
// ...
})

전체적인 브랜드페이 SDK 사용법은 이 페이지에서 확인하세요.

결제 타입 ENUM 변경

최신 버전을 사용하고 있다면 브랜드페이로 결제 타입을 나타내는 ENUM 코드로 BRANDPAY가 돌아옵니다. 버전 1.4까지는 CONNECTPAY가 돌아옵니다.

브랜드페이 마이그레이션이 더 궁금하다면 토스페이먼츠 기술지원팀 이메일이나 디스코드로 문의해주세요.

  • 더 궁금한 내용이 있나요?
  • 코드 샘플을 참고하세요
  • 기술지원이 필요한가요?
    실시간 문의|이메일 보내기