결제창 연동

해외 카드결제〉키인 결제

연동하기

키인 결제는 해외 고객에게 익숙한 카드 정보 입력 방식의 간편한 비인증 결제입니다.

연동흐름

1. 파트너 인증 요청

server

파라미터 확인 →

1.1 인증을 위한 토큰 발급

계약 완료 후 페이플 결제창 호출 전 필수적인 인증 절차로, 이 과정에서 필요한 토큰을 발급받는 과정입니다.
매 결제 시 인증이 필요하며, 이때 발급된 토큰은 10분간 유효합니다.

1.2 service_key 확인

계약 완료 후 페이플 담당자에게 전달받은 service_key를 확인해주세요.

·주의사항

service_key 외부에 노출되면 안되는 정보입니다. 보안에 유의해주세요.

1.3 요청 예시

Header 설정 후 API를 요청해주세요.

POSThttps://demo-api.payple.kr/gpay/oauth/1.0/token테스트 환경

POSThttps://api.payple.kr/gpay/oauth/1.0/token라이브 환경

2. 결제창 호출

client

파라미터 확인 →

2.1 스크립트 태그

서버 환경에 따라 아래 스크립트를 태그해주세요.

Demo 스크립트

HTML

<!-- 테스트 -->
<script src="https://demo-gpay.payple.kr/common/js/gpay-1.0.1.js"></script>

Live 스크립트

HTML

<!-- 라이브 -->
<script src="https://gpay.payple.kr/common/js/gpay-1.0.1.js"></script>

2.2 결제하기 버튼 이벤트

버튼 이벤트에는 파트너 인증을 위한 토큰인Authorization 결제요청에 필요한
필수 파라미터들, 인증 결과를 수신하는resultUrl그리고 결제창을 호출하는
paypleGpayPaymentRequest()가 포함됩니다.

2.3 결제창 호출

paypleGpayPaymentRequest(obj) 함수 호출 시 결제창이 띄워집니다.

payment.html

HTML

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" />
6    <script src="https://demo-gpay.payple.kr/common/js/gpay-1.0.1.js?v=20250613090000" />
7  </head>
8  <body>
9    <!-- 주문서 내 결제하기 버튼 -->
10    <button id="btnPayment">결제하기</button>
11    <script>
12        $('#btnPayment').on('click', function (event) {
13            let obj = {};
14            obj.Authorization = "eyJhbGciOiJzaGEyNT..."
15            obj.service_id = "test";
16            obj.comments = "테스트 상품";
17            obj.totalAmount = "0.10";
18            obj.currency = "USD";
19            obj.resultUrl = "/result";
20            // 테스트 서버로 결제요청 시에만 필요합니다.
21            obj.payCls = "demo";
22            paypleGpayPaymentRequest(obj);
23        });
24    </script>
25  </body>
26</html>

3. 결제결과 수신

결제 정보가 성공적으로 입력된 경우, 인증 결과는 POST 방식으로resultUrl로 전송됩니다.
웹훅(Webhook)이 등록되었으면 등록한 웹훅 URL 로도 결과가 수신됩니다.

4. 연동 완료

모든 연동 작업을 완료하셨습니다.
조회, 취소 기능이 필요하다면 운영 API 를 이용해주세요.