박선우•3w ago

인앱 브라우저에서 토스 결제 위젯이 결제 수단을 불러오지 못하는 문제

안녕하세요. 이전 문의에서 인앱브라우저에서 결제 위젯부터 띄우는 방법을 알려주셔서, Capacitor를 이용한 인앱브라우저에서 결제 위젯을 렌더링하고 있습니다. 인앱 브라우저에서 결제 위젯이 있는 페이지는 정상 렌더링하고 있으나, 결제 위젯은 토스에서 제공하는 "결제수단 확인 중" -> "잠시만 기다려주세요" 라는 텍스트와 함께 무한 로딩에 걸립니다. 어떤 케이스에 해당 에러가 발생할 수 있는지 알 수 있을까요? 결제 위젯을 렌더링하는 코드는 아래와 같습니다.

// 결제위젯 렌더링
  useEffect(() => {
    if (!paymentWidget) return;

    // 결제위젯 렌더링
    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      '#payment-widget',
      { value: paymentData.price },
      { variantKey: 'DEFAULT' },
    );

    // 이용약관 렌더링
    paymentWidget.renderAgreement('#agreement', {
      variantKey: 'AGREEMENT',
    });

    // 결제 UI 렌더링 완료 이벤트
    paymentMethodsWidget.on('ready', () => {
      alert('[PaymentContent] 결제위젯 렌더링 완료');
      paymentMethodsWidgetRef.current = paymentMethodsWidget;
      setIsPaymentMethodsWidgetReady(true);
    });
  }, [paymentWidget, paymentData.price]);

// 결제위젯 렌더링
  useEffect(() => {
    if (!paymentWidget) return;

    // 결제위젯 렌더링
    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      '#payment-widget',
      { value: paymentData.price },
      { variantKey: 'DEFAULT' },
    );

    // 이용약관 렌더링
    paymentWidget.renderAgreement('#agreement', {
      variantKey: 'AGREEMENT',
    });

    // 결제 UI 렌더링 완료 이벤트
    paymentMethodsWidget.on('ready', () => {
      alert('[PaymentContent] 결제위젯 렌더링 완료');
      paymentMethodsWidgetRef.current = paymentMethodsWidget;
      setIsPaymentMethodsWidgetReady(true);
    });
  }, [paymentWidget, paymentData.price]);

27 Replies

토스페이먼츠 BOT•3w ago

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

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

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

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

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

today.lastday•3w ago

오늘 시간이 늦어 자세한 확인이 어려울 것 같습니다. mid와 렌더링 요청했던 시간 남겨주시면 다음주 확인 도와드리겠습니다.

이실장•3w ago

영상도 남겨놔주세요

박선우OP•3w ago

네, 요청하신 영상 및 정보 보내드립니다. 확인 부탁드립니다! - mid: monandol - 렌더링 요청 시간: 25년 8월 23일(토) 오후 3시 58분 *참고로, IOS에서만 해당 이슈가 발생되고, 안드로이드와 웹에서는 정상적으로 동작합니다.

이실장•3w ago

이게 지금도 계속 재현되나요?

박선우OP•3w ago

네, 지금도 동일합니다. 8월 25일 월요일 오전 9시 48분 로그 확인 부탁드립니다!

Kimoon Lee•3w ago

사용하시는 clientkey 도 알려주세요.

박선우OP•3w ago

test_gck_vZnjEJeQVxbYlRZqMk5O8PmOoBN0 입니다

이실장•3w ago

혹시 해당 기기에서만 발생하나요? 아니면 모든 아이폰에서 발생하나요?

박선우OP•3w ago

모든 아이폰에서 발생합니다!

이실장•3w ago

혹시 렌더링할 때 사용하신 customerkey도 특정가능할까요? capacitor쪽 웹뷰에서 네트워크나, 콘솔로그에 특이점은 없나요?

박선우OP•3w ago

customerKye는 560912 입니다. capacitor 웹뷰 자체의 네트워크나 콘솔로그에는 특이점이 없이 정상 동작합니다. 다만, capacitor에서 띄워주는 ios 인앱 브라우저의 네트워크와 콘솔로그를 확인할 수 있는 방법이 없어 해당 문제의 원인을 파악하지 못하고 있는 상태입니다. safari를 연결하여 개발자 도구로 확인해보았으나, 인앱 브라우저가 열리면 개발자 도구에 어떠한 추가 기록도 생성되지 않아 확인이 어렵습니다. 다만, 인앱브라우저에서도 토스 결제 위젯을 제외한 라우팅, 이벤트들이 정상 동작하기 때문에 토스에 문의 드렸습니다! Capacitor 자체에 allowNavigation에 대한 세팅이 있어서 "*.tosspayments.com" 를 열어둔 상태입니다. Capacitor의 플러그인에서 인앱 브라우저에 대한 추가 환경 세팅을 전달할 수 없는 것으로 보아 웹뷰와 동일한 환경으로 노출하고 있을 것이라는 예측을 하고 있습니다. --- 인앱브라우저에서는 결제 수단이 노출되지 않지만, ios에서도 동일 웹뷰 안에서는 결제 수단을 불러오는 것에 이슈가 없습니다. 다만, 동일 웹뷰 내부에서 결제 위젯을 노출했을 때, 다음 단계로 노출되는 결제 앱 유도 페이지가 safe 영역에 overlay 되는 이슈가 있어 인앱브라우저로 적용하였습니다. --- 말씀하신 웹뷰 내 콘솔로그는 사파리 개발자용으로 인스펙터를 확인하는 방법으로 시도해보았으나, 인앱브라우저가 열리면 어떠한 로그도 찍히지 않아서 확인이 어려운 상태입니다. 웹뷰 내 콘솔로그 확인에 대한 팁이 있을까요? --- 토스에 결제 위젯 로드 요청 자체가 전달되지 않은 걸까요?

