모바일 웹뷰앱에서 결제위젯 연동 문의드립니다.
리액트 웹에서 아래와 같은 형태로 결제 위젯을 구현하고 있습니다.
try {
// 토스 결제는 무조건 카드 결제
const method = "C";
// 결제 요청
await widgets.requestPayment({
orderId: orderId, // 주문 ID
orderName: productName, // 주문명
customerName: buyerName, // 구매자명
successUrl:
failUrl: window.location.href, // 결제 실패시 리다이렉트 URL(구매하기 페이지에 머물게함)
});
} catch (error: any) {
// 에러 발생 시 서버에 결제 취소 요청
try {
await deletePayment(order_id);
// 사용자가 결제를 취소한 경우
if (error.code === "USER_CANCEL") {
console.log("사용자가 결제를 취소했습니다.");
} else {
console.error("결제 중 에러 발생:", error.message);
}
} catch (apiError) {
console.error("결제 취소 중 에러 발생:", apiError);
}
}
};
웹에서 각 은행사별 결제창에서 닫기창을 누르면 에러 쪽으로 호출이 잘 들어오는데
해당앱을 웹뷰로 패키징해서 모바일 환경에서 실행하는 경우 은행사별 결제창에서 뒤로 가기를 했을 때는 에러쪽으로 호출이 되지 않습니다.
모바일에서 사용자가 취소했을때는 다른 방법으로 감지해야하는건가요?
try {
// 토스 결제는 무조건 카드 결제
const method = "C";
// 결제 요청
await widgets.requestPayment({
orderId: orderId, // 주문 ID
orderName: productName, // 주문명
customerName: buyerName, // 구매자명
successUrl:
${window.location.origin}/success?method=${method},failUrl: window.location.href, // 결제 실패시 리다이렉트 URL(구매하기 페이지에 머물게함)
});
} catch (error: any) {
// 에러 발생 시 서버에 결제 취소 요청
try {
await deletePayment(order_id);
// 사용자가 결제를 취소한 경우
if (error.code === "USER_CANCEL") {
console.log("사용자가 결제를 취소했습니다.");
} else {
console.error("결제 중 에러 발생:", error.message);
}
} catch (apiError) {
console.error("결제 취소 중 에러 발생:", apiError);
}
}
};
웹에서 각 은행사별 결제창에서 닫기창을 누르면 에러 쪽으로 호출이 잘 들어오는데
해당앱을 웹뷰로 패키징해서 모바일 환경에서 실행하는 경우 은행사별 결제창에서 뒤로 가기를 했을 때는 에러쪽으로 호출이 되지 않습니다.
모바일에서 사용자가 취소했을때는 다른 방법으로 감지해야하는건가요?
