멀티 결제 UI 추가하기
결제 UI를 여러 개 만들고 상황에 따라 다르게 노출할 수 있어요.
✅ 임직원 계정으로 접속하면 임직원용 포인트 결제수단을 보여주고 싶을 때
✅ 상품별로 다른 결제수단을 보여주고 싶을 때
멀티 결제 UI는 결제위젯 Pro 플랜 기능입니다. 결제위젯 Pro 플랜 계약은 상점관리자의 이용정보 > 결제·부가서비스 탭에서 문의해주세요.
설정하기
상점관리자의 결제 UI 설정 메뉴에서 UI 추가하기 버튼을 누르고 팝업창에서 키값을 설정하세요. 추가한 UI를 선택해서 커스터마이징하세요.
연동하기
아래와 같이 결제위젯을 연동하세요. 결제위젯을 렌더링하는 renderPaymentMethods()에 원하는 UI의 키값을 variantKey 파라미터로 설정하세요. 키값을 넣지 않으면 기본 UI가 렌더링됩니다.
결제를 완료하려면 결제위젯 연동 가이드를 참고하세요.
주문서
<head>
<meta charset="utf-8" />
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
</head>
<body>
<div id="payment-method"></div>
<button id="payment-button">결제하기</button>
<script>
const clientKey = "test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq"
const customerKey = ""
const button = document.getElementById("payment-button")
const paymentWidget = PaymentWidget(clientKey, customerKey)
// ------ 결제위젯 렌더링 ------
// 렌더링하고 싶은 결제위젯의 키값을 variantKey 파라미터에 넣으세요.
// 키값은 상점관리자에서 수정할 수 있습니다.
// https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션
paymentWidget.renderPaymentMethods("#payment-method", 15000, {
variantKey: "widgetA"
})
button.addEventListener("click", function () {
paymentWidget.requestPayment({
orderId: "",
orderName: "토스 티셔츠 외 2건",
successUrl: "https://localhost:8080/success",
failUrl: "https://localhost:8080/fail",
customerEmail: "customer123@gmail.com",
customerName: "김토스"
})
})
</script>
</body>
HTML