결제 SDK 가이드 - StepPay API

스텝페이는 결제를 위한 Javascript SDK 를 제공하고 있습니다. 결제 영역 Iframe 처리 및 결제 결과를 쉽게 처리할 수 있습니다.

Step1: SDK 설치

<script> 태그에 스텝페이 JS SDK 를 추가합니다.

<script
  src="https://cdn.steppay.kr/js/steppay-0.7.1.js"
  type="application/javascript"
></script>

Step2: 결제 메소드 호출

requestPay 메소드를 호출합니다.

Steppay.requestPay({
        paymentKey: `${PaymentKey}`,
        paymentGateway: 'KAKAO',
        paymentMethod: 'CARD',
        partner: {
            partnerOrderId : `${Order number managed by the partner}`,
            partnerUserId: `${Customer number managed by the partner}`
        },
        product : {
            itemName : `${Product name managed by the partner}`,
            amount : `${Amount to be paid}`,
            quantity : `${Total quantity}`,
            currency : 'KRW' // Fixed
        },
        customer : {
            userName : `${Customer name managed by the partner}`,
            phone : `${Customer mobile number managed by the partner}`,
            email : `${Customer email managed by the partner}`
        },
    }).cancel((d)=>{
        console.log("cancel" , d)
    }).success((d)=>{
        console.log("success" , d)
    }).error((d)=>{
        console.log("error" , d)
    })

항목	필수 여부	타입	설명
paymentKey	필수	String	paymentKey
paymentGateway	필수	String	지원하는 PG 및 결제수단 목록
paymentMethod	필수	String	지원하는 PG 및 결제수단 목록
partner.partnerOrderId	필수	String	가맹점에서 관리하는 주문번호
partner.partnerUserId	필수	String	가맹점에서 관리하는 고객번호
product.itemName	필수	String	상품 이름
product.amount	필수	Number	결제 금액
product.quantity	필수	Number	수량
customer.userName	필수	String	이름
customer.phone	필수	String	휴대폰 번호
customer.email	필수	String	이메일

Step3: 결제 결과 검증

결제 SDK success 콜백에 검증 API 호출합니다.

~.success((d)=>{
		const idKey = d.idKey
		fetch('Payment verification API URL', {
        method: 'POST',
				headers: {
			    "Content-Type": "application/json",
			  },
			  body: JSON.stringify({
			    idKey: idKey,
					status: "success"
			  }),
    })
    .then(response => response.json())
    .then(data => {
        // Show payment completed or failed payment data
    })
    .catch((error) => {
      console.error('Error:', error);
    });
    console.log("cancel" , d)
}).error((d)=>{
		// Display error
    console.log("error" , d)
})

스텝페이로 결제 검증 (Node)

// POST body
// idkey, status

const axios = require("axios");

let config = {
  method: "get",
  url: "https://api.steppay.kr/api/payment/receipt/${idKey}",
  headers: {
    "Secret-Token": "${secretToken}",
  },
};

axios
  .request(config)
  .then((response) => {
    const receiptResponse = JSON.stringify(response.data);
    // If status is successful
    if (status == "success" && receiptResponse.paymentStatus === "COMPLETE") {
      // Do some logic
    } else {
      // something went wrong
    }
    if (status == "error" && receiptResponse.paymentStatus === "FAILED") {
      // Do some logic
    } else {
      // something went wrong
    }
  })
  .catch((error) => {
    console.log(error);
  });