Search
K
🪧

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.
JavaScript
React.js
Vue.js
<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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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 : '[email protected]',
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