결제 위젯에서 가상계좌 선택 시 "결제 방법을 선택해주세요" 의 화면이 나옵니다.
간헐적으로 결제 위젯에서 가상계좌 선택 및 환불 계좌 정보까지 입력 후 결제 시 첨부 이미지와 같이 결제 방법 선택 화면이 나오는 현상이 발생합니다.
새로고침 시 제대로 가상계좌(무통장입금) 페이지가 나올때도 있으나, 될때도 있고 안될때도 있습니다.
이는 어떠한 것 때문에 발생되는 것인지, 해결 방법은 있는지 답변 부탁드립니다. 감사합니다.
22 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
위젯 렌더링이 완료되지 않은 상태에서 requestPayment 가 수행되면 해당 결제창이 뜨게 됩니다.
위젯 렌더링 완료 이벤트를 제공해드리고 있으니, 이 이벤트를 활용하시면 됩니다.
https://docs.tosspayments.com/reference/widget-sdk#on%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%BD%9C%EB%B0%B1
결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
가상계좌 선택 및 환불 계좌 정보까지 입력 후 결제 시 첨부 이미지와 같이 결제 방법 선택 화면이 나오는 현상
동영상 전달주실수 있다면 더 명확한 상황 이해가 될것 같습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
금일 테스트 해보니 가상계좌 뿐만 아니라 삼성페이 등 타 method도 마찬가지인 것 같습니다.
앞서 알려주신 on이벤트 콜백으로 결제버튼 활성화 상태관리 되어있습니다.
* MID 가 어떻게 되시나요?
* 현재 연동한 클라이언트에서, variantKey 등 설정은 어떻게 하셨나요?
* 결제하기 주문번호가 어떻게 되나요?
MID: sardarn7is
variantKey 등 별도 설정 없이 기본값 사용 중 입니다. renderPaymentMethods 호출 시 DOM요소와 금액(value)만 보내고 있습니다.
결제를 하지 않아 주문번호가 없습니다.
useAsync(async () => {
if (method && method === "pg") {
const paymentWidget = await loadPaymentWidget(clientKey, customerKey); // 회원 결제
const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
"#payment-widget",
{ value: calculateVAT(tossAmount) }
);
console.log("금액 초기세팅", tossAmount);
paymentMethodsWidget.on("ready", () => {
// 결제 버튼 활성화
setReady(true);
console.log("위젯 준비완료 1");
});
// ------ 이용약관 렌더링 ------
// https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자
paymentWidget.renderAgreement("#agreement");
paymentWidgetRef.current = paymentWidget;
paymentMethodsWidgetRef.current = paymentMethodsWidget;
}
}, [method]);
현재 위젯 렌더링 코드 함께 작성하였으니 참고부탁드립니다!
결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
requestPayment 를 호출하면, 무조건 주문번호를 전달하게 되어있어요.
requestPayment body param 정보도 같이 부탁 드려요.
해당 증상이 나타났을 때의 주문번호를 따로 기억해두지 않아서요.. 이게 매번 발생하는게 아니라 간헐적으로 그래서 테스트 및 디버깅이 원할하진 않습니다. ㅜㅜ
npm 으로 설치해서 쓰고 있으신가요? 아니면 웹에서 script 추가 하셨나요?
"@tosspayments/payment-widget-sdk": "^0.9.3",
설치 사용 중입니다.
음.. 결제하기 버튼에 연결해둔 requestPayment 쪽 소스도 공유 해주시겠어요?
const checkOut = async (_orderId) => {
..생략..
else if (method === "pg") {
const paymentWidget = paymentWidgetRef.current;
console.log("test", calculateVAT(tossAmount));
// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
// https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보
await paymentWidget?.requestPayment({
orderId:
${_orderId},
orderName: ${confData.title},
customerName: ${userData.name},
taxFreeAmount: calculateVAT(tossAmount),
customerEmail: ${userData.email},
successUrl: ${window.location.origin}/success,
failUrl: ${window.location.origin}/fail,
});
}
}결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터
결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
위젯 버전 업데이트가 좀 있는데, 혹 업데이트 가능 하실까요?