페이플 MCP로 홈페이지에 정기결제 붙여 보기: 테스트 환경에서 결제창 띄우기까지

페이플 MCP를 연결한 AI 코딩 도구로 구독 상품 페이지에 카드 정기결제 버튼을 붙이고, 테스트 환경에서 카드 등록 결제창을 띄우는 데까지 따라 해 봅니다.

2026.10.29 | 조회 33 |

from.

페이플

페이플 MCP를 연결한 AI 코딩 도구에 질문 한 줄을 건네면, 개발자센터 문서를 근거로 구독 상품 페이지에 카드 정기결제 결제창을 띄우는 코드까지 만들 수 있습니다.

이번 실습에서 만드는 것

구독 상품 페이지 예시 화면

어제 소개한 페이플 MCP를 실제로 써 봅니다. 월 1,000원짜리 테스트 구독 상품 페이지에 "카드 등록하기" 버튼을 붙이고, 이 버튼을 누르면 페이플 카드 등록 결제창이 뜨게 만듭니다.

환경: 페이플 테스트 환경. 개발자센터에 공개된 테스트 정보로 계약 전에도 누구나 따라 할 수 있습니다.
범위: 결제창을 띄우는 데까지입니다. 카드를 등록한 뒤 매달 결제하는 단계는 글 끝에 흐름만 정리합니다.
준비물: 페이플 MCP를 연결한 AI 코딩 도구, 간단한 웹 서버(이 글은 Node.js 기준)

→ 페이플 MCP 연결 주소: https://mcp.payple.kr/mcp

1단계: AI에게 물어보기

AI 코딩 도구 예시 화면

원하는 것을 평소 말로 적습니다.

"구독 상품에 카드 정기결제를 붙여 줘. 테스트 환경에서 결제창까지만."

AI는 페이플 MCP로 질문에 맞는 문서를 찾습니다. 이번에는 국내 카드 정기(빌링) 결제 문서와 테스트 환경과 확인사항 문서를 근거로 골랐습니다.

→ 국내 카드 정기(빌링) 결제

→ 테스트 환경과 확인사항

정기결제 문서에는 두 가지 흐름이 있습니다. 카드 등록만 먼저 하는 흐름(AUTH)과, 등록과 첫 결제를 함께 하는 흐름(CERT)입니다. "결제창까지만"이라고 했으므로 AI는 카드 등록만 먼저 하는 흐름을 골랐고, 다른 흐름의 파라미터를 섞지 않았습니다.

2단계: 키와 금액은 서버에 둡니다

브라우저와 서버가 맡는 일

결제창을 띄우기 전에 키를 어디에 둘지 먼저 정합니다. 테스트 환경과 운영 환경은 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 };

custKey는 서버에서만: custKey는 밖으로 드러나면 안 되는 키입니다. 결제창 호출에는 clientKey만 씁니다.
금액은 서버가 정합니다: 페이지에 보이는 금액도 서버의 PLAN 값으로 채웁니다. 나중에 결제할 때도 이 값을 씁니다.

3단계: 버튼을 누르면 결제창이 뜹니다

페이플 카드 등록 결제창 예시 화면

페이지에 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>

버튼을 누르면 결제창 객체를 만들어 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 // 결과를 받아 서버로 넘기는 함수
  });
};

이제 "카드 등록하기" 버튼을 누르면 페이플 카드 등록 결제창이 뜹니다. 페이플 테스트 환경에서 이 코드로 결제창이 뜨는 것을 직접 확인했습니다. 블로그 원문에서는 같은 코드로 띄운 테스트 결제창을 버튼 하나로 바로 볼 수 있습니다.

→ 테스트 결제창 열어 보기(원문)

다음 단계: 빌링키로 매달 결제하기

카드 정기결제 4단계

결제창에서 카드를 등록한 다음부터는 서버가 일합니다. 정기결제 문서의 "흐름 1. 등록만 먼저 (AUTH)" 순서는 다음과 같습니다.

결제창 호출: 이번 실습에서 만든 부분입니다.
인증결과 수신: 카드 등록이 끝나면 PCD_RST_URL로 결과가 옵니다. 결과에 담긴 빌링키(PCD_PAYER_ID)를 회원 정보와 함께 서버에 저장합니다.
파트너 인증: 결제할 때마다 서버에서 custKey로 파트너 인증을 요청합니다.
빌링키로 승인: 인증 결과로 받은 주소에 빌링키와 서버가 정한 금액을 보내 결제를 승인받습니다.

이 단계도 같은 방식으로 AI에게 물어보면 됩니다. 예를 들어 "등록 결과로 받은 빌링키로 서버에서 매달 결제하는 코드를 만들어 줘"라고 하면 같은 문서의 3, 4단계를 근거로 코드를 만듭니다.