# 3. Request payment

Once [**IMP object initialization**](/docs-en/auth/guide/2..md) is complete, you can open the payment window.

You can pass the [**parameters**](/docs-en/sdk/javascript-sdk.md) required to call the payment window in the first argument of the **request\_pay** function.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
<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>
```

{% endtab %}

{% tab title="React.js" %}

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

{% endtab %}

{% tab title="Vue.js" %}

```javascript
<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>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**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**.
  {% endhint %}

#### The following is the above sample code with the <mark style="color:red;">Pay button</mark> added.

{% code title="sample.html" %}

```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>
```

{% endcode %}

{% embed url="<https://youtu.be/Gq7r5AUoMKs>" %}
Creating the Pay button for opening the payment window
{% endembed %}

{% embed url="<https://codepen.io/chaiport/pen/NWXrGvQ>" %}
Sample payment window
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://portone.gitbook.io/docs-en/auth/guide/3..md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
