개발자센터

3. 결제 요청하기

파라미터값을 조합하여 결제창을 호출 할 수 있습니다.

IMP 객체 초기화가 완료 되었으면 이제 결제창을 호출할 차례입니다.

결제창 호출시 필요한 파라미터를 request_pay 함수 첫번째 파라미터 인자로 설정합니다.

  function requestPay() {
    IMP.request_pay({
      pg: "kcp.{상점ID}",
      pay_method: "card",
      merchant_uid: "ORD20180131-0000011",   // 주문번호
      name: "노르웨이 회전 의자",
      amount: 64900,                         // 숫자 타입
      buyer_email: "gildong@gmail.com",
      buyer_name: "홍길동",
      buyer_tel: "010-4242-4242",
      buyer_addr: "서울특별시 강남구 신사동",
      buyer_postcode: "01181"
    }, function (rsp) { // callback
      //rsp.imp_uid 값으로 결제 단건조회 API를 호출하여 결제결과를 판단합니다.
    });
  }
class RequestPay extends React.Component {
  requestPay = () => {
    IMP.request_pay({ // param
      pg: "kcp.{상점ID}",
      pay_method: "card",
      merchant_uid: "ORD20180131-0000011",
      name: "노르웨이 회전 의자",
      amount: 64900,
      buyer_email: "gildong@gmail.com",
      buyer_name: "홍길동",
      buyer_tel: "010-4242-4242",
      buyer_addr: "서울특별시 강남구 신사동",
      buyer_postcode: "01181"
    }, rsp => { // callback
      if (rsp.success) {
        ...,
        // 결제 성공 시 로직,
        ...
      } else {
        ...,
        // 결제 실패 시 로직,
        ...
      }
    });
  }
<script>
  export default {
    methods: {
      requestPay: function () {
        IMP.request_pay({ // param
          pg: "kcp.{상점ID}",
          pay_method: "card",
          merchant_uid: "ORD20180131-0000011",
          name: "노르웨이 회전 의자",
          amount: 64900,
          buyer_email: "gildong@gmail.com",
          buyer_name: "홍길동",
          buyer_tel: "010-4242-4242",
          buyer_addr: "서울특별시 강남구 신사동",
          buyer_postcode: "01181"
        }, rsp => { // callback
          if (rsp.success) {
            ...,
            // 결제 성공 시 로직,
            ...
          } else {
            ...,
            // 결제 실패 시 로직,
            ...
          }
        });
      }
    }
  }
</script>

주문번호(merchant_uid) 생성 시 유의사항

  • 주문번호는 결제창 요청 시 항상 고유 값으로 채번 되어야 합니다.
  • 결제 완료 이후 결제 위변조 대사 작업시 주문번호를 이용하여 검증이 필요하므로 주문번호는 가맹점 서버에서 고유하게(unique)채번하여 DB 상에 저장해주세요

현재까지 진행한 소스코드에 결제 버튼을 추가한 샘플 코드입니다.

sample.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- PortOne SDK -->
    <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
    <script>
      var IMP = window.IMP;
      IMP.init("impXXXXXXXXX");
 
      function requestPay() {
        IMP.request_pay(
          {
            pg: "kcp.{상점ID}",
            pay_method: "card",
            merchant_uid: "57008833-33004",
            name: "당근 10kg",
            amount: 1004,
            buyer_email: "Iamport@chai.finance",
            buyer_name: "포트원 기술지원팀",
            buyer_tel: "010-1234-5678",
            buyer_addr: "서울특별시 강남구 삼성동",
            buyer_postcode: "123-456",
          },
          function (rsp) {
            // callback
            //rsp.imp_uid 값으로 결제 단건조회 API를 호출하여 결제결과를 판단합니다.
          }
        );
      }
    </script>
    <meta charset="UTF-8" />
    <title>Sample Payment</title>
  </head>
  <body>
    <button onclick="requestPay()">결제하기</button>
    <!-- 결제하기 버튼 생성 -->
  </body>
</html>

결제하기 버튼 생성 및 결제창 호출

결제창 예제