🪟Iframe method

Process the payment result in a typical PC environment using an iframe.

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.

iframe example

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.

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.

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

JavaScript

client-side

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

JavaScript (ES Next)

client-side

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

Based on the the payment result (sucess/fail) in the response object (rsp) 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 rsp.

The final payment result logic processing must be handled stably by using a webhook. If you don't set up a webhook, you may fail to receive the payment result.