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

현재 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()}`,
    };
  }
};

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()}`,
    };
  }
};

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads