개발자센터
V1
V2
이 페이지의 다른 버전 보기
파트너 정산 릴리즈 노트 기술 블로그

PG결제창 이용하기

PG사에서 제공하는 결제창을 이용하여 빌링키를 획득합니다

PG사가 제공하는 일반 결제창에 고객이 카드 정보를 입력하여 빌링키를 발급받을 수 있습니다.

  • 장점: 카드 정보가 고객사의 서버 또는 포트원의 서버를 거치지 않고 직접 PG사로 전달되기 때문에 데이터 및 통신구간 암호화 등의 추가 보안 프로세스가 없다.

  • 단점: PG사의 일반결제창을 통해 카드 정보를 입력받기 때문에 웹브라우저를 통해서만 빌링키 발급이 이루어지며, 카드 정보 입력란을 커스터마이징할 수 없다. (고객사 사이트 친화적인 UI/UX 구성불가)

PG사 카드정보 획득 결제창 예제
PG사 카드정보 획득 결제창 예제

STEP 01. 발급 요청하기

인증결제와 동일하게 JavaScript SDK를 이용하여 PG사 결제창을 호출합니다. 빌링키를 획득하기 위해 아래 파라미터를 추가적으로 설정하면 모든 준비가 완료됩니다.

customer_uid: 빌링키와 1:1로 매칭될 고유 키

client-side
IMP.request_pay( { customer_uid: "gildong_0001_1234", // 카드(빌링키)와 1:1로 대응하는 값 /* ...생략... */ }, function (rsp) { // callback if (rsp.success) { // 빌링키 발급 성공 } else { // 빌링키 발급 실패 } }, );

customer_uid 란?

PG사가 발급한 빌링키와 1:1로 맵핑되는, 고객사가 지정한 고유한 값입니다. customer_uid는 카드 번호 단위로 구분하여 저장되어야 합니다.

예) 홍길동 고객이 A 카드 빌링키를 요청하는 경우 customer_uid회원별 카드 번호 단위로 고유하게 발급되어야 합니다.

이전 빌링키 발급에 사용된 customer_uid를 재사용하는 경우 가장 마지막 빌링키 발급에 사용된 카드번호의 빌링키로 대체됩니다. (기존에 발급된 빌링키는 자동으로 해지되지 않습니다.)

STEP 02. 발급 응답 처리하기

client-side
IMP.request_pay( { /* ...중략... */ }, function (rsp) { // callback if (rsp.success) { // 빌링키 발급 성공 // jQuery로 HTTP 요청 jQuery.ajax({ url: "{customer_uid를 받을 서비스 URL}", method: "POST", headers: { "Content-Type": "application/json" }, data: { customer_uid: "gildong_0001_1234", // 카드(빌링키)와 1:1로 대응하는 값 }, }); } else { // 빌링키 발급 실패 } }, );

빌링키가 성공적으로 발급되면 고객사 서버로 customer_uid를 전달합니다. 서버에서는 클라이언트로부터 customer_uid를 전달받는 API endpoint를 생성합니다. 서버에서 해당 customer_uid를 사용하여 차후에 결제를 요청할 수 있습니다.

server-side
app.post("/billings", async (req, res) => { try { const { customer_uid } = req.body; // req body에서 customer_uid 추출 // ... } catch (e) { res.status(400).send(e); } });

전달받은 customer_uid 를 고객사 내부 서버 DB에 저장 후 추후 해당 정보를 이용하여 결제를 요청합니다.

STEP 03. 결제 요청하기

위에서 저장된 customer_uid를 이용하여 비 인증 결제(빌링키)API를 호출하여 결제를 요청합니다.

REST API 를 이용하기 위해서는 Access Token 획득이 선행되어야 하는 점 잊지 마세요

Node.js
app.post("/billings", async (req, res) => { try { const { customer_uid } = req.body; // req의 body에서 customer_uid 추출 // 인증 토큰 발급 받기 const getToken = await axios({ url: "https://api.iamport.kr/users/getToken", method: "post", // POST method headers: { "Content-Type": "application/json" }, data: { imp_key: "imp_apikey", // REST API 키 imp_secret: "ekKoeW8RyKuT0zgaZsUtXXTLQ4AhPFW3ZGseDA6bkA5lamv9OqDMnxyeB9wqOsuO9W3Mx9YSJ4dTqJ3f", // REST API Secret }, }); const { access_token } = getToken.data; // 인증 토큰 // ... // 결제(재결제) 요청 const paymentResult = await axios({ url: `https://api.iamport.kr/subscribe/payments/again`, method: "post", // 인증 토큰을 Authorization header에 추가 headers: { Authorization: access_token }, data: { customer_uid, merchant_uid: "order_monthly_0001", // 새로 생성한 결제(재결제)용 주문 번호 amount: 8900, name: "월간 이용권 정기결제", }, }); // ... const { code, message } = paymentResult; if (code === 0) { // 카드사 통신에 성공(실제 승인 성공 여부는 추가 판단이 필요함) if (paymentResult.status === "paid") { //카드 정상 승인 res.send(/* ... */); } else { //카드 승인 실패 (예: 고객 카드 한도초과, 거래정지카드, 잔액부족 등) //paymentResult.status : failed 로 수신됨 res.send(/* ... */); } res.send(/* ... */); } else { // 카드사 요청에 실패 (paymentResult is null) res.send(/* ... */); } } catch (e) { res.status(400).send(e); } });