김지운
김지운2y ago

성공리다이렉트 url 이동 후 500에러 반환 문제.

안녕하세요. react와 typescript를 이용해서 결제 기능을 구현하고 있습니다.
const tossPay = async () => {
const paymentWidget = await loadPaymentWidget(
tossConfig.clientKey,
tossConfig.customerKey
);
paymentWidget.renderPaymentMethods(
"#payment-method",
calculateTotalPrice()
);

paymentWidget.requestPayment({
orderId: "",
orderName: "",
successUrl: "https://localhost:3000/success",
failUrl: "https://localhost:3000/fail",
customerEmail: userEmail,
customerName: userName,
});
};
const tossPay = async () => {
const paymentWidget = await loadPaymentWidget(
tossConfig.clientKey,
tossConfig.customerKey
);
paymentWidget.renderPaymentMethods(
"#payment-method",
calculateTotalPrice()
);

paymentWidget.requestPayment({
orderId: "",
orderName: "",
successUrl: "https://localhost:3000/success",
failUrl: "https://localhost:3000/fail",
customerEmail: userEmail,
customerName: userName,
});
};
결제하기 버튼은 위와 같이 연동했고.
export const SuccessPage = () => {
const confirmPayments = async () => {
const url = "https://api.tosspayments.com/v1/payments/confirm";
const requestOptions = {
method: "POST",
headers: {
Authorization: `Basic test_sk_~~~`,
"Content-Type": "application/json",
},
body: JSON.stringify({
paymentKey: paymentKey,
amount: amount,
orderId: orderId,
}),
};
const response = await fetch(url, requestOptions);
if (!response.ok) {
throw new Error("결제 승인 API 호출 실패");
}
const responseJson = await response.json();
console.log(responseJson);
};
confirmPayments().catch((error: any) => {
console.log(error.message);
});
return <div></div>;
};
export const SuccessPage = () => {
const confirmPayments = async () => {
const url = "https://api.tosspayments.com/v1/payments/confirm";
const requestOptions = {
method: "POST",
headers: {
Authorization: `Basic test_sk_~~~`,
"Content-Type": "application/json",
},
body: JSON.stringify({
paymentKey: paymentKey,
amount: amount,
orderId: orderId,
}),
};
const response = await fetch(url, requestOptions);
if (!response.ok) {
throw new Error("결제 승인 API 호출 실패");
}
const responseJson = await response.json();
console.log(responseJson);
};
confirmPayments().catch((error: any) => {
console.log(error.message);
});
return <div></div>;
};
성공페이지('/success')는 위와 같이 구현했습니다. 테스트 방식은 결제하기 버튼을 눌러, 결제창이 뜨면, 제 토스페이 계정으로 결제를 진행했습니다. 하지만, 성공리다이렉트 페이지에서 콘솔에 Failed to load resource: the server responded with a status of 500 () 이 에러가 발생했으며, {"code":"UNAUTHORIZED_KEY","message":"인증되지 않은 시크릿 키 혹은 클라이언트 키 입니다.","data":null} 에러 내용에는 이와 같은 내용이 포함되어 있었습니다. 500에러를 반환했기 때문에 시크릿 키와 클라이언트 키 문제라고 생각하지는 않았는데요. 개발자 센터에서 테스트 키를 거듭해서 확인하고 삽입했는데도, 계속 같은 에러를 반환합니다. 이런 오류를 어떻게 해결해야 할까요?
19 Replies
토스페이먼츠 BOT
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) : - 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.
이실장
이실장2y ago
사용하신 주문번호 남겨주시겠어요?
김지운
김지운OP2y ago
AD8aZDpbzXs4EQa-UkIX6 여깄습니다!
이실장
이실장2y ago
위주문번호로는 아래 에러 받지 않으셨나요? [S016] 토스페이먼츠 모듈이 기동되어 있지 않거나, 네트웍문제로 통신이 불가능합니다. 웹전송인 경우는 note_url 또는 LGD_NOTEURL 값이 없습니다.
김지운
김지운OP2y ago
엇.. 해당 에러를 어디서 확인할 수 있나요? 전 테스트 결제내역에서 만료된것과 콘솔에러만 확인했습니다...
이실장
이실장2y ago
successUrl: "https://localhost:3000/success", 이 접근 불가능 한 곳 같습니다. 이동을 못했으니 에러도 못받으신 것 같고요
김지운
김지운OP2y ago
https 문제인지, SSO 문제인지 한번 원인을 찾아 해결을 시도해보겠습니다. 답변 감사합니다!!🤔 혹시 OpenSSL같은 자체 서명 인증서는 토스페이먼츠를 테스트 할 수 없는 개발환경인가요?
Ayaan이안
Ayaan이안2y ago
컴퓨터에 인증서 신뢰설정이 되어있다면 상관없습니다. 코드에 시크릿키가 encode되지 않았습니다! base64로 encode하고 시도해 주셔야 하는거로 압닏. @김지운 @이실장
Ayaan이안
Ayaan이안2y ago
No description
today.lastday
today.lastday2y ago
https://docs.tosspayments.com/reference/using-api/authorization 해당 내용 같이 확인하시면 됩니다.
인증 | 토스페이먼츠 개발자센터
토스페이먼츠 API 사용에 필요한 인증 방식을 알아봅니다.
김지운
김지운OP2y ago
답변 감사합니다. 시크릿 키를 인코딩한 값으로 수정한 후에는 결제내역에 결제상태 : 중단 으로 뜹니다. 콘솔 500 에러는 여전히 발생합니다. 제가 테스트환경에서 이해하는 결제 과정은 결제 하기 버튼 -> 결제 창 열기 -> 결제 위젯을 통한 결제 생성 -> successURL 이동 -> redirectURL 에서 getParam을 통해 paymentKey, orderId, amount 추출 -> 결제 승인 API 호출 -> 결제 성공 입니다. 혹시나 제가 잘못 이해하고 있는걸까요...? 결제 승인 API가 계속 호출 실패입니다. 테스트 동영상을 첨부합니다.
이실장
이실장2y ago
방화벽 설정 | 토스페이먼츠 개발자센터
토스페이먼츠 API를 안전하게 사용할 수 있는 방화벽 설정을 알아봅니다.
이실장
이실장2y ago
방화벽 한번 확인해주시구요! 더불어, orderId도 공유해주시면 확인도와드릴게요
김지운
김지운OP2y ago
AD8aZDpbzXs4EQa-UkIX6 여깄습니다!! 방화벽 확인해보겠습니다 ㅠㅠ
이실장
이실장2y ago
일단 위주문번호는 이미 사용된 주문번호로 나타나니! 테스트시 주문번호부터 새로운 것으로 다시진행 요청드려요
김지운
김지운OP2y ago
orderId 변경후 정상 응답 받았습니다.ㅠㅠ 제 문제의 원인은 1. 인코딩되지 않은 시크릿 키 2. 이미 사용된 주문번호 이 두 개였네요 친절한 답변 감사합니다. 토스페이먼츠 API 사용으로 더 좋은 프로젝트 결과물을 만들 수 있을 것 같네요. 감사합니다!!
토스페이먼츠 BOT
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
Ayaan이안
Ayaan이안2y ago
지금 소스를 보니 클라이언트 단에서 승인api를 부르시는 것 같아요. 이 경우 키가 노출되어 결제를 마음껏 생성 및 취소 할 수 있는 이슈가 발생하므로 백엔드에서 요청해 주셔야 합니다 @김지운
김지운
김지운OP2y ago
넵! 다시 수정해보겠습니다

Did you find this page helpful?