1. 결제창 연동 카드사 심사 통과를 위한 작업
서버 작업 등 결제 연동을 제대로 완료하기 이전에도 다음 코드를 활용하여 카드사 심사의 “결제창 연동” 과정을 통과할 수 있습니다.
코드를 활용하여 빠르게 카드사 심사를 먼저 통과하고 나머지 결제 연동을 진행해보세요.
<head>
<title>결제하기</title>
<!-- TODO: 토스페이먼츠 결제 스크립트를 추가해주세요 -->
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
</head>
<body>
<script>
<!-- TODO: 카드사 심사 시에는 아래 clientKey를 이용하셔도 되나 실제 연동 시에는 개발자 센터에서 발급 받은 key를 이용해주세요. -->
const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq';
const customerKey = Math.random().toString(16).substring(7);
const paymentWidget = PaymentWidget(clientKey, customerKey);
window.addEventListener('DOMContentLoaded', function (event) {
<!-- TODO: 두 번째 파라미터인 amount의 값을 실제 상품의 가격으로 바꿔주세요 -->
paymentWidget.renderPaymentMethods('#paymentMethods', 50000)
<!-- TODO: #paymentButton을 직접 만드신 주문서의 DOM 선택자로 바꿔주세요 -->
document.querySelector('#paymentButton').addEventListener('click', () => {
paymentWidget.requestPayment({
orderId: Math.random().toString(16).substring(7),
orderName: '토스 티셔츠 외 2건',
successUrl: 'http://localhost:8080/success',
failUrl: 'http://localhost:8080/fail',
customerEmail: 'customer123@gmail.com',
customerName: '김토스'
})
})
});
</script>
<!-- TODO: 결제수단이 보여지는 영역입니다. 직접 만드신 주문서의 DOM으로 바꿔주세요 -->
<div id="paymentMethods"></div>
<!-- TODO: 결제 버튼입니다. 직접 만드신 주문서의 DOM으로 바꿔주세요 -->
<button id="paymentButton">결제</button>
</body>
HTML
복사
위 코드로 연동하신 경우 아래와 같은 결제창이 나타납니다. 특정 카드사를 선택하여 [결제] 버튼을 누르면 해당 카드사로 결제를 진행할 수 있습니다. 테스트키이기 때문에 실제 결제가 일어나지는 않습니다.
2. 실제 연동
1.
개발자 센터에 접속하여 API 키를 확인해주세요.
2.
안녕하세요!
카드사 심사 과정 중 “결제창 연동” 과정을 좀 더 빠르게 진행할 수 있도록 다음과 같이 온보딩 안내를 변경해볼까 하는데 우려되는 지점 있으실지 검토 부탁드립니다 :pray2:
배경
카드사 심사 중 “결제창 연동” 확인 과정에서는 실제 결제가 일어나는지 확인을 하지 않기 때문에 앞에 결제창으로 카드사 창과 금액만 잘 뜨도록 하면 됩니다. 카드사 창과 결제 금액만 뜨게하는건 굉장히 간단한 코드로도 가능하기 때문에 샘플 코드만 있으면 5분만에도 가능합니다. 하지만 지금 가이드에서는 결제 연동을 하고 오라고 명시되어있어서 개발자와의 소통 등 며칠이 소요될 수 있습니다.
또한 연동이 더 간편한 결제위젯의 이용율을 더 늘리기 위해 카드사 심사 과정에서 결제위젯의 연동 코드를 복사 붙여넣기하여 사용할 수 있게하려고 합니다.
변경사항
1.
신청서 접수 완료 > 심사 체크리스트 > 신용카드 결제창 연동
변경 전
•
'내 상점'에서 결제창 연동을 위한 ‘개발 정보’를 확인할 수 있어요.
•
‘개발 정보’에서 테스트 API키를 발급받고 신용카드 결제창 연동을 완료하세요.
변경 후
•
연동 가이드를 통해 5분만에 카드사 심사를 통과할 수 있는 결제창을 연동해보세요.
2.
3.
독립몰 계약과정 FAQ > 5. (테스트) 결제창은 어떻게 연동하나요?
변경 전
테스트 클라이언트 키 확인방법…
~~기술 내용
변경 후
•
연동 가이드를 통해 5분만에 카드사 심사를 통과할 수 있는 결제창을 연동해보세요.
~~기술 내용