일반 결제 (Promise)에 관한 질문입니다.
토스 결제를 연동하고 있는데 일반 결제 (PC)에서 사용하는 경우 successUrl, failUrl를 넘겨주지 않고 사용하면 Promise로 값을 받는다고 문서에 설명이 나와있는데 카드 결제창에서 카드 결제를 누르면
http://localhost:5174/undefined <- [POST]로 통신을 보내고 페이지를 찾을 수 없습니다. 라고 오류가 나오게 됩니다.
23 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
requestPayment 호출하는 함수를 전체를 보내주시겠어요?
const request = async () => {
await payment.requestPayment({
method: 'CARD', // 카드 및 간편결제
amount: {
currency: 'KRW',
value: 50000,
},
orderId: 'LOFT-11', // 고유 주문번호
orderName: '토스 티셔츠 외 2건',
// successUrl: window.location.origin + "/payment/success", // 결제 요청이 성공하면 리다이렉트되는 URL
// failUrl: window.location.origin + "/fail", // 결제 요청이 실패하면 리다이렉트되는 URL
customerEmail: 'customer123@gmail.com',
customerName: '김토스',
// 가상계좌 안내, 퀵계좌이체 휴대폰 번호 자동 완성에 사용되는 값입니다. 필요하다면 주석을 해제해 주세요.
// customerMobilePhone: "01012341234",
card: {
useEscrow: false,
flowMode: 'DEFAULT',
useCardPoint: false,
useAppCardOnly: false,
},
});
};
입니다!!
결제창이 표시 되지 않으시는 건가요?
결제창은 표시되었고 카카오뱅크 카드로 결제를 성공하고 해당 현상이 발생합니다
그런데 보내주신 코드에는 promise 를 처리하는 부분이 없는데요.
그부분 코드도 공유 부탁드립니다.
const request = async () => {
if (!payment) return;
await payment.requestPayment({
method: 'CARD', // 카드 및 간편결제
amount: { currency: 'KRW', value: 50000 },
orderId:
LL-${generateRandomString()}, // 고유 주문번호
orderName: '토스 티셔츠 외 2건',
// successUrl: window.location.origin + "/payment/success", // 결제 요청이 성공하면 리다이렉트되는 URL
// failUrl: window.location.origin + "/fail", // 결제 요청이 실패하면 리다이렉트되는 URL
customerEmail: 'customer123@gmail.com',
customerName: '김토스',
// 가상계좌 안내, 퀵계좌이체 휴대폰 번호 자동 완성에 사용되는 값입니다. 필요하다면 주석을 해제해 주세요.
// customerMobilePhone: "01012341234",
card: { useEscrow: false, flowMode: 'DEFAULT', useCardPoint: false, useAppCardOnly: false },
}).then((result) => console.log(result)).catch((error) => console.error(error));
};
return (
<button type="button" className="button" onClick={request}>
결제하기
</button>
);결제창이 뜨긴하나요?
아니면 결제하기 누르면 바로 발생하나요?
현재 플로우는 결제창이 뜬 뒤 카카오뱅크 결제를 결제창에서 완료하면
http://localhost:5174/undefined <- [POST] 통신이 발생해서 페이지를 찾을수 없습니다 라는 오류가 출력됩니다.
카카오뱅크에서만 발생하나요?
토스 결제도 해당 플로우와 똑같이 발생합니다.
영상이랑 사용된 주문번호 제공해주시겠어요?
LL-MC43MzY4MTMzNjY0NzY0 주문번호입니다
모든 결제수단에서 위 현상이 발생하는거죠?
넵 맞습니다
혹시 이거 저희가 접근가능하도록 퍼블릭 서버에 올려주실수 있을까요?
뭔가 작성하신 코드와 저희 코드가 충돌 나는 것 같아요.
혹시 다른 브라우저에서도 동일한가요?
사파리도 동일합니다.
https://c630285868dc.ngrok-free.app/
이 !! 감사합니다 !! 해당 스크립트가 있는 파일인지 모르고 진행했습니다
정말 감사합니다!!
네 ㅎㅎ
react 같은데 페이플도 쓰신다면
페이플 쓰는 경우에만
동적으로 스크립트 로딩을 해주셔요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.