결제위젯 연동 키 오류
상점 선택 > 결제위젯 연동 키 > 클라이언트 키 로 결제 모듈 호출 시 400(Bad Request) 오류 발생하고 있습니다. 페이로드 같이 첨부드리니 원인을 알려주시면 좋을 것 같습니다.
(혹시 몰라서 clientKey, Authorization 는 * 처리했습니다. 원인 파악이 필요하시면 전체 내용 전달드리겠습니다.)
amount: 100
clientKey: test_gck_*****************************
isMobile: false
isPromise: false
Authorization: Basic ********************************
paymentParameter: {"amount":100,"orderId":"20240715_11395SHORT_28103_6820","orderName":"테스트 결제","customerName":"김토스","successUrl":"https://gogohome.grimsys.com/reserv-complete?orderId=20240715_11395SHORT_28103_6820","failUrl":"https://gogohome.grimsys.com/resver-payment?id=28103&affiliateBranchSerial=1395&startDate=2024-07-16%2016:00:00&endDate=2024-07-17%2016:00:00&isFail=1","methodType":"CARD"}38 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
혹시 브라우저 콘솔에는 에러가 없으신가요?
콘솔에 나타난 오류 내용은
data
:
{result: false, referer: "https://gogohome.grimsys.com/", sessionCreationApiVersion: null}
referer
:
"https://gogohome.grimsys.com/"
result
:
false
sessionCreationApiVersion
:
null
error
:
{code: "COMMON_ERROR", message: "처리 중 오류가 발생했습니다", data: null}
code
:
"COMMON_ERROR"
data
:
null
message
:
"처리 중 오류가 발생했습니다"
result
:
"ERROR"
입니다...!사용하시는 MID 를 알수 있을까요?
그리고 variantkey 는 어떻게 보내주셨을까요?
MID는 jwokok35wo 입니다. variantkey는 혹시 어디서 확인할 수 있는 값일까요 ?
테스트하신 front 화면 script에 variantKey 로 검색하면 보일거에요.
혹은 저희가 테스트해볼 수 있는 주소(url)이 있다면 아래 전달부탁드려요.
💡 정보 제출
민감 정보를 안전하게 제출해주세요
정보 제출 폼으로 url 전달드렸습니다
variantKey는 주석 처리되어있고, 적용된 것은 없는 것 같습니다
그럼 실제 코드에서 renderpaymentmethods 느ㄴ 어떻게 호춠하시는지 코드 공유 부탁드릴께요.
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
const customerKey = '20240715_1' + carInfo.affiliateBranchIdx +'SHORT_' + carInfo.carIdx + '_' + Math.floor(Math.random() * 10000); // 내 상점에서 고객을 구분하기 위해 발급한 고객의 고유 ID
const clientKey = 'test_gck_jExPeJWYVQ4N6AJJg0Zp349R5gvN' // 클라이언트 키
var tossPayments = TossPayments(clientKey)
tossPayments
.requestPayment('카드', {
amount: 100, // 결제 금액
orderId: customerKey, // 주문번호(주문번호는 상점에서 직접 만들어주세요.)
orderName: '테스트 결제', // 구매상품
customerName: '김토스', // 구매자 이름
successUrl: window.location.origin + '/reserv-complete?orderId=' + customerKey, // 결제 성공 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
failUrl: window.location.origin + '/resver-payment?id=28103&affiliateBranchSerial=1395&startDate=2024-07-16%2016:00:00&endDate=2024-07-17%2016:00:00&isFail=1', // 결제 실패 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
})
.catch(function (error) {
if (error.code === 'USER_CANCEL') {
// 결제 고객이 결제창을 닫았을 때 에러 처리
} else if (error.code === 'INVALID_CARD_COMPANY') {
// 유효하지 않은 카드 코드에 대한 에러 처리
}
})
}
토스이먼츠 결제창 연동작업 담당자가 아니어서, 크롬 개발자도구의 Sources 탭에서 우선 추출해 전달드립니다.
renderpaymentmethods 함수는 호출하지 않는것으로 보입니다renderpaymentmethods 이걸 호출안하시면 결제위젯이 안보이실텐데요.
아.. 지금 보면 일반 결제창을 연동하신거네요.
그러면 상점 관리자 상에 API 연동키에 있는 clientkey 르ㄹ 사용해 주세요
1. 일반 결제창을 연동했다는건, 결제 위젯이 아니라 UI 커스텀한 결제 창을 호출한다는 말씀이실까요 ?
2. 1번이 맞다면, 일반 결제창 호출은 API 개별 연동키 를 사용해야하고, 결제위젯을 연동했을 때에는 결제 위젯 연동키 를 사용해야 하는걸까요 ?
네 맞습니다. 일반결제창은 저희가 제공하는 기본 결제창을 말합니다.
일반 결제창이 기본 결제창인가요 ? 그럼 일반결제창 호출로 하면 저희가 UI 커스텀한것도 사용가능하고, 기본 제공되는 것도 사용 가능한걸까요 ?
상기 이미지에서 일반 결제창이 우측에 있는걸 의미하는게 맞나용 ?
네 일반 결제창은 우측에 있는 겁니다.
커스텀 하시려면 결제위젯 사용해 주셔야 하는데, 지금 연동 코드는 결제위젯 연동하신게 아니에요.
아하 반대로 사용하고 있었던 것 같습니다... 우선 해당 작업자에게 전달 후 추가 문의 있으면 다시 문의드리겠습니다.
자세한 답변 감사드립니다 !
네 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
안녕하세요 !
결제모듈 관련 질문이, 기존 문의에 이어서 질문 드립니다.
구현중인 서비스에서 일반 결제(카드,계좌이체 등)와 빌링 결제 기능도 필요한데요, 일반결제는 보내드린 이미지의 좌측 결제위젯을 호출하고 빌링결제는 보내드린 이미지의 우측 일반 결제창 을 호출 해야하는게 맞을까요 ?
빌링은 두가지 구현 방법이 있습니다.
1) 결제창 2) 가맹점 직접 구현
시작하기 | 토스페이먼츠 개발자센터
토스페이먼츠 결제 연동하는 클라이언트, 서버 개발자가 꼭 읽어야할 문서를 추천해드려요. 빠르게 개발을 시작해보세요.
1. 말씀하신 1) 결제창 은 결제위젯이 아닌 일반 결제창인가요 ?
2. 빌링은 등록된 카드를 선택해서 결제를 진행해야하는 것으로 알 고 있어서, 등록된 카드를 선택하는 UI를 저희가 구현해야하는 것으로 알고 있는데, 이전 답변을 보면 UI를 커스텀하려면 결제위젯을 사용해야 한다고 하셨습니다. 일반 결제창이 아니라 결제 위젯이 맞나요 ?
3. 일반 결제(카드,계좌이체 등)와 빌링 결제 기능 모두 구현해야 한다면, 일반결제를 할 때는 결제 위젯을 호출하고 빌링을 해야할 때는 일반결제창을 호출해야되는걸까요 ? 아니면 일반결제창을 사용하면 모두 커버 가능한가요?
1) 네, 일반결제는 좌측 결제위젯을 호출하고 빌링결제는 우측 일반 결제창 을 호출 맞습니다.
결제창이 일반결제창 입니다.
2) 빌링은 "정기구독형" 결제에서, 결제가 필요한 시점에 결제를 하도록 결제 빌링키를 제공하는 방식 입니다. 빌링 연동 수단으로 "등록된 카드를 선택해서 결제를 진행하는 UI" 구성등으로 연동 하실 수 없습니다. (카드사 심사 불가) 이러한 방식을 이용하고 싶으시면, "브랜드페이"를 살펴 보세요.
3) 일반 결제창을 사용하면 모두 커버 가능 합니다.
1. 다른 서비스 참고해보니 간편카드 결제인 것 같은데 맞나요?
"정기구독형" 결제에서 첫 회차는 즉시 결제가 되어야하는 부분이라 빌링결제가 아니고, 그 이후 정기적으로 결제 될때 빌링키로 결제요청을 하는 것 아닌가요? 굳이 브랜드페이를 써야하는건가요...?
2. 첨부드리는 이미지처럼 카드를 등록하고, 그 카드로 결제를 하려면 결제위젯을 호출해야하는지 일반결제창을 호출해야하는지 를 질문드린게 2번 질문이었습니다.
빌링을 어떻게 쓰는지 명확하게 설명이 없으시고, "UI구성" 이라고 하셔서 답변 드린 내용인데요.
빌링을 어떻게 사용하시려고 하시나요?
빌링은 아래 두가지 순서로 진행 합니다.
1. 빌링키 발급 2. 발급된 빌링키로 결제
1. 빌링키 발급단계에서 빌링키 발급을 완료 하면
2. 발급된 빌링키로 결제는 API 로 진행 하게 되고요,
이 단계에서 어떤 상황을 UI 로 구성한다고 생각하시는지 모르겠어요.
2번째 이미지는 어디에서 구현한건지는 모르겠지만,
이런 방식으로 "빌링" 제품을 이용하실 수 없다고 가이드 드린 내용 입니다
필요한부분만 문의드릴려고 하다보니 질문이 부족했던 것 같습니다. 구현하고자하는 결제 프로세스는 아래와 같습니다.
1. 카드, 계좌이체 등의 일반 결제
단건으로 즉시 결제되는 서비스
2. 카드를 등록하여 정기 결제
예를들어 6개월 정기결제를 하고자 한다면, 첫 1개월치는 즉시 결제, 2개월차 부터 정기결제 실행(카드등록시 발급받은 빌링키로 빌링 결제)
즉 2번에서 첫달치는 즉시 결제하고, 2~6개월차는 매달 빌링결제를 하려고 합니다.
첨부드린 이미지에서는, 결제수단을 등록하고 결제하기를 누르면, 말씀드린 것 처럼 첫달 요금은 즉시 결제가되고 나머지는 매달 정기결제가 실행됩니다. 제가 아는 보통의 정기구독형 서비스는 이렇게 결제가 되는 것으로 알고 있습니다. 정기구독형 서비스가 보통은 첫 결제는 즉시되고, 다음 결제부터 정기결제가 이루어 지니까요.
2회차 결제부터 시작되는 빌링 결제는 당연히 발급받은 빌링키로 서버단에서 api 호출하는 스케줄링 작업으로 실행할 예정입니다.
저희가 토스페이먼츠 연동하면서 계속 이해가 안가는 부분은 어떻게 결제창을 호출해야되는가 하는 부분입니다.
정리하면,
신용/체크 카드, 계좌이체, 카카오페이, 네이버 페이 등의 결제
와
첨부드린 이미지와 같이 결제 수단 등록하는 UI를 추가해서 등록 후 바로 결제
를 하기위해 결제위젯과 일반 결제창 중에 어떤 것을 호출해야 하는지가 궁금합니다.
설명 부족한 부분 있다면 알려주시기바랍니다.
하나씩 답변드릴게요
1. 카드, 계좌이체 등의 일반결제
단건으로 즉시 결제되는 서비스
이 내용은 위젯을 쓰셔도 되고 각 결제수단별 결제창을 연동하셔도 됩니다.
아래링크는 위젯이 아닌 결제창 연동가이드에요
https://docs.tosspayments.com/guides/payment/integration
이 부분은 이미 이해하고 계신거같지만 상호 이해가 확실한지 확인하기위해 안내드리는거구요
토스페이먼츠 결제창 연동하기 | 토스페이먼츠 개발자센터
카드 결제창을 연동해보세요.
2. 카드를 등록하여 정기 결제
이 내용은 "빌링키 발급" 이라는 단계를 "카드등록" 과 같은 버튼으로 실행해주시면 됩니다. 관련 가이드는 아래입니다.
https://docs.tosspayments.com/guides/billing/integration
이 부분도 이해하고 계실것으로 생각됩니다.
자동결제(빌링) 결제창 연동하기 | 토스페이먼츠 개발자센터
자동결제는 다른 이름으로 빌링, 또는 정기결제로 불리는 결제 방식입니다. 카드 등록창에서 고객의 카드를 한 번만 등록하고 나면, 별도의 고객 인증 없이 간편하게 결제를 요청할 수 있습니다.
결제수단을 등록 -- 이 내용은 카드 빌링결제만 해당되는 것입니다.
다른 간편결제나 계좌 등은 등록해서 사용하는 형태가 아닙니다.(브랜드페이 계좌결제는 등록사용 가능하지만 현재 추가 가입을 안받고 있어요)
그래서 고객이 "주기적으로 승인이 발생하는 결제수단을 등록" 한다는 씬은 당사의 빌링결제를 연결해주시면 됩니다
첨부드린 이미지에서는, 결제수단을 등록하고 결제하기를 누르면, 말씀드린 것 처럼 첫달 요금은 즉시 결제가되고 나머지는 매달 정기결제가 실행됩니다. 제가 아는 보통의 정기구독형 서비스는 이렇게 결제가 되는 것으로 알고 있습니다. 정기구독형 서비스가 보통은 첫 결제는 즉시되고, 다음 결제부터 정기결제가 이루어 지니까요.
맞게 구현하신 것으로 생각됩니다.
사실 가맹점의 결제씬이 워낙 다양하다보니 저희쪽에서 맞다 틀리다 알려드리기가 어려운 부분이 있습니다.
저희쪽에서 권장하는 사항을 만족하면서 원하는 방식으로 결제가 잘 된다면 그 상태가 잘 구현하신것으로 봐주시면 됩니다.
정기적으로 결제를 발생시키는 빌링결제 서비스는
현재 상태에서는 오직 "카드" 결제수단만 있음을 아시면 될거같습니다.저희쪽에서 권장하는 사항을 만족하면서 원하는 방식으로 결제가 잘 된다면 그 상태가 잘 구현하신것으로 봐주시면 됩니다.
이 말씀으로 짐작해보면, 결제위젯을 호출하고 그안에 직접 UI을 구현해서 카드등록 (API 개별연동키를 사용하는 카드등록 창 호출)및 등록된 카드를 보여주는 UI 까지 구성하는 혼합방식(?) 도 가능할 수 있다는 말씀으로 받아들여도 될까요 ?
보여드리는 이미지처럼 등록한 카드는 빌링결제 뿐만 아니라 간편카드결제에서도 사용가능한 것 같은데, 간편카드 결제를 선택했을 때 등록된 카드를 보여주는거나 등록된 카드로 결제 요청을 하는 방식은 정해진 방법이 있는게 아니라 저희가 되는 방법을 찾아서 구현하면 되는걸까요?
음.... 왠지 저희와 이야기를 많이 나누셔야 할거같습니다
우선 빌링과 일반카드 인증결제의 차이점은 알고 계신거죠?
일반 카드 인증결제는 카드사가 제공하는 "인증 중계 페이지" 를 거쳐서 진행됩니다.
이 경우 해당 세션이 생성된 1회성 인증 데이터로 1회성 승인요청만 가능합니다.
앱카드 인증결과 데이터가 여러번 사용목적으로 생성되지 않게 되어있어요
그리고 토스페이먼츠에서 서비스되는 거의 대부분의 결제방식은 인증, 승인 두가지 영역으로 나뉘어져 서비스 됩니다.
생각하고 계신 위젯으로 화면구성 --> 이 부분은 UI 상에서 보여지는 내용인것이고 frontend 에서 어떤 결제(어떤 인증)를 할 것인지를 결정짓습니다
당연히 승인도 해당 인증방식에 맞게 보내셔서 최종 결제가 완료됩니다
그래서.. 위젯을 구성하실때
은 frontend 만 생각하신다면 맞는 내용입니다.
이후 등록된 카드를 디스플레이 해주시고 고객이 등록된 카드를 선택하여 최종 결제하기 버튼을 눌렀을때 backend 로 승인요청을 하는것을 구현해주셔야해요
등록한 카드라 함은 빌링결제를 위해 빌링키를 발급받을 때 사용된 카드 입니다.
빌링결제는 비인증 결제이고 등록시에만 고객이 입력하는 UI가 있고 실제 승인시에는 backend 로 승인요청만 보내주시면 되기때문에
앱이 켜지거나 앱을 깨우기위한 최소한의 정보입력 UI가 필수로 들어가는 간편결제와는 연결고리가 없습니다.
나중에는 토스페이, 카카오페이, 네이버페이 등 간편결제로 인증을 하고 빌링키를 발급받는 서비스가 생길지도 모르겠으나
지금은 아닙니다.
보내드린 이미지에서는 토스페이먼츠 모듈에서 등록한 카드를 간편카드결제 탭에서 보여주고, 결제하기버튼을 통해 바로 결제까지 이루어집니다. 카드사의 인증 중계 페이지로 이동없이 바로 결제 완료 페이지로 이동 하기때문에, 등록된 카드를 이용해서 간편카드결제가 되는거라고 생각했는데, 어느지점에서부턴가 싱크가 안맞는 것 같네요...
가이드 참고해서 연동 구현을 해보고 다시 문의하도록 하겠습니다.
저 이미지는 어디에서 확인하신 이미지 인가요
토스페이먼츠 결제위젯 모듈에, 해당 이미지 출처 가맹점에서 임의로 아래에 본인들의 로직 및 UI 를 추가 한 것으로 보입니다.
https://carmore.kr 회원 가입 후 단기렌트 결제 시 화면 입니다. 자체적으로 구현한 것 같아보입니다.
카모아 - 국내도 해외도 렌트카는 카모아ㅣ제주렌트카/일본렌트카/괌렌트카
제주렌트카부터 서울/경기, 괌/사이판, 일본 등 글로벌 렌트카 실시간 예약 서비스 1등 카모아!
다른 가맹점에서 자체적으로 구현한 부분은 저희가 가이드 드릴 수 없습니다.
삼부장님 가이드 내용 참고 부탁 드립니다.
네네 어디서 확인했는지 물어보셔서 알려드린거에요.
가이드 참고해서 진행해보고 추가 문의사항 있으면 다시 문의드리겠습니다. 감사합니다 !