Unexpected token 오류로 연동이 되지 않습니다.
두가지 질문을 드리겠습니다.
------------------------------------------------------------------------
파일구성
JS wd_module/pay/module.js
HTML wd_module/pay/index.html
성공시 /wd_module/pay/toss_ok.html
tosspayments-sample-main/php-javascript/public/payment/success.html 복사
실패시 /wd_module/pay/toss_no.html
tosspayments-sample-main/php-javascript/public/fail.html 복사
액션
결제버튼을 클릭하면 requestPayment 함수를 호출하고
결제 승인 결과에 따라 toss_ok.html, toss_no.html 로 받음
오류
결제를 실패했어요
에러메시지
Unexpected token '<', "<!DOCTYPE "... is not valid JSON
에러코드
undefined
------------------------------------------------------------------------
이와 같아서 Unexpected token 으로 검색
https://discord.com/channels/864296203746803753/1019841718318805064/threads/1327159920029864016
위 답변에서 index.php 에서 function confirmPayment 가 호출되는지 확인해 보세요. 라고 하는데
저는 index.php 를 아래와 같이 수정
case '/confirm/payment':
echo json_encode(["ok" => "confirmPayment call"]);
exit;
if ($requestMethod === 'POST') {
confirmPayment($encryptedApiSecretKey);
}
break;
그런후 테스트를 해보면 index.php 는 호출되고 있지 않는것 같습니다.
첫번째 질문입니다. 위 처리에서 어디가 문제인걸까요?
그리고 추가로 샘플의 index.php 는
실제 개발時에는 필요없는 부분이라고 보여집니다.
예를 들어 카드로 결제한다고 했을때
사용자가 결제버튼을 클릭하면
금액, 상품명, 이메일, 성명을 해당 결제건에 맞도록 requestPayment 함수에 반영하고
해당 함수는 toss 결제 API 를 호출하여 승인 처리를 하고
특별한 오류가 없다면 requestPayment.successUrl 로 실제 처리에 필요한 값들을 넘겨
requestPayment.successUrl 의 confirm 함수에서 처리된 승인 결과에 따라
아래의 then 과 catch 에서 사용자에 맞도록 처리하면 된다
confirm()
.then(function (data) {
// TODO: 결제 승인에 성공했을 경우 UI 처리 로직을 구현하세요.
document.getElementById("response").innerHTML =
<pre>${JSON.stringify(data, null, 4)}</pre>;
})
.catch((err) => {
// TODO: 결제 승인에 실패했을 경우 UI 처리 로직을 구현하세요.
window.location.href = /fail.html?message=${err.message}&code=${err.code};
});
두번째 질문입니다.
저는 토스 결제 흐름이 이렇다라고 이해하고 있는데 맞는것인지 궁금합니다14 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
confirm()
.then(function (data) {
// TODO: 결제 승인에 성공했을 경우 UI 처리 로직을 구현하세요.
document.getElementById("response").innerHTML =
<pre>${JSON.stringify(data, null, 4)}</pre>;
})
.catch((err) => {
console.error('err', err);
// TODO: 결제 승인에 실패했을 경우 UI 처리 로직을 구현하세요.
//window.location.href = https://blpharm.co.kr/wd_module/pay/toss_no.html?message=${err.message}&code=${err.code};
});
window.location.href 를 주석처리하고 캡처한 화면입니다.
success.html의 confirm() 부분을 보면 fetch("/confirm/payment", 가 있습니다.
이 부분이 index.php에서
case '/confirm/payment' 을 호출하게되며
실제 승인 API를 호출하게 되는 것입니다.
index.php에 루트에 설정되어 있어야 정상 동작할거에요.
우선 해당 문서의 README 파일대로 환경을 구성하고 먼저 테스트 해보세요.
https://github.com/tosspayments/tosspayments-sample/tree/main/php-javascript
GitHub
tosspayments-sample/php-javascript at main · tosspayments/tosspaym...
토스페이먼츠 결제연동 샘플 프로젝트입니다. Contribute to tosspayments/tosspayments-sample development by creating an account on GitHub.
똑같은 에러가 발생합니다.
confirm() 이 호출되는것은 alert 으로 확인했는데 .catch((err) 쪽으로 빠집니다,
confirm()이 호출만 되었지 제대로 동작을 안한거에요.
디버거에서 네트워크 탭 보시고 아래 부분이 정상 처리되었는지 확인해보세요.
const response = await fetch("/confirm/payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(requestData),
});
debugger;
const response = await fetch("/confirm/payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(requestData),
});
바로 .catch((err) 쪽으로 빠집니다
깃허브에서 가져온 샘플 소스를
로컬에서 테스트 해도 똑같습니다.
index.php 쪽으로 호출이 되지 않는것 같습니다
debugger;가 아니라
devtools에 network탭에보면
/confirm/payment가 호출되는 부분이 있어요
여기 응답을 봐주세요
답변 주신분들 모두 감사합니다. 여전히 index 페이지 호출을 못하는것 같습니다.
GitHub
tosspayments-sample-v1/payment/payment-window/php/success.php at ma...
토스페이먼츠 SDK v1 샘플 프로젝트입니다. . Contribute to tosspayments/tosspayments-sample-v1 development by creating an account on GitHub.
이거로 success.php를 만들고
fetch에 들어가는 url을 success.php로 수정해 보시겠어요?
v2는 라우터 개념을 사용하기에, 일부 php설정에서는 index.php로 라우팅되는걸 지원하지 않아서
404를 뱉을거에요
JS 호출부 외에는 v1과 v2가 동일하니, v1샘플 참고해서 php 코딩을 하셔요
아... 감사합니다
말씀하신 부분이 문제였나 봅니다.
정말 감사드립니다. 👍 💯
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.