페이플 MCP를 연결한 AI 코딩 도구에 질문 한 줄을 건네면, 개발자센터 문서를 근거로 구독 상품 페이지에 카드 정기결제 결제창을 띄우는 코드까지 만들 수 있습니다.
이번 실습에서 만드는 것
구독 상품 페이지 예시 화면: 정기결제 테스트, 월간 구독 1,000원 / 월, 1. 카드 등록하기 버튼과 2. 이번 달 결제하기 버튼, 이번 실습은 1번 버튼으로 결제창을 띄우는 데까지라는 안내
어제 소개한 페이플 MCP를 실제로 써 봅니다. 월 1,000원짜리 테스트 구독 상품 페이지에 "카드 등록하기" 버튼을 붙이고, 이 버튼을 누르면 페이플 카드 등록 결제창이 뜨게 만듭니다.
•
환경: 페이플 테스트 환경. 개발자센터에 공개된 테스트 정보로 계약 전에도 누구나 따라 할 수 있습니다.
•
범위: 결제창을 띄우는 데까지입니다. 카드를 등록한 뒤 매달 결제하는 단계는 글 끝에 흐름만 정리합니다.
•
1단계: AI에게 물어보기
AI 코딩 도구 예시 화면: 구독 상품에 카드 정기결제를 붙여 줘, 테스트 환경에서 결제창까지만 이라는 질문에 국내 카드 정기(빌링) 결제의 흐름 1. 등록만 먼저(AUTH)로 진행한다고 답하고, 스크립트 넣기, PaypleCpayAuthCheck로 결제창 띄우기, 키는 환경변수로 나누고 금액은 서버에서 정하기 순서와 근거 문서 두 개를 보여 줌
원하는 것을 평소 말로 적습니다.
구독 상품에 카드 정기결제를 붙여 줘. 테스트 환경에서 결제창까지만.
정기결제 문서에는 두 가지 흐름이 있습니다. 카드 등록만 먼저 하는 흐름(AUTH)과, 등록과 첫 결제를 함께 하는 흐름(CERT)입니다. "결제창까지만"이라고 했으므로 AI는 카드 등록만 먼저 하는 흐름을 골랐고, 다른 흐름의 파라미터를 섞지 않았습니다.
2단계: 키와 금액은 서버에 둡니다
브라우저와 서버가 맡는 일: 브라우저는 clientKey로 결제창을 띄우고 결제창 결과를 서버로 넘기며 custKey는 갖지 않음, 서버는 키를 환경변수로 보관하고 상품과 금액을 정하며 받은 빌링키를 저장함
결제창을 띄우기 전에 키를 어디에 둘지 먼저 정합니다. 테스트 환경과 운영 환경은 clientKey, cst_id, custKey가 모두 다르므로 환경변수로 나눠 둡니다. 테스트 값은 개발자센터 테스트 환경과 확인사항 문서에 있습니다.
// server.js
const PAYPLE_HOST = process.env.PAYPLE_HOST; // 테스트: https://democpay.payple.kr
const CLIENT_KEY = process.env.PAYPLE_CLIENT_KEY; // 결제창 호출용
const CST_ID = process.env.PAYPLE_CST_ID;
const CUST_KEY = process.env.PAYPLE_CUST_KEY; // 서버에서만 사용
// 구독 상품과 금액은 서버가 정합니다. 브라우저에서 온 금액은 쓰지 않습니다.
const PLAN = { goods: '월간 구독', total: 1000 };
JavaScript
복사
•
custKey는 서버에서만: custKey는 밖으로 드러나면 안 되는 키입니다. 결제창 호출에는 clientKey만 씁니다.
•
금액은 서버가 정합니다: 페이지에 보이는 금액도 서버의 PLAN 값으로 채웁니다. 나중에 결제할 때도 이 값을 씁니다.
3단계: 버튼을 누르면 결제창이 뜹니다
페이플 카드 등록 결제창 예시 화면: 정기 결제 이용을 위해 카드를 등록합니다, 카드번호, 유효기간, 비밀번호 앞 2자리, 생년월일 6자리 또는 사업자번호 10자리 입력란, 필수약관 동의, 등록하기 버튼
페이지에 jQuery와 페이플 테스트용 결제 스크립트를 넣습니다. 운영 환경에서는 운영용 스크립트 주소로 바꿉니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://democpay.payple.kr/js/v1/payment.js"></script>
HTML
복사
버튼을 누르면 결제창 객체를 만들어 PaypleCpayAuthCheck를 부릅니다. 파라미터 이름과 값은 모두 정기결제 문서의 "결제창 호출" 표에 있는 것만 썼습니다.
document.getElementById('register').onclick = () => {
PaypleCpayAuthCheck({
clientKey: CLIENT_KEY, // 서버가 환경변수 값으로 채워 줍니다
PCD_PAY_TYPE: 'card', // 카드
PCD_PAY_WORK: 'AUTH', // 카드 등록만 먼저
PCD_CARD_VER: '01', // 정기(빌링)
PCD_PAY_GOODS: '월간 구독',
PCD_PAY_TOTAL: 1000,
PCD_RST_URL: '/result', // 등록 결과를 받을 서버 주소
callbackFunction: getResult // 결과를 받아 서버로 넘기는 함수
});
};
JavaScript
복사
이제 "카드 등록하기" 버튼을 누르면 페이플 카드 등록 결제창이 뜹니다. 페이플 테스트 환경에서 이 코드로 결제창이 뜨는 것을 직접 확인했습니다. 아래 버튼을 누르면 같은 코드로 띄운 테스트 결제창을 바로 볼 수 있습니다.
다음 단계: 빌링키로 매달 결제하기
카드 정기결제 4단계: 1 결제창 호출(이번 실습), 2 인증결과 수신(빌링키를 받습니다), 3 파트너 인증(서버에서 요청합니다), 4 빌링키 승인(매달 결제합니다)
결제창에서 카드를 등록한 다음부터는 서버가 일합니다. 정기결제 문서의 "흐름 1. 등록만 먼저 (AUTH)" 순서는 다음과 같습니다.
1.
결제창 호출: 이번 실습에서 만든 부분입니다.
2.
인증결과 수신: 카드 등록이 끝나면 PCD_RST_URL로 결과가 옵니다. 결과에 담긴 빌링키(PCD_PAYER_ID)를 회원 정보와 함께 서버에 저장합니다.
3.
파트너 인증: 결제할 때마다 서버에서 custKey로 파트너 인증을 요청합니다.
4.
빌링키로 승인: 인증 결과로 받은 주소에 빌링키와 서버가 정한 금액을 보내 결제를 승인받습니다.
이 단계도 같은 방식으로 AI에게 물어보면 됩니다. 예를 들어 "등록 결과로 받은 빌링키로 서버에서 매달 결제하는 코드를 만들어 줘"라고 하면 같은 문서의 3, 4단계를 근거로 코드를 만듭니다.
자주 묻는 질문
Q. 계약 전에도 따라 할 수 있나요?
네. 개발자센터에 공개된 테스트 정보로 계약 전에도 누구나 연동을 해 볼 수 있습니다.
Q. 테스트 환경에서 카드를 등록하면 돈이 나가나요?
테스트 환경이라도 카드결제는 해당 카드로 실제 결제가 진행되고, 따로 취소하지 않아도 24시간 안에 자동 취소됩니다. 이번 실습은 결제창을 띄우는 데까지라 카드 정보를 입력하지 않아도 됩니다.
Q. AI가 문서에 없는 파라미터를 넣으면 어떻게 하나요?
페이플 MCP는 문서에 없는 값을 만들지 말고 확인을 요청하라는 원칙을 AI에게 함께 전달합니다. 그래도 답에 함께 나온 근거 문서를 열어 파라미터 표와 맞는지 한 번 확인해 주세요.
Q. 운영으로 바꿀 때는 무엇을 바꾸나요?
결제 스크립트 주소와 키 세 가지(clientKey, cst_id, custKey)를 운영용으로 바꿉니다. 키를 환경변수로 나눠 두었다면 코드는 그대로 두고 값만 바꾸면 됩니다. 운영 환경은 HTTPS(TLS 1.2 이상)가 필요합니다.
시작하기
페이플 PG 가입 문의에서 신청할 수 있습니다. 접수되면 1영업일 안에 담당자가 연락드립니다.