목표를향해•2y ago

Payment error 이벤트 체크 문의

toss payment widget으로 연동중인데, ui 에러 이벤트를 받을 수 있는지 문의 드립니다.

33 Replies

토스페이먼츠 BOT•2y ago

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

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

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

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

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

목표를향해OP•2y ago

목표를향해OP•2y ago

RN에서 토스 결제 위젯을 부분 웹뷰로 띄워서 진행하는데요~ 카드사를 선택해주세요~ 에러를 캐치가 되는지 알고 싶습니다.

Kimoon Lee•2y ago

현재 해당 이벤트를 받는 방법은 없습니다. 혹시 캐치하려고 하시는 이유를 알수 있을까요?

목표를향해OP•2y ago

현재 저희 앱을 React Native로 구현했는데~ 결제 방식 저 부분만 웹뷰로 진행하고 있습니다. 나머지는 RN 베이스로 되어 있구요~ 그래서 RN의 WebView와 postMessage로 통신을 주고 받으면서 진행하는데~ 결제하기를 눌렀을 때 카드사, 할부 개월 수 선택안하면 에러가 나는 창이 발생하더라구요~ 제가 원하는 동작은 결제하기 눌러서 동의 받고 payment widget에서 카드사 페이지를 랜더링 되면~ 이대는 웹뷰 전체 화면으로 사이즈를 늘려서~ 진행하고 싶은데~ 저 부분이 캐치가 되지 않아서~ UX가 어색하게 구현이 됩니다.

이실장•2y ago

그런데.. 위젯 부분만 웹뷰로하셨으면 결제위젯이 선택한 수단에 따라 높이가 달라질 텐데. 가려지지 않나요?

목표를향해OP•2y ago

그 부분은 inject script로 document scroll height 변화에 따라 RN의 웹뷰 사이즈 가변 조정 되고 있습니다. 실제 구현된 화면을 보여드릴게요~ 잠시만요~

이실장•2y ago

그럼 결제하기 버튼 눌렀을 때 선택한 결제수단은 어떻게 가져오고 계시나요? 새로운 웹뷰 띄워서 넘어가야할 것 같은데요. 아니면 해당 웹뷰 조그만 영역에 렌더되지 않나요?

Kimoon Lee•2y ago

그래서 웹뷰를 사이즈를 늘린다고 하신것 같아요..

목표를향해OP•2y ago

첨부한 사진 처럼~

목표를향해OP•2y ago

웹뷰 사이즈가 작게 나오기 때문에 ~저는 저 결제 화면이 될 때 큰 화면으로 전환하고 싶은데~ 카드사 선택 에러라던지, UI적인 에러 이벤트를 체크 못해서~ 시점을 선택할 수가 없습니다.

이실장•2y ago

결제하기 버튼 누르면 무조건 웹뷰를 큰화면으로 전환하는데.. 에러핸들링이 안되니.. 실제 카드사결제창이 안떳는데도 큰화면으로 바뀐다는 말씀이시군요..?

목표를향해OP•2y ago

네 맞습니다~

이실장•2y ago

잠시만 기다려주세요! 가이드를 어떻게 해드릴지 확인해서 안내드릴게요 혹시 저희 native SDK 를 import해서 사용하실 수 있을까요? nativeSDK에 높이 등을 실시간으로 전달해드리는 등 관련 메서드를 전달해드리고 있어서요 아니면 alert관련 문의주신 건도 있고 자체창 방식으로 직접 연동하시는 방법도 있을 것 같습니다.

목표를향해OP•2y ago

nativeSDK라는게

import {loadPaymentWidget} from "@tosspayments/payment-widget-sdk";

import {loadPaymentWidget} from "@tosspayments/payment-widget-sdk";

