이맹기•5d ago

자동결제(빌링) 카드 등록 화면 관련 문의입니다.

안녕하세요. 자동결제(카드등록) 화면을 <script src="https://js.tosspayments.com/v2/standard"></script> sdk를 사용해서 구현했는데요. 사진에 보이는 x 버튼을 누르면 콘솔에 Uncaugh (in promise) r : 취소되었습니다 라고 나오는 것을 보니 제 페이지에서 해당 버튼으로 창이 닫힐때 이벤트를 잡을 수 있어보이는데요. 이벤트를 잡으려면 어떤 코드를 추가해야되나요?

8 Replies

토스페이먼츠 BOT•5d ago

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

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

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

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

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

이실장•5d ago

아래는 일반결제 예시인데요. 빌링키에도 똑같이 사용해주시면 되요. catch에 잡힐겁니다. 그리고 해당 err로 조건걸어서 닫힌걸 확인하시면 되고요

 paymentRequestButton.addEventListener('click', async () => {
    try {
      /**
       * 결제 요청
       * 결제를 요청하기 전에 orderId, amount를 서버에 저장하세요.
       * 결제 과정에서 악의적으로 결제 금액이 바뀌는 것을 확인하는 용도입니다.
       * @docs https://docs.tosspayments.com/sdk/v2/js#widgetsrequestpayment
       */
      await widgets.requestPayment({
        orderId: generateRandomString(),
        orderName: "토스 티셔츠 외 2건",
        successUrl: window.location.origin + "/sandbox/success",
        failUrl: window.location.origin + "/sandbox/fail",
        customerEmail: "customer123@gmail.com",
        customerName: "김토스",
        customerMobilePhone: "01012341234",
      });
    } catch (err) {
        console.log("123")
        console.log(err)
    }
  });

 paymentRequestButton.addEventListener('click', async () => {
    try {
      /**
       * 결제 요청
       * 결제를 요청하기 전에 orderId, amount를 서버에 저장하세요.
       * 결제 과정에서 악의적으로 결제 금액이 바뀌는 것을 확인하는 용도입니다.
       * @docs https://docs.tosspayments.com/sdk/v2/js#widgetsrequestpayment
       */
      await widgets.requestPayment({
        orderId: generateRandomString(),
        orderName: "토스 티셔츠 외 2건",
        successUrl: window.location.origin + "/sandbox/success",
        failUrl: window.location.origin + "/sandbox/fail",
        customerEmail: "customer123@gmail.com",
        customerName: "김토스",
        customerMobilePhone: "01012341234",
      });
    } catch (err) {
        console.log("123")
        console.log(err)
    }
  });

참고로 모바일의 경우는 promise catch로 떨어지는게 아닐, failUrl로 이동하게 됩니다. pc/mobile도앚ㄱ이 다른 것도 참고해주세요.

catch (err) {
            console.log("전체:", err);
    console.log("메시지:", err.message);
      
    if (err.message === "취소되었습니다.") {
        console.log("");
    }

catch (err) {
            console.log("전체:", err);
    console.log("메시지:", err.message);
      
    if (err.message === "취소되었습니다.") {
        console.log("");
    }

이맹기OP•5d ago

@이실장 답변 감사합니다 !

Minsu Kim•5d ago

await을 사용하지 않는다면,

widgets.requestPayment({
 orderId: generateRandomString(),
 orderName: "토스 티셔츠 외 2건",
 successUrl: window.location.origin + "/sandbox/success",
 failUrl: window.location.origin + "/sandbox/fail",
 customerEmail: "customer123@gmail.com",
 customerName: "김토스",
 customerMobilePhone: "01012341234",
}).catch(err => {
  console.log("123")
  console.log(err)
});

widgets.requestPayment({
 orderId: generateRandomString(),
 orderName: "토스 티셔츠 외 2건",
 successUrl: window.location.origin + "/sandbox/success",
 failUrl: window.location.origin + "/sandbox/fail",
 customerEmail: "customer123@gmail.com",
 customerName: "김토스",
 customerMobilePhone: "01012341234",
}).catch(err => {
  console.log("123")
  console.log(err)
});

이렇게 처리할 수도 있습니다. -# *Promise 방식 참고 영상 : 프로미스(Promise)와 async / await: https://youtu.be/6AhQFPVl96s

이실장•5d ago

🔼 작은 글씨는 어떻게해요?

Minsu Kim•5d ago

-# (내용) 얼마전 추가된 신문법입니다 !

이맹기OP•5d ago

감사합니다 !

토스페이먼츠 BOT•5d ago

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

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

자동결제(빌링) 카드 등록 화면 관련 문의입니다.

Did you find this page helpful?