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