nextjs 결제위젯 연동 문의
https://github.com/tosspayments/payment-widget-sample/blob/main/nextjs/src/pages/index.tsx
예제 참고해서 연동 중인데요.
tosspayments/payment-widget-sdk 의 requestPayment() 로 paymentKey 발급받으려고 하는데요.
Unknown Error Error: "successUrl" 또는 "failUrl"을 넘긴 경우 Promise 방식을 지원하지 않습니다.
라고 합니다.
1. requestPayment() 을 사용하면서 successUrl 을 사용하지 않고 paymentKey를 발급받는 방법이 있을까요?
2.requestPayment() 외에 위젯에서 결제할 수 있는 다른 방법이 있을까요?
GitHub
payment-widget-sample/nextjs/src/pages/index.tsx at main · tosspaym...
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
16 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
없습니다.
평소에 결제를 해보셔서 아시겠지만, 국내 카드 결제의 경우 카드사앱으로 이동해야하기 떄문에 promise가 불가해요
const paymentRequestInfo = await paymentWidget?.requestPayment({
orderId: nanoid(),
orderName: "토스 티셔츠 외 2건",
customerName: "김토스",
customerEmail: "customer123@gmail.com",
});
로 확인해보니까 paymentKey가 넘어오는데요.
결제 위젯에서 결제 요청 시 paymentWidget?.requestPayment() 호출
발급된 paymentKey 로 https://api.tosspayments.com/v1/payments/confirm 호출
위 순서대로 결제연동해도 문제없는거죠? 테스트 결제내역에도 제대로 넘어오는 것 같아서요.
PC 에서 확인중이신건가요? 모바일에서 확인중이신건가요?
PC에서 확인중입니다.
Promise는 PC에서만 가능합니다
(iframe으로 뜨기 때문에)
모바일에서는 페이지가 카드사창으로 redirect되기 떄문에 사용이 불가해요
네 그러면 paymentWidget?.requestPayment() 가 사용안된다는 말씀이신거죠?
모바일 환경에선 어떻게 paymentKey 발급 받을 수 있나요?
모바일환경에서는 successurl 을 무조건 넣으셔야 합니다.
넵 next.js에서 promise 외 다른 방법으로 requestPayment 사용하려면 어떻게 해야하나요?
await paymentWidget?.requestPayment({
orderId: nanoid(),
orderName: "토스 티셔츠 외 2건",
customerName: "김토스",
customerEmail: "customer123@gmail.com",
successUrl:
${window.location.origin}/success
,
failUrl: ${window.location.origin}/fail
,
});
이렇게 successURL 을 넣으시면 되지 않나요? 이 코드에서 promise 로 처리 되지 않는다고 에러가 발생하시는 걸까요?넵 맞습니다. 위 코드에서 promise 로 처리되지 않는다고 에러가 발생하고 있습니다.
결제 테스트 하신 주문번호가 0d6evKjLCysij-TRDctU4 인가요?
orderId 값 알려주시면, 결제 요청할때 어떻게 보내셨는지 확인 해보겠습니다.
해당 에러를 받으신 주문번호를 하나 알려주시기 바랍니다.
확인해보니까 successUrl 만 넣었었고, 그 때 아래 메세지가 수신됐었네요.
Unknown Error Error: "successUrl" 또는 "failUrl"을 넘긴 경우 Promise 방식을 지원하지 않습니다.
failUrl 추가했을때 정상동작되는것 확인하였습니다
네 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.