Load the iframe

Use one of the base URLs depending on your environment:

For local development and testing, use: https://frame-payments.3pi.paynow.afterpaytouch.dev/separate/afterpay/index.html

For production, use https://frame-payments.paynow.afterpay.com/separate/afterpay/index.html

Query parameters

These are query parameters that merchants should pass to Afterpay

Name	Description	Compulsory
domain	The URL of the parent page which embeds the iframe	✅

Example:

<iframe
  src="https://frame-payments.3pi.health.afterpaytouch.dev/separate/afterpay/index.html?domain={currentDomain}"
>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(document).ready(function () {
     createPaymentFrame();
   });
   
   function createPaymentFrame() {
     const paymentFrame = document.createElement("iframe");
     const currentDomain = window.location.origin;
     const lang = "en-AU";
     paymentFrame.setAttribute("src", `https://example.afterpay.com?domain=${currentDomain}&lang=${lang}`);
     paymentFrame.style.width = "100%";
     paymentFrame.style.height = "100%";
     paymentFrame.style.border = "none";
     document.getElementById("payment").appendChild(paymentFrame);
   }
</script>
<body>
   <div id="payment" style="height: 400px" />
</body>