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)