박선우•5w ago

결제 완료시 토스 결제 화면 노출되는 문제

현재 Capacitor, NextJS를 이용한 하이브리드앱(웹뷰)에서 결제위젯을 사용하고 있습니다. android에서 토스 페이먼츠를 이용한 외부 결제사 결제 완료시 결제 시작 화면으로 돌아가거나 success url로 라우팅되지 않고, 토스 페이먼츠 결제 화면이 노출됩니다. 어떤 문제인지 파악이 어려운데 도움 받을 수 있을까요? android에서 결제 플로우 진행시 앱 내에서 결제가 진행되고, 결제 완료시 결제사 화면이 닫히면서 토스 페이먼츠 화면이 출력됩니다. 카카오페이, 페이북 등 어떤 결제 플로우를 수행해도 동일합니다 영상 참고 부탁드립니다. (토스 결제 완료 화면 -> 로딩 -> 토스 페이먼츠 결제 유도 화면) 결제 위젯에 대한 코드는 아래와 같습니다.

await paymentWidget?.requestPayment({
  orderId: paymentData.orderUid,
  orderName,
  customerName: user.name,
  customerEmail: user.email,
  customerMobilePhone: user.phoneNumber.replaceAll('-', ''),
  ...getRedirectUrls(params, appInfo),
});

// 플랫폼별 리다이렉트 URL 생성
const getRedirectUrls = (params: URLSearchParams, appInfo: any) => {
  if (isNative) {
    // 네이티브(iOS/Android)에서는 앱 스킴 사용
    return {
      successUrl: `${appInfo.id}://customer/payment/success?${params.toString()}`,
      failUrl: `${appInfo.id}://customer/payment/fail?${params.toString()}`,
    };
  } else {
    // 웹에서는 일반 URL 사용
    return {
      successUrl: `${window.location.origin}/customer/payment/success?${params.toString()}`,
      failUrl: `${window.location.origin}/customer/payment/fail?${params.toString()}`,
    };
  }
};

await paymentWidget?.requestPayment({
  orderId: paymentData.orderUid,
  orderName,
  customerName: user.name,
  customerEmail: user.email,
  customerMobilePhone: user.phoneNumber.replaceAll('-', ''),
  ...getRedirectUrls(params, appInfo),
});

// 플랫폼별 리다이렉트 URL 생성
const getRedirectUrls = (params: URLSearchParams, appInfo: any) => {
  if (isNative) {
    // 네이티브(iOS/Android)에서는 앱 스킴 사용
    return {
      successUrl: `${appInfo.id}://customer/payment/success?${params.toString()}`,
      failUrl: `${appInfo.id}://customer/payment/fail?${params.toString()}`,
    };
  } else {
    // 웹에서는 일반 URL 사용
    return {
      successUrl: `${window.location.origin}/customer/payment/success?${params.toString()}`,
      failUrl: `${window.location.origin}/customer/payment/fail?${params.toString()}`,
    };
  }
};

3 Replies

토스페이먼츠 BOT•5w ago

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

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

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

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

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

Kimoon Lee•5w ago

해당 증상은 successURL 로 설정하신 화면으로 이동요청을 했는데, 페이지 로딩이 오래걸리는 경우 발생합니다. ${window.location.origin}/customer/payment/success?${params.toString()} 이 URL 이 빠르게 로딩되도록 해주세요.

토스페이먼츠 BOT•5w ago

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

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

결제 완료시 토스 결제 화면 노출되는 문제

Did you find this page helpful?