3. Request payment

Call a payment window with required parameter values.

Once IMP object initialization is complete, you can open the payment window.

You can pass the parameters required to call the payment window in the first argument of the request_pay function.

IMP.request_pay(
  {
    pg: "kcp",
    pay_method: "card",
    merchant_uid: "ORD20180131-0000011", // Order ID
    name: "Norway swivel chair",
    amount: 64900, // Number
    buyer_email: "gildong@gmail.com",
    buyer_name: "Hong Gildong",
    buyer_tel: "010-4242-4242",
    buyer_addr: "Shinsa-dong, Gangnam-gu, Seoul",
    buyer_postcode: "01181",
  },
  function (rsp) {
    // callback
    if (rsp.success) {
      // Payment is successful
    } else {
      // Payment failed
    }
  },
);

export class RequestPay extends React.Component {
  requestPay = () => {
    IMP.request_pay(
      {
        // param
        pg: "kcp",
        pay_method: "card",
        merchant_uid: "ORD20180131-0000011",
        name: "Norway swivel chair",
        amount: 64900,
        buyer_email: "gildong@gmail.com",
        buyer_name: "Hong Gildong",
        buyer_tel: "010-4242-4242",
        buyer_addr: "Shinsa-dong, Gangnam-gu, Seoul",
        buyer_postcode: "01181",
      },
      (rsp) => {
        // callback
        if (rsp.success) {
          // Payment is successful
        } else {
          // Payment failed
        }
      },
    );
  };
}

export default {
  methods: {
    requestPay: function () {
      IMP.request_pay(
        {
          // param
          pg: "kcp",
          pay_method: "card",
          merchant_uid: "ORD20180131-0000011",
          name: "Norway swivel chair",
          amount: 64900,
          buyer_email: "gildong@gmail.com",
          buyer_name: "Hong Gildong",
          buyer_tel: "010-4242-4242",
          buyer_addr: "Shinsa-dong, Gangnam-gu, Seoul",
          buyer_postcode: "01181",
        },
        (rsp) => {
          // callback
          if (rsp.success) {
            // Payment is successful
          } else {
            // Payment failed
          }
        },
      );
    },
  },
};

Note - Creating an order ID (merchant_uid)

The order number must always be assigned a unique value when the payment window is requested.
After the payment process is complete, the server uses the order ID to retrieve the order information for payment fraud check. Be sure to create a unique ID on the merchant server and store it in the DB.

The following is the above sample code with the Pay button added.

sample.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jQuery -->
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-1.12.4.min.js"
    ></script>
    <!-- iamport.payment.js -->
    <script
      type="text/javascript"
      src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"
    ></script>
    <script>
      var IMP = window.IMP;
      IMP.init("impXXXXXXXXX");

      function requestPay() {
        IMP.request_pay(
          {
            pg: "kcp",
            pay_method: "card",
            merchant_uid: "57008833-33004",
            name: "Carrots 10kg",
            amount: 1004,
            buyer_email: "Iamport@chai.finance",
            buyer_name: "iamport tech support",
            buyer_tel: "010-1234-5678",
            buyer_addr: "Samsung-dong, Gangnam-gu, Seoul",
            buyer_postcode: "123-456",
          },
          function (rsp) {
            // callback
            if (rsp.success) {
              console.log(rsp);
            } else {
              console.log(rsp);
            }
          }
        );
      }
    </script>
    <meta charset="UTF-8" />
    <title>Sample Payment</title>
  </head>
  <body>
    <button onclick="requestPay()">Pay</button>
    <!-- Pay button -->
  </body>
</html>

Creating the Pay button for opening the payment window

Sample payment window