API 연동 관련 문의드립니다.
개발자 센터에있는 클라이언트키와 시크릿 키를 사용하여
프론트에서는 클라이언트 키로 위젯을 호출하였고 이후 시크릿키를 이용하여 백엔드로 연결을 시도하였으나
"결제 시간이 만료되어 결제 진행 데이터가 존재하지 않습니다 오류가 발생하고 있습니다..
또한 지금 하고있는 서비스의 노드버전이 10 버전입니다. 해당 토스sdk 를 다운로드 후 코딩없이 시작하기에 있는 리액트 결제 페이지를 그대로 복사하여 사용하였으나 샌드박스에있는 이미지와 다르게 동작하고있습니다. 낮은 버전의 노드를 사용할시 불러오는 결제요청페이지가 다를 수 있나요?
또한 지금 하고있는 서비스의 노드버전이 10 버전입니다. 해당 토스sdk 를 다운로드 후 코딩없이 시작하기에 있는 리액트 결제 페이지를 그대로 복사하여 사용하였으나 샌드박스에있는 이미지와 다르게 동작하고있습니다. 낮은 버전의 노드를 사용할시 불러오는 결제요청페이지가 다를 수 있나요?
71 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
MC4zODIzNTcwNjUxMjAy 주문번호
페이지코드는 코딩없이 시작하기와 동일한 코드입니다.
String result = rest.postForEntity(
"https://api.tosspayments.com/v1/payments/confirm" + paymentKey,
new HttpEntity<>(param, headers),
String.class
).getBody();
log.info("result"+result); 호출코드
/payments/confirmlqNRYD097kZLKGPx4M3MbpjeJyqRL7VBaWypv1o6bemnOJz2
path parameter 를 잘못 붙이셨어요
주문번호 새로 생성하시고
중간에 "/" 넣어주시길 바랍니다/payments/confirm 와lqNRYD097kZLKGPx4M3MbpjeJyqRL7VBaWypv1o6bemnOJz2 이사이에 "/" 를 넣으시라는 말씀이 맞으신가요?
paymentKey는 body에 들어가야 해요.
결제승인 API 사용방법 참고해주세요.
https://docs.tosspayments.com/reference#%EA%B2%B0%EC%A0%9C-%EC%8A%B9%EC%9D%B8
이런식으로 하셔야해요.
// param 객체 생성 및 초기화
Map<String, Object> param = new HashMap<>();
param.put("paymentKey", paymentKey); // paymentKey를 param에 추가
// API 호출
String result = rest.postForEntity(
"https://api.tosspayments.com/v1/payments/confirm",
new HttpEntity<>(param, headers),
String.class
).getBody();
아아 제가 다른사람꺼 보고 따라치다가.. 실수를 범했ㄴ에ㅛ
감사합니다
혹시 괜찮으시다면
윗줄에있던 노드버전이 낮아서다른 페이지가 뜨는 경우는 어떤 경우인가요 ㅠ ㅠ
도와주셔서 감사합니다
제가 안내를 잘못드렸는데 박수습님이 잘 수습해주셨네요 ㅎㅎ
npm 버전을 올려보고 다시 해보시겠어요?
노드버전이 낮아서 다른 페이지....
는 어떤의미인지 모르겠어요이미지 보시는 것처럼
샌드박스는
해당 신용카드를 선택하면 신용카드 결제 창이 바로 뜨는데
저의경우에는
이렇게 창이 뜨게됩니다
서비스가 오래되서 버전 자체를 올리면 서비스에 문제가 생길거라.. 못올리는 상태입니다 ㅠ
삼성카드 같은 카드사 페이지가 바로 뜨기를 원하시는 건가요?
네네
띄우신 내용이 달라서이고 환경과 무관해요
내용은 샌드박스에있는 내용과
동일하게 작성했습니다
😂
flowMode: 'DIRECT',
cardCompany: '현대',
파라메터를 이렇게 써주시면 됩니다.
샌드박스 코드를 보면
try {
/**
* 결제 요청
* @docs https://docs.tosspayments.com/reference/widget-sdk#requestpayment%EA%B2%B0%EC%A0%9C-%EC%A0%95%EB%B3%B4
*/
await paymentWidget?.requestPayment({
orderId: generateRandomString(),
orderName: "토스 티셔츠 외 2건",
customerName: "김토스",
customerEmail: "customer123@gmail.com",
successUrl: window.location.origin + "/sandbox/success" + window.location.search,
failUrl: window.location.origin + "/sandbox/fail" + window.location.search
});
여기에는 파라미터 코드가 들어가지가 않는데
다이렉트로 결제하기를 클릭시 넘어가는데
따로 넣어줘야한다는 말씀이신가요?
샘플에 표기되는 파라미터는 결제창 호출에 필요한 파라미터만 샘플로 넣어둔거에요.
파라미터 추가해서 창 호출 해보세요
그리고 지금보면
일반 결제창이 아니라 결제위젯 보고 있는건가요?
결제위젯은 위 파라미터 사용하지 않아도 됩니다
결제위젯 렌더는 성공 하셨나요?
네 결제 위젯 렌더에는 성공을 한상태이며 아래 콤보박스로
카드사를 선택후 결제 요청하기를 눌렀는데
이 위젯이 실행되어서
여쭤보고있었습니다.
가상결제 계좌를 클릭해도 첫번째 일반결제창이 발생하는데
파라미터를 넣어주지않아서 발생하는 오류라는 말씀이신가요?
결제위젯은 두번째 이미지로 보내주신, 프론트 사이드 div 에 렌더되는 결제위젯을 바탕으로, 결제수단을 선택해서 결제요청을 하게되면 첫번째 이미지 처럼 창이 뜨지 않아야 해요.
결제 위젯 - 신용*체크카드를 선택 했을때
카드사를 선택하도록 되어 있고
카드사를 선택해서 결제하기 버튼 (requestPayment 연결 해 놨겠죠?) 을 진행하면
해당 카드사 창이 바로 뜨게 되어 있어요
useEffect(() => {
(async () => {
const paymentWidget = await loadPaymentWidget("test_ck_DpexMgkW36PAPDjoj6xMrGbR5ozO", ANONYMOUS);
if (paymentWidgetRef.current == null) {
paymentWidgetRef.current = paymentWidget;
}
/
* 결제창을 렌더링합니다.
* @docs https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods%EC%84%A0%ED%83%9D%EC%9E%90-%EA%B2%B0%EC%A0%9C-%EA%B8%88%EC%95%A1
*/
const paymentMethodsWidget = paymentWidgetRef.current.renderPaymentMethods(
"#payment-method",
{ value: price },
{ variantKey: "DEFAULT" }
);
/
* 약관을 렌더링합니다.
* @docs https://docs.tosspayments.com/reference/widget-sdk#renderagreement%EC%84%A0%ED%83%9D%EC%9E%90-%EC%98%B5%EC%85%98
*/
agreementWidgetRef.current = paymentWidgetRef.current.renderAgreement('#agreement', { variantKey: 'DEFAULT' });
paymentMethodsWidgetRef.current = paymentMethodsWidget;
})();
}, []);
return (
<div className="wrapper w-100">
<div className="max-w-540 w-100">
<div id="payment-method" className="w-100" />
<div id="agreement" className="w-100" />
<div className="btn-wrapper w-100">
<button
className="btn primary w-100"
onClick={ () => {
const paymentWidget = paymentWidgetRef.current;
try { /** * 결제 요청 * @docs https://docs.tosspayments.com/reference/widget-sdk#requestpayment%EA%B2%B0%EC%A0%9C-%EC%A0%95%EB%B3%B4 */ paymentWidget?.requestPayment({ orderId: generateRandomString(), orderName: "토스 티셔츠 외 2건", customerName: "김토스", customerEmail: "customer123@gmail.com", successUrl: "http://localhost:3000/api/v1/payment/success", failUrl: window.location.origin + "/fail" }).then(res =>{ console.log("res"+JSON.stringify(res)); alert(JSON.stringify(res)); }); } catch (error) { // TODO: 에러 처리 } }} > 결제하기 </button> </div> </div> </div> ); } export default Paymentwiget;
try { /** * 결제 요청 * @docs https://docs.tosspayments.com/reference/widget-sdk#requestpayment%EA%B2%B0%EC%A0%9C-%EC%A0%95%EB%B3%B4 */ paymentWidget?.requestPayment({ orderId: generateRandomString(), orderName: "토스 티셔츠 외 2건", customerName: "김토스", customerEmail: "customer123@gmail.com", successUrl: "http://localhost:3000/api/v1/payment/success", failUrl: window.location.origin + "/fail" }).then(res =>{ console.log("res"+JSON.stringify(res)); alert(JSON.stringify(res)); }); } catch (error) { // TODO: 에러 처리 } }} > 결제하기 </button> </div> </div> </div> ); } export default Paymentwiget;
해당 전문코드입니다
실행하면 계속 일반결제창이 뜨는데 제 코드에 문제가있을까요?
말씀하신대로 결제 위젯 렌더창이 이 뜨고 결제 수단을 선택을 하면 계속해서 일반 결제창이 뜹니다
리엑트 인가요?
우선, 토스페이먼츠에서 제공하는 github 샘플들이 있어요
https://github.com/tosspayments/payment-widget-sample/tree/main
GitHub
GitHub - tosspayments/payment-widget-sample: 토스페이먼츠 결제위젯 샘플 앱입니다.
토스페이먼츠 결제위젯 샘플 앱입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.
이용하시는 프레임워크에 따라 확인 해보시면 좋을것 같고
샘플 보시고 연동하신 이후에도 동일하게 문제가 있으시면 말씀 부탁 드려요
+ 위젯키가 따로 있기 때문에 되도록 위젯 클라이언트키 사용해주세요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
https://codesandbox.io/p/devbox/payment-widget-react-sample-w7hrcz?file=%2Fsrc%2Fpages%2FCheckout.jsx%3A76%2C13 여기에있는 코드를 그대로 사용했는데
아직도 일반결제 창이 뜹니다.. 이유를 잘 모르겠어요
말씀하신대로 파라미터를 넣는것은 바로 간편결제랑 카드사결제로 연결되는것인데
해당 콤보박스에 내용이 변경될때마다 따로 파라미터를 넣어줘야하나요?
자, 지금 결제위젯 보고 있으신 거니까 파라미터는 잊어주세요
넵
npm tosspayments/payment-widget-sdk 정상적으로 패키지 설치 완료 되었나요?
네
clientKey, 위젯키로 변경해서도 시도 해볼 수 있을까요?
tosspayments.com 로그인해서, 개발자센터로 접속하면 위젯 클라이언트키 확인할 수 있어요
위젯 클라이언트키
이거 말씀하시는것 아닌가요?
토스페이먼츠와 계약 완료된 상태 이신가요?
계약이 완료된 상태는 아니구 심사중에 있는걸로
걸로 알고있습니다.
네, 그러면 지금은 개발연동 테스트 상점의 키를 이용하고 있으신 거네요
개발연동테스트 상점으로는, 결제위젯의 기능 이용이 정상적이지 않을 수 있어요.
계약 완료되면 MID 가 발급이 될 것이고
발급된 MID 로 별도 심사가 진행 될 거에요
계약 완료되어 발급된 MID 가 있는지 내부 확인 해보시겠어요?
이 MID 의 결제위젯 키로 진행 하시면, 저희가 설정 관련해서도 조금 더 자세히 설명 드릴 수 있어요
@리액트싫어 님 지금 발생하는 현상을 영상으로 찍어서 공유해주실수 있을까요?
그리고 혹시 페이지 로딩과 동시에 paymentWidget?.requestPayment({ 를 자동으로 호출하는건 아닌지 확인부탁드립니다.
방화벽때문에 영상제공이 넘어가질 않아서
보내드린 페이지 그대로
여기서 카드사 선택후 결제하기 버튼 클릭시
페이지가 이렇게 동작하고있습니다
혹시 페이지 로딩과 동시에 paymentWidget?.requestPayment({ 를 자동으로 호출하는건 아닌지 확인부탁드립니다. 말씀하신 이부분은
제가 사실 리액트 개발자가 아니라.. 받아서 하는 중이라 자동으로 바로 호출하는건지 여부 판단을 어떻게해야하는지가 어렵습니다..
샌드박스 코드 그대로 복사 하셨다고 하셨는데,
그대로 복사한 해당 코드를 스크린샷으로 찍어서 보여주시겠어요?
import 부분부터 loadPaymentWidget await, 렌더 셀렉터 설정 까지 전부 보이도록 이요
입니다. 감사합니다.
버튼 onclick 에 async 를 빼셨고, requestpayment 에 await 를 빼셨네요 다 넣고 해보세요.
동일한 현상이 발생합니다...
그러면 해당사이트를 저희가 혹시 접속해서 재현해 볼수 있을까요?
안녕하세요 기다려주셔서 감사합니다
여기들어가셔서 구독하기 클릭하시면 해당 결제 페이지가 나옵니다
지금 보면 해당 컴포넌트가 2개 있는것 같습니다
보시는 것처럼 patment-method, 결제 버튼 등이 2개에요.
1개만 사용해 주세요.
네네 버튼 두개인건 확인했는데 아래있는 버튼은 작동하고 있지않고있습니다 또한 버튼코드는 하나만 작성했는데 두개가 뜨고잇습니다..
아래버튼은 눌러도 작동하지않구요
위에있는 버튼을 클릭하면 일반요청위젯이 요청 되는 이유가 버튼이 두개여서인것같다는 말씀이실까요?
결제 instance 가 2개 렌더링이 되고 있습니다.
이중에 두번째 instance 가 overwrite 되는 거구요 그래서 결제하기를 누르면 일반 결제창이 뜨는 겁니다.
코드를 클린징해서 결제 위젯 인스턴스가 1개만 렌더링되게 해주셔야 합니다.
감사합니다 일단 버튼 랜더링 되는걸 하나로 만들어서 시도후에 안되면 다시 연락드리겠습니다. 늦게까지 도와주 셔서 감사합니다.
네 감사합니다.