결제창 연동
해외 카드결제〉키인 결제
연동하기
키인 결제는 해외 고객에게 익숙한 카드 정보 입력 방식의 간편한 비인증 결제입니다.
연동 흐름
1. 파트너 인증 요청
Server1.1 인증을 위한 토큰 발급
계약 완료 후 페이플 결제창 호출 전 필수적인 인증 절차로, 이 과정에서 필요한 토큰을 발급받는 과정입니다.
매 결제 시 인증이 필요하며, 이때 발급된 토큰은 10분간 유효합니다.
1.2 service_key 확인
계약 완료 후 페이플 담당자에게 전달받은 service_key를 확인해주세요.
·주의사항
service_key 외부에 노출되면 안되는 정보입니다. 보안에 유의해주세요.
1.3 요청 예시
Header 설정 후 API를 요청해주세요.
1Content-Type: application/json
2Cache-Control: no-cache
3Referer: https://your-domain.com1{
2 "service_id": "demo",
3 "service_key": "abcd1234567890",
4 "code": "as12345678"
5}·주의사항
code는 파트너 인증에 필요한 토큰을 확인하는 용도로 사용되며, 파트너(상점)가 직접 생성하여 전송해야 하는 중요한 요소입니다.
영문+숫자 조합 10자리로 구성되어야 합니다.
2. 결제창 호출
Client2.1 스크립트 태그
서버 환경에 따라 아래 스크립트를 태그해주세요.
1<!-- 테스트 -->
2<script src="https://demo-gpay.payple.kr/common/js/gpay-1.0.1.js"></script>1<!-- 라이브 -->
2<script src="https://gpay.payple.kr/common/js/gpay-1.0.1.js"></script>2.2 결제하기 버튼 이벤트
버튼 이벤트에는 파트너 인증을 위한 토큰인Authorization 결제요청에 필요한
필수 파라미터들, 인증 결과를 수신하는resultUrl그리고 결제창을 호출하는
paypleGpayPaymentRequest()가 포함됩니다.
2.3 결제창 호출
paypleGpayPaymentRequest(obj) 함수 호출 시 결제창이 띄워집니다.
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="UTF-8">
5 <script src="https://demo-gpay.payple.kr/common/js/gpay-1.0.1.js"></script>
6 </head>
7 <body>
8 <!-- 주문서 내 결제하기 버튼 -->
9 <button id="btnPayment">결제하기</button>
10 <script>
11 $('#btnPayment').on('click', function (event) {
12 let obj = {};
13 obj.Authorization = "eyJhbGciOiJzaGEyNT..."
14 obj.service_id = "test";
15 obj.comments = "테스트 상품";
16 obj.totalAmount = "0.10";
17 obj.currency = "USD";
18 obj.resultUrl = "/result";
19 // 테스트 서버로 결제요청 시에만 필요합니다.
20 obj.payCls = "demo";
21 paypleGpayPaymentRequest(obj);
22 });
23 </script>
24 </body>
25</html>3. 결제결과 수신
Client결제 정보가 성공적으로 입력된 경우, 인증 결과는 POST 방식으로resultUrl로 전송됩니다.
웹훅(Webhook)이 등록되었으면 등록한 웹훅 URL 로도 결과가 수신됩니다.