✅ 기존 커넥트페이에서 브랜드페이로 마이그레이션 하는 방법입니다.
커넥트페이 제품의 이름이 브랜드페이로 변경되어 SDK 스크립트 경로와 npm 패키지가 변경되었습니다. 기존 커넥트페이와 제공하는 기능은 동일하므로, SDK 추가 과정만 다시 진행하시면 됩니다.
먼저 기존 스크립트 경로 js.tosspayments.com/v1/connectpay
를 js.tosspayments.com/v1/brandpay
로 변경해주세요.
초기화 과정에서는 전역 객체에 생성된 BrandPay()
함수를 ConnectPay()
함수 대신 사용하세요.
index.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>
HTML
아래와 같이 @tosspayments/connectpay-sdk
를 삭제하고 @tosspayments/brandpay-sdk
를 새로 설치해주세요.
npm uninstall @tosspayments/connectpay-sdk
npm install @tosspayments/brandpay-sdk --save
코드에서는 import
문에서 불러오는 함수를 loadConnectPay()
에서 loadBrandPay()
로 수정해주세요.
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 => {
// ...
})
JavaScript
전체적인 브랜드페이 SDK 사용법은 이 페이지에서 확인하세요.
최신 버전을 사용하고 있다면 브랜드페이로 결제 타입을 나타내는 ENUM 코드로 BRANDPAY
가 돌아옵니다. 버전 1.4까지는 CONNECTPAY
가 돌아옵니다.