모바일 웹뷰앱에서 결제위젯 연동 문의드립니다.
리액트 웹에서 아래와 같은 형태로 결제 위젯을 구현하고 있습니다.
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);
}
}
};
웹에서 각 은행사별 결제창에서 닫기창을 누르면 에러 쪽으로 호출이 잘 들어오는데
해당앱을 웹뷰로 패키징해서 모바일 환경에서 실행하는 경우 은행사별 결제창에서 뒤로 가기를 했을 때는 에러쪽으로 호출이 되지 않습니다.
모바일에서 사용자가 취소했을때는 다른 방법으로 감지해야하는건가요?7 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
웹에서는 실제로 결제창이 닫히는거고
모바일에서 뒤로가기하는건 페이지가 뒤로가기한거여서
에러가 호출되지 않습니다.
도메인 보시면 도메인이 바뀌어요
모바일에서 뒤로가기 말고 x버튼 눌러서 취소하면 failurl로 이동할겁니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
@이실장
토스나 네이버페이, 몇몇 신용카드의 결제창에서는 x버튼을 눌러서 취소했을 때 failUrl로 이동하는 것을 확인하였습니다.
그런데 첨부 사진과 같이 결제창에서 별도 취소 버튼이 없는 경우는 어떻게 처리가 가능한가요??
그건 카드사에서 제공하지 않아서 어쩔 수 없습니다. 웹뷰 상단에 x버튼을 직접구현해주시거나
해주셔야해요
별도 x버튼을 구현해서 똑같이 failUrl로 이동하도록 구현해야한다는 말씀이신거죠??
넵 맞습니다!