GuidesAPI Reference
Guides

Messaging

Communication between merchants and Prebuilt payment UI

Suggest Edits

1. Query parameters

These are query parameters that merchants should pass to Afterpay

NameDescriptionCompulsory
domainDomain url of the parent page where the IFrame is included✅
localeCustomise 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:

NameTypeDescriptionCompulsory
tokenstringAuthentication token✅
amountnumberThe total amount of funds to be transferred.✅
currencystringThe currency of the funds to be transferred✅
requestorstringWho requested the tokenisation/payment✅
requestIdstringUnique identifier for verification request provided by merchant✅
risk[currentService]stringThe service or accountId to which the tokenisation/payment relates, e.g. the MSN being recharged➖
risk[deviceFingerprint]stringA unique identifier of the device from which the payment request is being made➖
risk[ipAddress]stringThe IP address of the device from which the payment is being submitted✅
risk[simNumber]stringThe SIM number to which the transaction relates to. This is only applicable to telco merchants➖
risk[activationDate]stringThe date upon which the service was activated for the current owner➖
risk[parentAccount]stringReference to the parent account to which the current service belongs✅
risk[channel]stringThe 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");
}

Updated 6 months ago