1. Theming

Merchants have the choice of customising the theme (colours of the components, typography...) to meet the specific needs of your business or brand.
This is achieved by sending theme and config options in JSON format together with the payment information right after the IFrame is loaded. The details are as follows:

window.postMessage(
{
  type: "PAYMENT_FORM_INFO",
  value: {
    config: {
      ...
    },
    theme: {
      ...
    },
    paymentInfo: {
      ...
    }
  }
},"*");

The theme parameter list (all are optional):

Name	Type	Description
type	string	`light` \| `dark` theme
color	string	The main colour of the form, which is used for buttons, borders and so on. `#nnn`, `#nnnn`, `#nnnnnn`, `#nnnnnnnn`, `rgb()`, `rgba()`, `hsl()`, `hsla()`
labelColor	string	Colour of focused input label text. Overrides colour for this element. Accepts the same formats as colour. Useful when color has insufficient contrast for text.
borderColor	string	Colour of the focus-state input border and shadow. Overrides colour for this element. Accepts the same formats as `color`.
buttonColor	string	Background colour of the button. Overrides colour for this element. Accepts the same formats as `color`.
buttonTextColor	string	Text colour of the button. Overrides the button text colour. Accepts the same formats as `color`. When omitted, the text colour is automatically calculated to contrast with the primary `color` value. Use alongside `buttonColor` for full control over button appearance and WCAG contrast compliance.
typography	object
typography[`fontFamily`]	string	list of font family separated by a comma `,`. Extra supported fonts: `Italianplate`, `Open Sans`, `Roboto`, `Chilanka`, `Mark Pro`
typography[`fontSize`]	number
typography[`letterSpacing`]	string	Letter spacing applied globally (e.g. `"0.05em")
typography[`wordSpacing`]	string	Word spacing applied globally (e.g. "0.1em")
typography[`lineHeight`]	string	Line height applied globally (e.g. "1.5")
button	object	contain style parameters for buttons
button[`radius`]	string \| number	add rounded corners to buttons
textfield	object	contain style parameters for textfields
textfield[`radius`]	string \| number	add rounded corners to textfields
textfield[`height`]	string \| number	set the height of the textfield
spacing	number	set the spacing between components

labelColor, borderColor, buttonTextColor and buttonColor each independently override color for their respective element. If omitted, color is used as the fallback.

Button text colour: By default, the button text colour is automatically calculated to provide contrast against the primary color. If you use buttonColor to override the button background, the text colour is still calculated against color, not buttonColor. Use buttonTextColor to explicitly set the button text colour for WCAG compliance when buttonColor differs significantly from color.

Example Payload (with override options):

{
  "theme": {
    "type": "light",
    "color": "#fdcc08",
    "labelColor": "#333333",
    "borderColor": "#0057a8",
    "buttonColor": "#1a1a1a",
    "buttonTextColor": "#ffffff",
    "typography": {
      "fontFamily": "Arial, sans-serif",
      "fontSize": 14
    }
  }
}

Config parameter list (all are optional):

Name	Type	Description
showCard	boolean	show/hide the card animation. Default: `false`
showLabel	boolean	show/hide the top label above the textfield. Default `false`
showStoreCard	boolean	show/hide the store card checkbox. Default `false` If showStoreCard is true, customer drives the decision to store card, make payment etc, else decision is controlled by Merchant. showStoreCard has precedence over tempToken and storeToken
showPay	boolean	show/hide the Pay button Default `true`
payButtonText	string	customise the Pay button text. Currently supported values: `pay` - Pay, `subscribe` - Subscribe, `recharge` - Recharge, `payNow` - Pay Now, `completeSetup` - Complete Set-up, `activate` - Activate, `next` - Next, `continue` - Continue
tempToken	boolean	store token for a certain time period and delete afterwards. (configured for 4 hours) tempToken flag has precedence over storeToken
storeToken	boolean	store token

2. Theming examples

Default styling without any customisation:

Hide card animation, show the store card checkbox and display the on-top label.

window.postMessage(
{
  type: "PAYMENT_FORM_INFO",
  value: {
    config: {
      showCard: false,
      showLabel: true,
      showStoreCard: true,
    },
    paymentInfo: {
      ...
    }
  }
},"*");

Use dark type, modify main color, border-radius...

window.postMessage(
{
  type: "PAYMENT_FORM_INFO",
  value: {
    config: {
        showCard: false,
        showLabel: true,
        showStoreCard: true,
    },
    theme: {
        type: "dark",
        color: "#facccc",
        typography: {
            fontFamily: "Chilanka",
            fontSize: 14,
        },
        button: {
            radius: 4,
        },
        textField: {
            radius: 4,
            height: "1.8em",
        },
        spacing: 8,
    }
  }
},"*");

3. Multiple languages - i18n

Merchants must pass along the locale query parameter of the IFrame URL if they wish to change the default locale en-AU.

Supported values: en-AU, en-NZ, en-US, en-GB, en-CA, fr-CA.

4. Merchant controlled decision

Merchant decides to store card temporarily

window.postMessage(
{
  type: "PAYMENT_FORM_INFO",
  value: {
    config: {
        showCard: false,
        showLabel: true,
        showStoreCard: false,
        tempToken: true, 
    },
    ........
},"*");

Merchant decides to store card

window.postMessage(
{
  type: "PAYMENT_FORM_INFO",
  value: {
    config: {
        showCard: false,
        showLabel: true,
        showStoreCard: false,
        tempToken: false, 
        storeToken: true,
    },
    ........
},"*");

5. Customer controlled decision

window.postMessage(
{
  type: "PAYMENT_FORM_INFO",
  value: {
    config: {
        showCard: false,
        showLabel: true,
        showStoreCard: true,
    },
    ........
},"*");