브랜드페이 마이그레이션
✅ 기존 커넥트페이에서 브랜드페이로 마이그레이션 하는 방법입니다.
변경 사항
커넥트페이 제품의 이름이 브랜드페이로 변경되어 SDK 스크립트 경로와 npm 패키지가 변경되었습니다. 기존 커넥트페이와 제공하는 기능은 동일하므로, SDK 추가 과정만 다시 진행하시면 됩니다.
<script> 태그로 설치했다면
먼저 기존 스크립트 경로 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 변경
최신 버전을 사용하고 있다면 브랜드페이로 결제 타입을 나타내는 ENUM 코드로 BRANDPAY가 돌아옵니다. 버전 1.4까지는 CONNECTPAY가 돌아옵니다.