🪧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.

<script>
    function requestPay() {
      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
              ...
          }
      });
    }
  </script>

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
          ...
        }
      });
    }

<script>
    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
              ...
            }
          });
        }
      }
    }
  </script>

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>

Previous2. Initialize IMP object Next4. Process payment result

Last updated 2 years ago