1. Query parameters

These are query parameters that merchants should pass to Afterpay

Name	Description	Compulsory
domain	Domain url of the parent page where the IFrame is included	✅
locale	Customise the language used in the form. Supported values: `en-AU, en-NZ, en-US, en-GB, en-CA, fr-CA`	➖

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

2. Send messages to Iframe

Payment Information

Once the Iframe is loaded, the parent window must send the Payment Information to the Iframe in JSON format using this function:

window.postMessage(message, targetOrigin, [transfer]);

🚧
targetOrigin
On Dev env targetOrigin could be * (any values).
On Prod env targetOrign is recommended to be a specific value.

Parameter list:

Name	Type	Description	Compulsory
token	string	Authentication token	✅
amount	number	The total amount of funds to be transferred.	✅
currency	string	The currency of the funds to be transferred	✅
requestor	string	Who requested the tokenisation/payment	✅
requestId	string	Unique identifier for verification request provided by merchant	✅
risk[`currentService`]	string	The service or accountId to which the tokenisation/payment relates, e.g. the MSN being recharged	➖
risk[`deviceFingerprint`]	string	A unique identifier of the device from which the payment request is being made	➖
risk[`ipAddress`]	string	The IP address of the device from which the payment is being submitted	✅
risk[`simNumber`]	string	The SIM number to which the transaction relates to. This is only applicable to telco merchants	➖
risk[`activationDate`]	string	The date upon which the service was activated for the current owner	➖
risk[`parentAccount`]	string	Reference to the parent account to which the current service belongs	✅
risk[`channel`]	string	The medium from which the transaction is originated (the pre-built UI is used) eg: web, app	✅

Example:

<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");
		 // logic to construct the frame
     if (paymentFrame.addEventListener) {
       paymentFrame.addEventListener("load", sendMessage, false);
     } else if (paymentFrame.attachEvent) {
       paymentFrame.attachEvent("onload", sendMessage);
     }
     document.getElementById("payment").appendChild(paymentFrame);
   }
   
   function sendMessage() {  
     const paymentWindow = this.contentWindow;
     paymentWindow.postMessage(
   {
      type: "PAYMENT_FORM_INFO",
      value: {
        config: {
          showCard: false,
          showLabel: true,
          showStoreCard: true,
          showPay: true,
          tempToken: true,
          storeToken: true
        },
        theme: {
          type: "dark",
          color: "#FACCCC",
          typography: {
            fontFamily: "MarkPro",
            fontSize: 12,
          },
          button: {
            radius: 4,
          },
          textField: {
            radius: 4,
            height: "1.8em",
          },
          spacing: 8,
        },
        paymentInfo: {
          token: "eyJraWQiOiJXWWlRRlhieEx0ZHJjeFwvTnhiNVwvWEMyMTlzYUZ3ejE0VUtSTHNLTVRmMkk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI0Z2NkbjNwMXZyOTE1bGtjbXNma2NsMmcxNiIsInRva2VuX3VzZSI6ImFjY2VzcyIsInNjb3BlIjoicGF5bm93LXVhdC5hZnRlcnBheS5jb21cL3YxXC9jaGFyZ2VzXC9yZXF1ZXN0IHBheW5vdy11YXQuYWZ0ZXJwYXkuY29tXC92MVwvY2FyZHNcL3B1YmxpYy12ZXJpZnkiLCJhdXRoX3RpbWUiOjE2NjEyMjk0NjYsImlzcyI6Imh0dHBzOlwvXC9jb2duaXRvLWlkcC5hcC1zb3V0aGVhc3QtMi5hbWF6b25hd3MuY29tXC9hcC1zb3V0aGVhc3QtMl83eXpVMVBacWsiLCJleHAiOjE2NjEyMzMwNjYsImlhdCI6MTY2MTIyOTQ2NiwidmVyc2lvbiI6MiwianRpIjoiNmU5YTY2M2ItYzU1My00M2UyLWI2MmItYjAzNTc0Mjk1NTA4IiwiY2xpZW50X2lkIjoiNGdjZG4zcDF2cjkxNWxrY21zZmtjbDJnMTYifQ.PD4tmcJq0ypuxKwMZon-O82SzAePifI7NVMWmBnf7J8uB-QaJjaH80lNi7qBn5p_ylHQTYyxl5xlgRFjZdqQtArbPM6kjsUTgJyauN2_ZKof0ApwpLcYL6gqH51cBHEGCu88JkQh0DVhNayvTChcOdq73tPqt0nMRtSSd4q9G1uoK7j4qNeM8ujBHXuCpN-uFvgXn_NZregNaS6_IXIH-8Z23h0DPeD0NL-1YX7YJiP13CGIlSjoWURDcLW7rDszLN8eTKpgdE3RK4kdoUpbMqqHtV-oyTFqwRHP1j4Ukyuq0ov_D0irY8zGAmxksnPdSKCk4Xop1AF0oRXMLal1aQ",
          amount: 0.00,
          currency: "AUD",
          risk: {
            currentService: "0400301141",
            deviceFingerprint: "ABCDE12345",
            ipAddress: "192.168.0.1",
            simNumber:"77666655555",
            parentAccount: "0400301141",
            activationDate: "2022-05-01",
            channel: "web"
          },
          requestor: "0400301141",
          requestId:"scen-11"
        },
      },
    },
    "*"
  ); 
   }
</script>
<body>
   <div id="payment" style="height: 400px" />
</body>

Payment Action

Merchants may opt for hiding the Pay button and trigger the Payment process by sending the SUBMIT_PAYMENT event.

window.postMessage(
  {
    type: "SUBMIT_PAYMENT",
  },
  "*"
);

3. Receive messages from Iframe

A Parent window can listen for dispatched messsages from IFrame by executing this code

if (window.addEventListener) {
    window.addEventListener("message", (event) => console.log(event.data), false);
} else if (window.attachEvent) {
  // before IE 9 support
  window.attachEvent("onmessage", (event) => console.log(event.data));
} else {
  throw new Error("Could not attach message listener");
}