Version 1
결제위젯 SDK v1은 더 이상 업데이트되지 않습니다. 토스페이먼츠 SDK v2 연동을 추천합니다.
✅ 토스페이먼츠가 지원하지 않는 결제수단(평생교육바우처, 사내 포인트 등)을 연결할 수 있어요.
✅ 간편결제를 토스페이먼츠를 통해 계약하지 않고 직연동할 수 있어요.
커스텀 결제수단은 결제위젯 Pro 플랜 기능입니다. 결제위젯 Pro 플랜 계약은 상점관리자의 이용정보 > 결제·부가서비스 탭에서 문의해주세요.
상점관리자의 결제 UI 설정 메뉴에서 UI 환경을 선택해주세요. 선택 후 기능 > 결제수단 목록 메뉴 하단에 있는 + 추가하기 버튼을 눌러주세요.
- 간편결제 직연동을 하고 싶다면 간편결제 이름을 선택하세요. 토스페이, 네이버페이, 카카오페이를 지원합니다. 선택한 간편결제 로고가 결제위젯에 노출되지만 결제 연동은 직접해야 됩니다.
- 커스텀 결제수단을 추가하고 싶다면 결제수단의 이름과 연동할 때 사용할 키 값을 입력해주세요.
결제수단의 키 값은 콜백 함수에서 사용합니다. 커스텀 결제수단은 상점관리자에서 원하는 키 값을 등록하면 됩니다. 간편결제 직연동은 미리 정의되어있는 아래 키 값을 사용하세요.
결제수단 | 키 값 |
---|---|
네이버페이 | NAVERPAY |
카카오페이 | KAKAOPAY |
토스페이 | TOSSPAY |
커스텀 결제수단 | 상점관리자에서 등록 |
먼저, 결제위젯 연동하기 가이드를 따라서 결제수단을 렌더링하세요.
renderPaymentMethods()
가 반환하는 객체는 on()
메서드로 이벤트를 받고 콜백을 등록할 수 있어요.
고객이 커스텀 결제수단 또는 간편결제 직연동을 선택하고 requestPayment()
로 결제를 요청하면 customRequest
이벤트가 수신되어 콜백을 실행합니다.
고객이 커스텀 결제수단 또는 직연동 간편결제를 선택했을 때 입력 폼을 노출하는 등 특정 액션을 추가하고 싶다면 아래 customPaymentMethodSelect
이벤트를 사용하세요.
예를 들어, 커스텀 결제수단으로 평생교육바우처를 추가했다고 가정할게요. 고객이 평생교육바우처를 선택하면 customPaymentMethodSelect
이벤트를 받아서 바우처 입력 폼을 보여주는 코드를 추가할 수 있어요. 이 때 결제수단 키 값을 사용해요.
고객이 다른 결제수단을 선택하여 커스텀 결제수단의 선택이 해제되면 customPaymentMethodUnselect
이벤트를 받아서 추가했던 액션을 원상태로 돌려놓으세요.