준성•4w ago

위젯 방식 다국어 결제창 연동 질문

위젯방식을 통해서 다국어 결제창을 연동하려고 합니다. 이전에 작성된 포스트에서 확인해 본 결과 결제 위젯에 커스텀 키 생성후 해당 커스텀키로 결제를 진행할때 다국어 결제창을 호출하는 방법을 사용하는 방식이 있다는 것을 알았습니다. 해당 방법을 적용하는 도중에 브러우저 콘솔에 CUSTOM_PAYMENT_METHOD_UNABLE_TO_PAY 커스텀 결제수단으로 결제할 수 없습니다. 라는 문구가 나왔습니다. 혹시 커스텀키 선택후 결제를 하기를 눌렀을때 발생되는 이벤트에서 api를 이용한 결제창을 호출하는 것으로 구현했는데 해당 방법은 불가능 한가요?

13 Replies

토스페이먼츠 BOT•4w ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

today.lastday•4w ago

mid 남겨주세요.

준성OP•4w ago

테스트로 진행했구요 mid theieigb7g 입니다.

today.lastday•4w ago

v2로 구현하셨을까요? 아래와 같이 진행하시면 됩니다.

today.lastday•4w ago

https://docs.tosspayments.com/sdk/v2/js#paymentmethodwidgetgetselectedpaymentmethod

토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터

토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.

today.lastday•4w ago

샘플코드 일부

await Promise.all([
          // ------  결제 UI 렌더링 ------
          widgets.renderPaymentMethods({
            selector: "#payment-method",
            variantKey: "itccsccTest",
          }).then(result => {
              paymentMethodWidget = result;
          }),
          // ------  이용약관 UI 렌더링 ------
           widgets.renderAgreement({ selector: "#agreement", variantKey: "AGREEMENT" }).then(result => {
                    agreementWidget = result;
                  }),
        ]);



        paymentMethodWidget.on('paymentMethodSelect', selectedPaymentMethod => {
            console.log(selectedPaymentMethod.code);
                  if (selectedPaymentMethod.code === '카드') {
                    // 카드 안내사항 노출
                  }
                  if (selectedPaymentMethod.code === '문화바우처') {
                    // 커스텀 결제수단 (결제위젯 Pro 플랜 기능)
                    // 문화바우처 안내사항 노출
                  }
                  if (selectedPaymentMethod.code === 'overseas') {
                      //alert('해외결제창 호출');
                  }
                });




// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------
        button.addEventListener("click", async function () {
            const paymentMethod = await paymentMethodWidget.getSelectedPaymentMethod();
            console.log("커스텀 결제수단:"+paymentMethod.code);

          await widgets.requestPayment({

준성OP•4w ago

다음과 같이 구현했습니다. 혹시 어디서 잘못 되었는지 조언을 얻을 수 있을까요?

<script>
  main();

  async function main() {
    const button = document.getElementById("payment-button");
    const coupon = document.getElementById("coupon-box");

    let clientKey = "test_gck_5OWRapdA8dYDy1XaE9LR3o1zEqZK";
    let tossPayments = TossPayments(clientKey);
    let customerKey = generateRandomString();
    const widgets = tossPayments.widgets({ customerKey });
    let orderID = randomstring

    await widgets.setAmount({
      currency: "USD",
      value: 500,
    });

    // ------  결제 UI 렌더링 ------
    const paymentMethodWidget = await widgets.renderPaymentMethods({
      selector: "#payment-method",
      variantKey: "itccsccTest",
    });

    document.querySelector("#payment-button").addEventListener("click", async () => {
      const selectedPaymentMethod = await paymentMethodWidget.getSelectedPaymentMethod();
      if (selectedPaymentMethod.code === "overseas") {

        clientKey = "test_ck_KNbdOvk5rkaBXMnyJDjw3n07xlzm";
        tossPayments = TossPayments(clientKey);
        const payment = tossPayments.payment({ customerKey });
        payment.requestPayment({
          method: "CARD",
          amount: {
            currency: "USD",
            value: 500,
          },
          orderId: orderID,
          orderName: "Registration fee",
          successUrl: currentURL+"success.vm",
          failUrl: currentURL+"fail.jsp",
          customerEmail: "test@test.t",
          customerName: "test",
          card: {
            useEscrow: false,
            flowMode: "DEFAULT",
            useCardPoint: false,
            useAppCardOnly: false,
            useInternationalCardOnly : true,
          },
        })
      }

      widgets
              .requestPayment({
                orderId: orderID,
                orderName: "Registration fee",
              })
              .then((res) => {

              })
              .catch((error) => {

              });
    });
  }

</script>

<script>
  main();

  async function main() {
    const button = document.getElementById("payment-button");
    const coupon = document.getElementById("coupon-box");

    let clientKey = "test_gck_5OWRapdA8dYDy1XaE9LR3o1zEqZK";
    let tossPayments = TossPayments(clientKey);
    let customerKey = generateRandomString();
    const widgets = tossPayments.widgets({ customerKey });
    let orderID = randomstring

    await widgets.setAmount({
      currency: "USD",
      value: 500,
    });

    // ------  결제 UI 렌더링 ------
    const paymentMethodWidget = await widgets.renderPaymentMethods({
      selector: "#payment-method",
      variantKey: "itccsccTest",
    });

    document.querySelector("#payment-button").addEventListener("click", async () => {
      const selectedPaymentMethod = await paymentMethodWidget.getSelectedPaymentMethod();
      if (selectedPaymentMethod.code === "overseas") {

        clientKey = "test_ck_KNbdOvk5rkaBXMnyJDjw3n07xlzm";
        tossPayments = TossPayments(clientKey);
        const payment = tossPayments.payment({ customerKey });
        payment.requestPayment({
          method: "CARD",
          amount: {
            currency: "USD",
            value: 500,
          },
          orderId: orderID,
          orderName: "Registration fee",
          successUrl: currentURL+"success.vm",
          failUrl: currentURL+"fail.jsp",
          customerEmail: "test@test.t",
          customerName: "test",
          card: {
            useEscrow: false,
            flowMode: "DEFAULT",
            useCardPoint: false,
            useAppCardOnly: false,
            useInternationalCardOnly : true,
          },
        })
      }

      widgets
              .requestPayment({
                orderId: orderID,
                orderName: "Registration fee",
              })
              .then((res) => {

              })
              .catch((error) => {

              });
    });
  }

</script>

v2 로 구현했습니다. 아직 해외결제 계약이 완료된 상태가 아닙니다. 예상되는 부분은 api방식 호출하는 부분에서 문제가 발생하는 것같은데...혹시 api에서 currency가 USD라서 그럴수가 있나요?

today.lastday•4w ago

overseas는 USD 결제인가요? USD는 위젯을 1개 추가하시고 USD 용으로 별도 호출하면 됩니다.

today.lastday•4w ago

USD는 원화와 구분을 해서 사용해야 합니다. USD 결제는 아래 문서 참고해주세요. https://www.notion.so/tosspublic/17e714bbfde780b68df9efa1a1667e4a?pvs=4 "결제위젯 SDK version2" 부분을 보시면 될 것 같아요.

tosspublic on Notion

다통화 결제 | Notion

1. 개요

준성OP•4w ago

통화를 변경한다면 결제창이 특정언어로 변경되나요? 한번 시도해 보겠습니다.

today.lastday•4w ago

기본적으로 영어로 표시됩니다.

준성OP•4w ago

네 감사합니다.

토스페이먼츠 BOT•4w ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

위젯 방식 다국어 결제창 연동 질문

Did you find this page helpful?