Messaging

Send messages to the iframe

After the iframe is loaded, you can post a PAYMENT_FORM_INFO message to the iframe including the authorization token, payment information, and configurations for Afterpay button.

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

Parameter list:

paymentInfo (Required)

Name	Type	Description	Compulsory
token	string	Authentication token	✅
requestId	string	Unique identifier for verification request provided by merchant	✅
amount	number	The total amount of funds to be transferred.	✅
consumer	object	Consumer’s name and email	✅
shipping	object	Consumer’s shipment details	✅
merchant	object	The consumer is redirected to this URL if the payment process is confirmed or cancelled, however we use the Popup Method to implement in our case, not use the Redirect Method. However, merchant object as mandatory in checkout API /v1-paylater in the backend so that for Frontend to keep merchant object in PayLaterRequest as optional in model if the field is still in the backend, but remove it from paymentInfoSchema	➖ Default: blue
merchantReference	string	The merchant’s id/reference that this order corresponds to	✅

Sample

frame.contentWindow.postMessage(
{
    type: "PAYMENT_FORM_INFO",
    value: {
        paymentInfo: {
            token: "<token>",
            requestId: "<requestID>",
            amount: {
              amount: "100.00",
              currency: "AUD",
            },
            consumer: {
              givenNames: "Joe",
              surname: "Consumer",
              email: "[email protected]",
            },
            shipping: {
              name: "Joe Consumer",
              line1: "123 Fake Street",
              area1: "Melbourne",
              region: "VIC",
              postcode: "3000",
              countryCode: "AU"
            },
            merchantReference: "<merchantID>",
        },
      },
    },
    "*"
);

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");
}

Successful payment
You will receive a SUCCESS message from the iframe when Afterpay successfully finalized the payment.

Messages responses: There are data responses as below which are captured after clicking the Afterpay button via our Iframe and loading and opening the Afterpay ScreenFlow in a new browser window.

This endpoint performs a payment capture for the full value of the payment plan. If payment is approved by Afterpay, returns a Payment object in response, with a status of "APPROVED".

Capture Full Payment response data with APPROVED status details example after the user clicks confirm button via the Afterpay ScreenFlow Popup window:

{
  "id": "25144481",
  "token": "001.ecdp1h56dvobm8dkpledtcm43phmqpk96207bpfjfd09443t",
  "status": "APPROVED",
  "created": "2022-07-06T01:02:01.950Z",
  "originalAmount": {
    "amount": "100.00",
    "currency": "AUD"
  },
  "openToCaptureAmount": {
    "amount": "0.00",
    "currency": "AUD"
  },
  "paymentState": "CAPTURED",
  "merchantReference": "merchantID456789",
  "refunds": [],
  "orderDetails": {
    "consumer": {
      "phoneNumber": "",
      "givenNames": "Joe",
      "surname": "Consumer",
      "email": "[email protected]"
    },
    "billing": {
      "name": "Joe Consumer",
      "line1": "123 Fake Street",
      "postcode": "0000"
    },
    "shipping": {
      "name": "Joe Consumer",
      "line1": "123 Fake Street",
      "postcode": "0000"
    },
    "courier": {},
    "items": [],
    "discounts": [],
    "shippingAmount": {
      "amount": "100.00",
      "currency": "AUD"
    },
    "taxAmount": {
      "amount": "100.00",
      "currency": "AUD"
    }
  },
  "events": [
    {
      "id": "2BY4RlhFLPRFpALWEheGSSjOWbg",
      "created": "2022-07-06T01:07:58.476Z",
      "expires": null,
      "type": "CAPTURED",
      "amount": {
        "amount": "100.00",
        "currency": "AUD"
      },
      "paymentEventMerchantReference": null
    }
  ]
}

Failed payment

Iframe parent window will receive a FAILED message from the iframe when Afterpay encounters errors while finalizing the payment. If payment is declined by Afterpay, for example, if invalid card details were entered, returns a Payment object in response, with a status of "DECLINED".