Messaging

Send messages to the iframe

Payment Information

Once the iframe is loaded, the parent window must post a PAYMENT_FORM_INFO message to the iframe including the authorisation token, payment information and configurations for PayPal button customisation using this function:

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

Parameter list:

paymentInfo (Required)

Name	Type	Description	Required?
token	string	Authentication token	✅
risk	object	Information to enable risk assessment process	✅
risk[`currentService`]	string	The service or accountId to which the order/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[`parentAccount`]	string	Reference to the parent account to which the current service belongs; can be same as currentService	✅
risk [`channel`]	string	The medium from which the transaction is originated (the pre-built UI is used) eg: web, app	✅
risk [`simNumber`]	string	The SIM number to which the payment relates; applicable only for telecom sim activation	➖
risk [`activationDate`]	date	The date upon which the service was activated for the current user; The date must be today or a past date.	➖
requestId	string	Unique identifier for request provided by merchant	✅
service	string	The service for which the payment is being completed, e.g. Shop, Recharge, Unlock	✅
amount	object	The value of funds to be transferred and the currency	✅
amount [`value`]	number	The total value of the funds to be transferred; order total	✅
amount [`currency`]	string	The currency in which the transaction is to occur	✅
items	object	The array of items the customer purchases from the merchant	✅
items[`name`]	string	The item name or title	✅
items [`quantity`]	string	The item quantity. Must be a whole number	✅
items[`description`]	string	The detailed item description	➖
items [`unitPrice`]	string	The unit price of the item	✅
customer	object	The details of customer requesting the order	➖
customer[givenNames]	string	The given names of the customer	✅
customer[surname]	string	The last name of the customer	✅
customer[email]	string	The email address of customer	✅
shipping	object	The name and address of the person to whom to ship the items.	➖
shipping[`name`]	string	The name of the person to whom to ship the items	✅
shipping[`line`]	string	The address of the person to whom to ship the items, such as number and street	✅
shipping[`area`]	string	A city, town, or village	✅
shipping[`region`]	string	The highest-level sub-division in a country, which is usually a province, state, or ISO-3166-2 subdivision	✅
shipping[`postcode`]	string	The postal code, which is the ZIP code or equivalent. Typically required for countries with a postal code or an equivalent	✅
shipping[`countryCode`]	string	The 2-character ISO 3166-1 code that identifies the country or region	✅

config (Optional)

Name	Type	Description	Required?
paypalHeight	number	The height of the PayPal button. min: 25, max: 55	➖ Default:40
paypalColor	string	The theme colour of the PayPal button. one of gold, blue, white, black, sliver	➖ Default: blue
paypalShape	string	The shape of the PayPal button. one of pill, rect	➖ Default:pill

Sample

<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: {
        paymentInfo: {
              token: "< oauth token>",
              risk: {
                  currentService: "0469024567",
                  deviceFingerprint: "ABCDE12345",
                  ipAddress: "192.168.0.1",
                  parentAccount: "0469024567",
                  channel: "web",
                  merchantData: {"simNumber":"77666655555", "activationDate": "2022-05-01"}
                    },
              service: "shop",
              requestId:"test-paypal",
              amount: {
                            value: 25.00,
                            currency: "AUD"
                       },
              items: [  {
                            name: "iPhone",
                            quantity:"1",
                            description: "Online store order 1",
                            unitPrice: "12.00"
                        },
                        {
                            name: "Samsung",
                            quantity:"1",
                            description: "Online store order 2",
                            unitPrice: "13.00"
                        }
                     ],
              customer: {
                            givenNames: "Joe",
                            surname: "Consumer",
                            email: "[email protected]"
                        },
              shipping: {
                            name: "Joe Consumer",
                            line: "123 Fake Street",
                            area: "Melbourne",
                            region: "VIC",
                            postcode: "3000",
                            countryCode: "AU"
                        },

                           },
        config: {
          paypalShape: "rect",
          paypalHeight: 50,
          paypalColor: "silver",
                },
         },
     },
  "*"
);
   }
</script>
<body>
   <div id="payment" style="height: 400px" />
</body>

Receive messages from the 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");
}

Response messages from the iframe

Message Format

Successful responses will be returned in the Compact format

Example: {type: SUCCESS, value: {id: 'aaa', receiptId: '312456', token: '4CU64277MN5554947', amount: 12, currency: 'AUD'}

Values present in successful response

Name	Type	Present?	Description
id	string	✅	Uniquely identifies each pre-authorise attempt. This is generated by Afterpay system
receiptId	string	✅	identifier for the reservation made
token	string	✅	The unique identifier representing the customer's paypal order
amount	number	✅	The value of the funds to be transferred
currency	string	✅	The currency in which the transaction is to occur

Failed response

Example: FAILED {code: '99', message: 'Other error occurred.', method: 'POST', endPoint: '/v1/reservations'}

Values present in failed response

Name	Type	Present?	Description
code	numeric	✅	A number that maps to an error
message	string	✅	A human-readable message providing more details about the error
method	string	✅	HTTP method POST
endpoint	string	✅	endpoint information (v1/reservations)