결제위젯 약관동의 이벤트 구독
https://docs.tosspayments.com/sdk/v2/js#agreementwidgeton
위 가이드보고 개발환경에서 테스트해보았는데, 동작을 안하네요 ..
개발환경에서 확인할 수 있는 방법이 있을지요?
토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
7 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
어떻게 동작을 안하는지 콘솔이나 에러메시지를 공유해주세요.
const [payment, agreement] = await Promise.all([
widgets.value.renderPaymentMethods(
'#payment-method',
{value: amount},
{
variantKey: 'DEFAULT',
},
),
widgets.value.renderAgreement('#agreement', {
variantKey: 'AGREEMENT',
}),
])
paymentWidgets.value = payment
agreementWidgets.value = agreement
console.log({agreement})
agreement.on('agreementStatusChange', agreementStatus => {
console.log({agreementStatus})
if (agreementStatus.agreedRequiredTerms) {
// 결제 버튼 활성화
} else {
// 결제 버튼 비활성화
}
})
위와 같이 결제위젯 연동하였고,
1번째 console.log에서는 agreement객체가 정상적으로 출력되지만,
2번째 console.log에서는 필수약관을 변경해도 출력되지 않습니다.
2번째 console.log에서는 필수약관을 변경해도 출력되지 않습니다. 라는게 어떤 말씀인가요?
필수약관을 어떻게 변경하신건가요?
제가 설명이 부족했습니다..
- 사용자가 필수 약관 동의여부를 변경하였을때 이벤트가 발생
- 이벤트가 발생하면 콜백함수가 호출됨
프로세스로 이해하고 있습니다.
헌데 제가 테스트해보았을 때에는, 동의항목 UI를 변경(체크박스)하여도
콜백함수가 호출되지 않아 문의를 남긴것 입니다.
아래 샘플코드로 실행해보세요.
// ------ 결제위젯 초기화 ------
const clientKey = ""; //docsKey
const tossPayments = TossPayments(clientKey);
// 회원 결제
const customerKey = "fGQFp1e4jIDibGIlfHGIg";
const widgets = tossPayments.widgets({
customerKey,
});
// 비회원 결제
// const widgets = tossPayments.widgets({ customerKey: TossPayments.ANONYMOUS });
// ------ 주문의 결제 금액 설정 ------
await widgets.setAmount({
currency: "KRW",
value: parseInt(priceInput.value),
});
await Promise.all([
// ------ 결제 UI 렌더링 ------
widgets.renderPaymentMethods({
selector: "#payment-method",
variantKey: "DEFAULT",
}),
// ------ 이용약관 UI 렌더링 ------
widgets.renderAgreement({ selector: "#agreement", variantKey: "AGREEMENT" }).then(result => {
agreementWidget = result;
}),
]);
agreementWidget.on('agreementStatusChange', agreementStatus => {
if (agreementStatus.agreedRequiredTerms) {
// 결제 버튼 활성화
alert("약관선택");
} else {
// 결제 버튼 비활성화
alert("약관선택");
}
});❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.