'결제하기' 혹은 'Registration' 클릭시 콘솔 로그에 결제수단이 아직 선택되지 않았다는 오류가 나옵니다.
토스페이먼츠 결제 창 확인
결제 방법 - 신용·체크카드 선택
'결제하기' 혹은 'Registration' 클릭시
콘솔 로그에 결제수단이 아직 선택되지 않았다는 오류가 나옵니다.
해당 오류는 어떻게 해결해야 하나요?
참고로 아래 코드(예시)처럼 호출하였습니다.
paymentWidget.requestPayment({
orderId: '1',
orderName: '등록비',
successUrl: 'https://www.aogin2024.com/paymentSuccess',
failUrl: 'https://www.aogin2024.com/paymentFail',
customerEmail: 'test@test.com',
customerName: '홍길동',
customerMobilePhone: '010-1111-2222',
// 결제 수단을 '카드'로 설정
paymentMethod: 'CARD',
// 다국어 결제창 설정 OFF
useInternationalCardOnly: false
});
운영중인 사이트에서 확인이 필요하시다면 테스트 계정정보 남겨드리겠습니다.
12 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
제현해 보도록 사이트및 계정 공유 부탁드립니다.
💡 정보 제출
민감 정보를 안전하게 제출해주세요
토스페이먼츠 BOT이 제안한 '정보 제출'을 통하여 사이트 및 계정 정보 공유드렸습니다.
widget render 는 어떻게 하고 계신가요?
증상을 보면 render 한 widget 과 requestpayment를 실행하는 widget 이 instance 가 다른것 처럼 보입니다.
브라우저에서 보이는 코드를 보면 document on 이벤트에서 paymentWidget 을 생성 하시는데,
여기에 render 코드가 없습니다.
버튼 클릭시 이렇게 호출하고 있습니다.
// TOSS Setting START
const amount = "<%=amount%>";
const widgetClientKey = "<%=widgetClientKey %>";
const customerKey = generateRandomString();
const variantKey = "<%=variantKey%>";
const orderName = "<%=orderName%>";
const successUrl = "<%=successUrl%>";
const failUrl = "<%=failUrl%>";
const customerEmail = "<%=customerEmail%>";
const customerName = "<%=customerName%>";
const customerMobilePhone = "<%=customerMobilePhone%>";
const paymentWidget = PaymentWidget(widgetClientKey, customerKey); // 회원 결제
// const paymentWidget = PaymentWidget(widgetClientKey, PaymentWidget.ANONYMOUS); // 비회원 결제
// ------ 결제 UI 렌더링 ------
paymentMethodWidget = paymentWidget.renderPaymentMethods(
"#payment-method",
{ value: amount },
// 렌더링하고 싶은 결제 UI의 variantKey
// 결제 수단 및 스타일이 다른 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
// @docs https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui
{ variantKey: variantKey }
);
// ------ 이용약관 UI 렌더링 ------
paymentWidget.renderAgreement("#agreement", { variantKey: variantKey });
/*
// ------ 결제 금액 업데이트 ------
coupon.addEventListener("change", function () {
if(coupon.checked)
{
paymentMethodWidget.updateAmount(amount - 5000);
}
else
{
paymentMethodWidget.updateAmount(amount);
}
});
*/
// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
paymentWidget.requestPayment({
orderId: customerKey,
orderName: orderName,
successUrl: successUrl,
failUrl: failUrl,
customerEmail: customerEmail,
customerName: customerName,
customerMobilePhone: customerMobilePhone
});
결제위젯 어드민 사용하기 | 토스페이먼츠 개발자센터
토스페이먼츠와 계약을 완료했으면 어드민에서 결제 UI를 커스터마이징할 수 있어요.
브라우저 상으로 보이는 코드는 이렇게 되어 있습니다.
혹시 지금 제가 보는 코드와 다른건가요?
비슷한것 같은데
메뉴얼에 있던 아래 부분 코드가 없습니다.
// ------ 결제 UI 렌더링 ------
// ------ 이용약관 UI 렌더링 ------
// ------ 결제 금액 업데이트 ------
말씀해주신대로 render 한 widget 과 requestpayment를 실행하는 widget 의 코드가 분리되어 그런것 같습니다.
한번 확인해보겠습니다!
네 동일 instance 에서 requestpayment 를 호출해 주셔야 합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.