이거 말씀하시는건가요~? 안에 types들을 보면~

 renderPaymentMethods: (selector: string, amount: number) => {
        updateAmount: (amount: number, reason: string | string[]) => void;
        UPDATE_REASON: {
            COUPON: string;
            POINT: string;
        };
        on: (eventName: string, callback: (selectedPaymentMethod: string) => unknown) => void;
        __getSelectedPaymentMethods: () => ValueOf<{
            readonly 카드: "CARD";
            readonly 가상계좌: "VIRTUAL_ACCOUNT";
            readonly 휴대폰: "MOBILE_PHONE";
            readonly 토스페이: "TOSSPAY";
            readonly 토스결제: "TOSSPAY";
            readonly 계좌이체: "TRANSFER";
            readonly 문화상품권: "CULTURE_GIFT_CERTIFICATE";
            readonly 게임문화상품권: "GAME_GIFT_CERTIFICATE";
            readonly 도서문화상품권: "BOOK_GIFT_CERTIFICATE";
            readonly 해외간편결제: "FOREIGN_EASY_PAY";
            readonly 미선택: "";
        }>;
    };
    renderAgreement: (selector: string) => {
        on: (eventName: string, callback: (params: AgreementStatus) => void) => void;
        getAgreementStatus: () => AgreementStatus;
    };
    requestPayment: (parameters: PaymentRequestParameters) => Promise<import("@sdk/payment/src/payment/requestPayment").RequestPaymentResult | undefined>;
    requestPaymentForNativeSDK: (parameters: PaymentRequestParameters) => Promise<void>;

 renderPaymentMethods: (selector: string, amount: number) => {
        updateAmount: (amount: number, reason: string | string[]) => void;
        UPDATE_REASON: {
            COUPON: string;
            POINT: string;
        };
        on: (eventName: string, callback: (selectedPaymentMethod: string) => unknown) => void;
        __getSelectedPaymentMethods: () => ValueOf<{
            readonly 카드: "CARD";
            readonly 가상계좌: "VIRTUAL_ACCOUNT";
            readonly 휴대폰: "MOBILE_PHONE";
            readonly 토스페이: "TOSSPAY";
            readonly 토스결제: "TOSSPAY";
            readonly 계좌이체: "TRANSFER";
            readonly 문화상품권: "CULTURE_GIFT_CERTIFICATE";
            readonly 게임문화상품권: "GAME_GIFT_CERTIFICATE";
            readonly 도서문화상품권: "BOOK_GIFT_CERTIFICATE";
            readonly 해외간편결제: "FOREIGN_EASY_PAY";
            readonly 미선택: "";
        }>;
    };
    renderAgreement: (selector: string) => {
        on: (eventName: string, callback: (params: AgreementStatus) => void) => void;
        getAgreementStatus: () => AgreementStatus;
    };
    requestPayment: (parameters: PaymentRequestParameters) => Promise<import("@sdk/payment/src/payment/requestPayment").RequestPaymentResult | undefined>;
    requestPaymentForNativeSDK: (parameters: PaymentRequestParameters) => Promise<void>;

이실장•2y ago

아뇨 저희 android/ios용 sdk를 RN에서 import해서 사용하는 방식인데요

이실장•2y ago

https://docs.tosspayments.com/reference/widget-android

결제위젯 Android SDK | 토스페이먼츠 개발자센터

결제위젯 Android SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.

목표를향해OP•2y ago

아~ 제가 expo에서 eject 한 형태로 환경 구성했는데~ 각 플롯폼에 맞게 내부에서 구현해야 한다는 말씀이시군요~ 제가 선택할 수 있는 수단이 그러면~

1. 현재 그대로 진행
2. 결제창을 부분 위젯으로 하지 않고~ 결제 부분을 웹에다가 모두 그려서 진행 
3. nativeSDK를 이용하여 각 플랫폼에 맞게 자체 제작
4. 자체창 방식 연동

1. 현재 그대로 진행
2. 결제창을 부분 위젯으로 하지 않고~ 결제 부분을 웹에다가 모두 그려서 진행 
3. nativeSDK를 이용하여 각 플랫폼에 맞게 자체 제작
4. 자체창 방식 연동

이 정도가 되겠네요~

이실장•2y ago

네 현재는 그렇습니다. 저희도 rn sdk를 제공 계획은 있지만, 당장 준비는 어려울 것 같아요

목표를향해OP•2y ago

네~ 알겠습니다. 고민해보고 선택하도록 하겠습니다.

이실장•2y ago

저희도 RN으로 좀더 쉽게 연동할 수 있는 방법이 있을지 확인해볼게요

Ayaan이안•2y ago

지금 당장은 2번이 가장 쉬우실거 같아요. RN이면 리액트 기반이라, 코드 몇줄만 바꿔주면 리액트 웹으로 굴릴수도 있으니...

목표를향해OP•2y ago

이 에러는 어떤 상황에서 발생하나요~? 그리고 국민카드로 한번 결제하고 나면 자동으로 계속 국민으로만 들어가집니다.

유부장•2y ago

이건 해당 카드사에서 보여주는 메시지 입니다. 결제 할때 어떤 카드로 결제할지 선택 할 수 있어요

목표를향해OP•2y ago

국민카드로 결제 하고 나면~ 그 창이 뜨자마자 바로 국민카드 앱으로 넘어가버리는 현상이 발생하는데요~

유부장•2y ago

예전에 국민으로 결제 했으면, 카드사 선택에서 국민이 미리 선택 되어 있도록 기능적으로 제공 하고 있고, 이슈가 아닙니다. 어디에서 카드사를 선택할 수 있는지 안보이시는건가요?

Kimoon Lee•2y ago

캡쳐 말고 영상으로 주실수 있을까요?

목표를향해OP•2y ago

네 잠시만요~ 카드사 선택에서 바로 넘어갔던 이슈는 저희쪽 테스터원이 잘못해서 나온 이슈라고 하네요~ 지금 아이폰은 앱이 잘 띄워지는데~ 안드로이드는 카드 결제를 하게 되면 앱이 다 안뜨고~ 저기서 진행이 안되는데요~

유부장•2y ago

영상 공유 부탁 드립니다. 안드로이드 웹뷰에서 shouldOverrideUrlLoading 적용 하셨는지도 확인 부탁 드립니다.

Kimoon Lee•2y ago

안드로이드에서 카드사 앱 사용이 되도록 허용해 주셨는지 확인 부탁드립니다.

토스페이먼츠 BOT•2y ago

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

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

Payment error 이벤트 체크 문의

Did you find this page helpful?