# Iframe method

{% hint style="info" %}
**What is an iframe?**\
It is a nested browser that effectively **embeds another HTML page into the current page**. By using the iframe element, **other pages can be loaded and inserted** into a web page without any restrictions.
{% endhint %}

![iframe example](https://2814812280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhTv8JEzyM5h4cYcL5StH%2Fuploads%2FORE1dJMaMlHDVps8J7kb%2Fspaces_hTv8JEzyM5h4cYcL5StH_uploads_tTzTD0S6IF5zvCag4EKG_image.png?alt=media\&token=3f03a792-d6ca-416c-8e07-6320b1b231f6)

#### Most payments that are processed in the PC environment can receive payment results through the callback function, which is the second argument of the request\_pay() function.

{% hint style="success" %}
For **PayPal** payments, the payment window is loaded as a **pop-up (new window)** in a PC environment and you can also receive the payment result through **m\_redirect\_url**.
{% endhint %}

> The following sample code processes the response to a payment request in **a typical PC environment** where the payment window is **loaded as iframe**.

{% tabs %}
{% tab title="JavaScript" %}
{% code title="client-side" %}

```javascript
IMP.request_pay({
      /* ...Omitted... */
    }, function (rsp) {             // callback
      if (rsp.success) {            // payment successful: payment accepted or virtual account issued
        // HTTP request with jQuery
        jQuery.ajax({
            url: "{Merchant endpoint that receives server's payment info}", 
            method: "POST",
            headers: { "Content-Type": "application/json" },
            data: {
                imp_uid: rsp.imp_uid,            // Payment ID     
                merchant_uid: rsp.merchant_uid   // Order ID
            }
        }).done(function (data) {
          // Merchant server payment API call is successful
        })
      } else {
        alert("Payment failed. Error: " +  rsp.error_msg);
      }
    });
```

{% endcode %}
{% endtab %}

{% tab title="JavaScript (ES Next)" %}
{% code title="client-side" %}

```javascript
IMP.request_pay({
    /* ...Omitted... */
  }, rsp => {                      // callback
    if (rsp.success) {   
      // HTTP request with axios
      axios({
        url: "{Endpoint that receives server's payment info}",
        method: "post",
        headers: { "Content-Type": "application/json" },
        data: {
          imp_uid: rsp.imp_uid,
          merchant_uid: rsp.merchant_uid
        }
      }).then((data) => {
        // Server payment API call is successful
      })
    } else {
      alert(\`Payment failed. Error: \${rsp.error_msg}\`);
    }
  });
```

{% endcode %}
{% endtab %}
{% endtabs %}

Based on the the payment result (sucess/fail) in the response object ([**rsp**](https://portone.gitbook.io/docs-en/sdk/javascript-sdk)) returned after the payment process is complete, add the post-payment processing logic in the **callback** function. When the payment is successful, add the logic to **send the payment ID (imp\_uid) and order ID (merchant\_uid) to the server** as shown above.

> For information about the response parameter passed to the **callback** function, refer to [<mark style="color:red;">**rsp**</mark>](https://portone.gitbook.io/docs-en/sdk/javascript-sdk/undefined-1).

{% hint style="danger" %}
The final payment result logic processing must be handled stably by using a [<mark style="color:red;">**webhook**</mark>](https://portone.gitbook.io/docs-en/result/webhook). If you don't set up a webhook, you may fail to receive the payment result.
{% endhint %}