변경 사항

브랜드페이 마이그레이션

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

변경 사항

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

<script> 태그로 설치했다면

먼저 기존 스크립트 경로 js.tosspayments.com/v1/connectpay를 js.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'
  })
</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가 돌아옵니다.

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