M결제 완료 후 브라우저 뒤로가기 시 토스/카카오페이 결제 페이지로 이동하는 문제
결제연동환경
- SDK: Toss Payments JavaScript SDK v2 (https://js.tosspayments.com/v2/standard)
- 결제 방식: 카카오페이, 토스페이 (간편결제)
- 플랫폼: 모바일 웹 (아이폰 크롬)
문제 상황
결제 완료 후 successUrl로 리다이렉트된 결제 완료 페이지에서 브라우저 뒤로가기 버튼을 누르면, 토스/카카오페이 결제 게이트웨이 페이지(payment-gateway.tosspayments.com 등)로 이동합니다.
이 페이지는 이미 결제가 완료되어 만료된 상태라 사용자에게 혼란을 줍니다.
현재 결제 플로우
1. 상품 선택 페이지 (/web/saju/tickets/)
2. 결제 페이지 (/web/payment/ticket-checkout/)
3. 토스 결제 게이트웨이 (payment-gateway.tosspayments.com) ← history에 남음
4. 카카오페이/토스페이 앱 또는 페이지 ← history에 남음
5. 결제 완료 페이지 (/web/payment/ticket-success/)
시도한 해결 방법
1. history.pushState + popstate 이벤트: 결제 완료 페이지에서 뒤로가기 감지하여 location.replace()로 원래 페이지 이동 → 부분적으로 동작하나, 여전히 결제 게이트웨이 페이지가 history에 남아있음
2. history.go(-n): 결제 전 history length 저장 후 차이만큼 뒤로 이동 → 외부 페이지 개수가 일정하지 않아 정확한 계산 어려움
3. Bridge 페이지 패턴: 결제 완료 페이지를 순수 브릿지로 사용하여 즉시 location.replace() → 여전히 게이트웨이 페이지가 history에 남음
질문
1. 결제 게이트웨이 페이지가 browser history에 남지 않도록 하는 공식적인 방법이 있나요?
2. 다른 서비스들은 결제 후 뒤로가기 시 이 문제를 어떻게 해결하고 있나요?
3. requestPayment() 호출 시 history를 남기지 않는 옵션이 있나요?
현재 코드
// 결제 요청
await payment.requestPayment({
method: 'CARD',
amount: { value: product.price, currency: 'KRW'},
orderId: orderId,
orderName: orderName,
successUrl:
failUrl:
card: {
flowMode: 'DIRECT',
easyPay: 'KAKAOPAY' // 또는 'TOSSPAY'
}
});
- SDK: Toss Payments JavaScript SDK v2 (https://js.tosspayments.com/v2/standard)
- 결제 방식: 카카오페이, 토스페이 (간편결제)
- 플랫폼: 모바일 웹 (아이폰 크롬)
문제 상황
결제 완료 후 successUrl로 리다이렉트된 결제 완료 페이지에서 브라우저 뒤로가기 버튼을 누르면, 토스/카카오페이 결제 게이트웨이 페이지(payment-gateway.tosspayments.com 등)로 이동합니다.
이 페이지는 이미 결제가 완료되어 만료된 상태라 사용자에게 혼란을 줍니다.
현재 결제 플로우
1. 상품 선택 페이지 (/web/saju/tickets/)
2. 결제 페이지 (/web/payment/ticket-checkout/)
3. 토스 결제 게이트웨이 (payment-gateway.tosspayments.com) ← history에 남음
4. 카카오페이/토스페이 앱 또는 페이지 ← history에 남음
5. 결제 완료 페이지 (/web/payment/ticket-success/)
시도한 해결 방법
1. history.pushState + popstate 이벤트: 결제 완료 페이지에서 뒤로가기 감지하여 location.replace()로 원래 페이지 이동 → 부분적으로 동작하나, 여전히 결제 게이트웨이 페이지가 history에 남아있음
2. history.go(-n): 결제 전 history length 저장 후 차이만큼 뒤로 이동 → 외부 페이지 개수가 일정하지 않아 정확한 계산 어려움
3. Bridge 페이지 패턴: 결제 완료 페이지를 순수 브릿지로 사용하여 즉시 location.replace() → 여전히 게이트웨이 페이지가 history에 남음
질문
1. 결제 게이트웨이 페이지가 browser history에 남지 않도록 하는 공식적인 방법이 있나요?
2. 다른 서비스들은 결제 후 뒤로가기 시 이 문제를 어떻게 해결하고 있나요?
3. requestPayment() 호출 시 history를 남기지 않는 옵션이 있나요?
현재 코드
// 결제 요청
await payment.requestPayment({
method: 'CARD',
amount: { value: product.price, currency: 'KRW'},
orderId: orderId,
orderName: orderName,
successUrl:
${baseUrl}/web/payment/ticket-success/${baseUrl}/web/payment/ticket-success/,failUrl:
${baseUrl}/web/payment/fail/${baseUrl}/web/payment/fail/,card: {
flowMode: 'DIRECT',
easyPay: 'KAKAOPAY' // 또는 'TOSSPAY'
}
});
