Appearance

Embed the iFrame ​

After initializing a payment session, you need to embed the hosted payment form in your application using an iframe.

Overview ​

Set the iframe src URL to the hosted payment form. This will load the form into the iframe on your site.

NOTE

This URL is returned from the Initialize Session response: response.payment_session.payment_session_url.

Implementation ​

js
let iframe;
document.addEventListener("DOMContentLoaded", function () {
  iframe = document.querySelector("iframe");
  initialize();
});

Example HTML ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Payment Checkout</title>
  </head>
  <body>
    <h1>Secure Payment Checkout</h1>

    <!-- Embed the iframe with the payment_session_url from the API response -->
    <iframe
      id="payment-iframe"
      src="https://{{PNX_HOSTED_FORM_URL}}/payment-session/{{SESSION_ID}}"
      width="100%"
      height="600px"
      frameborder="0"
    ></iframe>

    <script src="your-payment-script.js"></script>
  </body>
</html>

Environment URLs

The PNX_HOSTED_FORM_URL will be part of the payment_session_url returned from the Initialize Session API call.

See QA Environment or Production Environment for specific hosted form URLs.

Best Practices ​

  • Responsive Design: Set the iframe width to 100% to ensure it works on all device sizes
  • Height: A minimum height of 500-600px is recommended to display the form without scrolling
  • Security: Always use HTTPS for both your page and the iframe source
  • Loading State: Consider showing a loading indicator while the iframe content loads

Next Step ​

Once the iframe is embedded, proceed to tokenize card data when the user is ready to submit payment information.