결제 창 문의 드립니다.
1. 가상계좌 결제 시 환불계좌 입력을 받을 수 있는지 확인 부탁드립니다.
2. 약관동의 체크 이벤트를 확인하여 결제 버튼 노출 여부를 구현하기 위해 (https://docs.tosspayments.com/sdk/v2/js#agreementwidgeton) 이벤트를 구현 하였지만
이벤트가 작동하지 않습니다 해당 이벤트를 사용하기 위해서 어떻게 해야 하나요?
토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
28 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
먼저 v1을 쓰시는지 v2를 쓰시는지 다시한번 확인가능할까요?
script src부분 알려주시면 확실할 것 같네요
v1을 사용중입니다.
결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
v1 가이드로 다시 테스트 해보겟습니다.
1번 질문 확인 부탁드리겟습니다.
결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
약관 체크버튼을 눌렀을때 이벤트가 발생되는게 아닌가요?
1번 질문
네, 고객이 입력하게 할 수 있는데
가상계좌 취소시에 자동으로 해당 정보가 사용된다는 의미는 아닙니다.
https://docs.tosspayments.com/guides/cancel-payment#case-2-%EA%B2%B0%EC%A0%9C%EC%9C%84%EC%A0%AF-%ED%99%98%EB%B6%88-%EA%B3%84%EC%A2%8C-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0
결제 취소하기 | 토스페이먼츠 개발자센터
토스페이먼츠 결제 취소 API를 호출하세요. 결제 금액 전액 또는 일부를 고객에게 환불하는 방법, 가상계좌 결제 취소하는 방법, 결제위젯에서 가상계좌 정보 확인하는 방법을 소개합니다.
2번 질문
getAgreementStatus 로 동의 상태를 확인하고
on, change 로 promise 콜백 전달되는것 맞습니다.
약관 변경을 진행 했는데도 promise 콜백 전달이 안되시나요?
콘솔 로그 찍어서 확인 해보실 수 있으실까요?
네 콘솔로 찍어보았지만 반응이 없어서 문의 드렸습니다.
agreementstatus const 는 어디에 위치해 두셨나요?
그걸 선언 해야 하나요?
on 내부에 agreementstatus 는 인자로 들어오는 파라메터라
샘플에 있는 const agreementStatus = paymentAgreement.getAgreementStatus();
에 agreementStatus 가 아닙니다.
paymentAgreement.getAgreementStatus(); 호출 하면될까요?
뭔가 복사가 잘못 되신것 같은데
지우고 직접 입력해서 저장 해보시겠어요?
paymentWidget = await loadPaymentWidget(tossWidgetClientKey.value, customerKey) // 회원 결제
paymentMethodWidget = paymentWidget.renderPaymentMethods("#payment-method", {}, { variantKey: "DEFAULT" });
const paymentAgreement = paymentWidget.renderAgreement("#agreement", { variantKey: "AGREEMENT" });
paymentAgreement.getAgreementStatus();
paymentAgreement.on("change", (agreementStatus) => {
console.log(agreementStatus.agreedRequiredTerms); // 고객이 모든 필수 약관에 동의했을 경우 true
});
지금 이렇게 테스트 해보려고 합니다.
on 이벤트에서 agreementStatus string 이 잘못 복사 된것 같으니
직접 손 입력 해보시겠어요?
paymentWidget = await loadPaymentWidget(tossWidgetClientKey.value, customerKey) // 회원 결제
paymentMethodWidget = paymentWidget.renderPaymentMethods("#payment-method", {}, { variantKey: "DEFAULT" });
const paymentAgreement = paymentWidget.renderAgreement("#agreement", { variantKey: "AGREEMENT" });
paymentAgreement.getAgreementStatus();
paymentAgreement.on("change", (agreementStatus) => {
console.log(agreementStatus.agreedRequiredTerms); // 고객이 모든 필수 약관에 동의했을 경우 true
});
제가 테스트 해봤고
잘 되는것 같아서요
이상하네요.. 뭐가 잘못된건지..
// 토스 위젯창 생성 및 직연동 간편결제 이벤트 처리
const loadTosWidget = async (data) => {
paymentWidget = await loadPaymentWidget(tossWidgetClientKey.value, customerKey) // 회원 결제
paymentMethodWidget = paymentWidget.renderPaymentMethods("#payment-method", {}, { variantKey: "DEFAULT" });
const paymentAgreement = paymentWidget.renderAgreement("#agreement", { variantKey: "AGREEMENT" });
paymentAgreement.getAgreementStatus();
paymentAgreement.on("change", (agreementStatus) => {
console.log(agreementStatus.agreedRequiredTerms); // 고객이 모든 필수 약관에 동의했을 경우 true
});
// 간편결제 요청 이벤트
paymentMethodWidget.on("customRequest", (paymentMethodKey: string) => {
console.log('> paymentMethodKey ' + paymentMethodKey)
requestEasyPay(paymentMethodKey.toLocaleLowerCase())
});
emit('onLoadPaymentWidget')
}
함수 전체 코드 입니다.
체크 박스 클릭 할때마다 호출되는거죠?
넵
이벤트 코드는 좀더 확인해보겟습니다.
일단 정상 작동은 하지 않고 있네요
결제는 정상적으로 되던 코드인데
그리고
환불계좌 입력창은 어떻게 해야 노출 되는건가요?
링크 드렸는데, 해당 페이지에 설명 되어 있어서 확인 부탁 드립니다
어드민에서 설정하는 거라 글로 설명하는 것보다 직접 보시는게 더 편하실 겁니다
네 방금 확인했습니다
관리자에서 변경해보겟습니다.
동의상태 확인 메서드는 loadTosWidget 여기 안에 두지 않고 밖에서 따로 개별로 처리하시면 어떠신지요?
원인 발견해서
처리했습니다
약관동의 기본 체크가 되어있는데 기본 체크 유뮤도 상점 관리자 페이지에서 설정 가능할까요?
네 상점관리자 > 약관설정 > 수정 눌러서 설정가능하세요
네 확인 감사합니다
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.