목차

✅ 토스페이먼츠가 지원하지 않는 결제수단(평생교육바우처, 사내 포인트 등)을 이용하고 싶을 때

✅ 간편결제를 토스페이먼츠를 통해 계약하지 않고 직연동하고 싶을 때

결제위젯 결제수단 추가하기 대표이미지

커스텀 결제수단 샘플 프로젝트

커스텀 결제수단은 결제위젯 Pro 플랜 기능입니다. 결제위젯 Pro 플랜 계약은 상점관리자이용정보 > 결제·부가서비스 탭에서 문의해주세요.

설정하기

상점관리자결제 UI 설정 메뉴에서 UI 환경을 선택해주세요. 선택 후 기능 > 결제수단 목록 메뉴 하단에 있는 + 추가하기 버튼을 눌러주세요.

  • 간편결제 직연동을 하고 싶다면 간편결제 이름을 선택하세요. 토스페이, 네이버페이, 카카오페이를 지원합니다. 선택한 간편결제 로고가 결제위젯에 노출되지만 결제 연동은 직접해야 됩니다.
  • 커스텀 결제수단을 추가하고 싶다면 결제수단의 이름과 연동할 때 사용할 키 값을 입력해주세요.

결제위젯 상점관리자 결제수단 추가하기

결제수단 키 값

결제수단의 키 값은 콜백 함수에서 사용합니다. 커스텀 결제수단은 상점관리자에서 원하는 키 값을 등록하면 됩니다. 간편결제 직연동은 미리 정의되어있는 아래 키 값을 사용하세요.

결제수단키 값
네이버페이NAVERPAY
카카오페이KAKAOPAY
토스페이TOSSPAY
커스텀 결제수단상점관리자에서 등록

연동하기

먼저, 결제위젯 연동하기 가이드를 따라서 결제수단을 렌더링하세요. renderPaymentMethods()가 반환하는 객체는 on() 메서드로 이벤트를 받고 콜백을 등록할 수 있어요.

고객이 커스텀 결제수단 또는 간편결제 직연동을 선택하고 결제를 요청하면 requestPayment()를 호출하세요. customRequest 이벤트가 수신되어 콜백을 실행합니다.

const paymentMethods = paymentWidget.renderPaymentMethods('#payment-method', 10_000)
/*간편결제 직연동*/
paymentMethods.on('customRequest', paymentMethodKey => {
if (paymentMethodKey === 'NAVERPAY') {
// 네이버페이로 결제하는 코드
}
})
/* 커스텀 결제수단*/
paymentMethods.on('customRequest', paymentMethodKey => {
if (paymentMethodKey === 'VOUCHER') { // 상점관리자에서 설정한 key값
// 평생교육바우처로 결제하는 코드
}
})
JavaScript

선택한 결제수단 확인하기

고객이 커스텀 결제수단 또는 직연동 간편결제를 선택했을 때 입력 폼을 노출하는 등 특정 액션을 추가하고 싶다면 아래 customPaymentMethodSelect 이벤트를 사용하세요.

예를 들어, 커스텀 결제수단으로 평생교육바우처를 추가했다고 가정할게요. 고객이 평생교육바우처를 선택하면 customPaymentMethodSelect 이벤트를 받아서 바우처 입력 폼을 보여주는 코드를 추가할 수 있어요. 이 때 결제수단 키 값을 사용해요.

고객이 다른 결제수단을 선택하여 커스텀 결제수단의 선택이 해제되면 customPaymentMethodUnselect 이벤트를 받아서 추가했던 액션을 원상태로 돌려놓으세요.

const paymentMethodsWidget = PaymentWidget.renderPaymentMethods('#payment-methods', 10_000)
paymentMethodsWidget.on('customPaymentMethodSelect', paymentMethodKey => {
if (paymentMethodKey === 'VOUCHER') {
// 평생교육바우처 선택했을 때 바우처 입력 폼을 노출
}
})
paymentMethodsWidget.on('customPaymentMethodUnselect', paymentMethodKey => {
if (paymentMethodKey === 'VOUCHER') {
// 평생교육바우처 선택을 해제했을 때 바우처 입력 폼을 숨김
}
})
JavaScript
  • 더 궁금한 내용이 있나요?
  • 코드 샘플을 참고하세요
  • 기술지원이 필요한가요?
    디스코드 채팅|이메일 보내기