이실장•3w ago

이때도 위 customerKey사용하신거죠? 요청자체가 안오는 것 같네요 pc에서 한것만 요청이 정상적으로 오고 있는 것 같아요

박선우OP•3w ago

확인 감사합니다. 요청 자체가 안 가는 것으로 디버깅 해보겠습니다!

박선우OP•3w ago

fiddler 통해서 API 호출 부분들을 확인해보았는데 웹이나 안드로이드 인앱브라우져랑 다른 점이 저렇게 API 들이 호출되고 나서 토스페이먼츠 web-vitals API 가 호출이 안되고 있고 그 뒤로 동의약관 API, UI 셋팅 API 호출이 안되고 있습니다.. 혹시,,, 유추되는 문제가 있을까요?!

이실장•3w ago

요청이 안오다보니 애매하네요. 저희가 막는건 없거든요. 꼭 결제위젯을 사용하셔야하는 상황이실까요? 동영상 봤을 땐 어차피 화면이동 후 결제위젯영역만 노출시키시는 것으로 보여서요

박선우OP•3w ago

결제 위젯을 띄우는 방식 외에 추천하시는 방식이 있을까요? 카드사 페이지도 열어놨습니다! 말씀 감사합니다. 결제창은 결제 위젯과 동작 방식이 차이가 있을까요? 어떤 차이에서 가능성을 보시고 말씀해주시는지 궁금합니다! UI 형태는 말씀해주신 부분이 맞는 듯 합니다. 감사합니다. 다만, 결제 위젯과 결제 창을 토스에서 불러오는 방식이 차이가 있나요? 차이가 없다면, 결제 위젯을 불러올 때와 동일한 에러가 노출될 것 같습니다! 이해했습니다. 친절한 답변 감사합니다! 결제창으로 시도해보겠습니다~ 네, 참고하겠습니다!

이실장•3w ago

@박선우

이실장•3w ago

문서는 위 방식인데요. https://docs.tosspayments.com/guides/payment/integration

토스페이먼츠 결제창 연동하기(Version 1) | 토스페이...

카드 결제창을 연동해보세요.

이실장•3w ago

 tossPayments
      .requestPayment("카드", {
        // 결제수단 파라미터 (카드, 계좌이체, 가상계좌, 휴대폰 등)
        // 결제 정보 파라미터
        // 더 많은 결제 정보 파라미터는 결제창 Javascript SDK에서 확인하세요.
        // https://docs.tosspayments.com/sdk/payment-js
        amount: 100, // 결제 금액
        orderId: 'OwWTzM3OWvc5UVrgqBvkl', // 주문번호(주문번호는 상점에서 직접 만들어주세요.)
        orderName: "테스트 결제", // 구매상품
        customerName: "김토스", // 구매자 이름
        successUrl: "https://docs.tosspayments.com/guides/payment/test-success", // 결제 성공 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
        failUrl: "https://docs.tosspayments.com/guides/payment/test-fail", // 결제 실패 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
      })

 tossPayments
      .requestPayment("카드", {
        // 결제수단 파라미터 (카드, 계좌이체, 가상계좌, 휴대폰 등)
        // 결제 정보 파라미터
        // 더 많은 결제 정보 파라미터는 결제창 Javascript SDK에서 확인하세요.
        // https://docs.tosspayments.com/sdk/payment-js
        amount: 100, // 결제 금액
        orderId: 'OwWTzM3OWvc5UVrgqBvkl', // 주문번호(주문번호는 상점에서 직접 만들어주세요.)
        orderName: "테스트 결제", // 구매상품
        customerName: "김토스", // 구매자 이름
        successUrl: "https://docs.tosspayments.com/guides/payment/test-success", // 결제 성공 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
        failUrl: "https://docs.tosspayments.com/guides/payment/test-fail", // 결제 실패 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
      })

v1 sdk 사용하시면서 결제수단 부분을 empty string으로 보내주시면, 모든 결제수단 선택가능한 창이 뜰거에요

박선우OP•3w ago

공유 감사합니다. 카드/간편결제 통합결제창 v2 (https://docs.tosspayments.com/guides/v2/payment-window/integration) 가 아닌, 공유해주신 v1을 사용해야 한다는게 맞을까요? v1을 사용해야 하는 이유는 어떤 것일까요?

카드/간편결제 통합결제창 연동하기 | 토스페이먼...

토스페이먼츠 카드/간편결제 통합결제창을 연동하는 방법이에요. 구매자가 결제창에서 결제수단, 결제 정보를 선택한 뒤에 카드 또는 간편결제 앱으로 이동해요.

이실장•3w ago

v2를 쓰셔도되는데 위에처럼 결제수단 선택하는 부분부터 결제창에서 하고 싶으시면, v1을 쓰셔야해요 결제수단 선택영역은 직접 구현하실거면 관련없습니다.

박선우OP•3w ago

상세한 답변 감사합니다. 고려해서 작업 진행하겠습니다! 하나만 더 여쭙겠습니다! 테스트 키로 결제 수단을 "카드"로만 한정할 경우, 간편 결제 수단이 네이버 페이와 토스 페이만 들어오는 것을 확인했습니다. 카카오 페이는 제공하지 않는걸까요?

이실장•3w ago

라이브환경으로 확인해보시기 바랍니다. 테스트환경 이슈가 있어 빠져있을거에ㅛ

박선우OP•3w ago

넵 너무너무 감사합니다!

토스페이먼츠 BOT•3w ago

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

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

인앱 브라우저에서 토스 결제 위젯이 결제 수단을 불러오지 못하는 문제

Did you find this page helpful?