This section explains how to customise the Payment Form to better align with your brand and user experience requirements.

You can control the visual appearance of the Payment Form using the optional formStyle configuration when rendering the form on your checkout page.

Supported browsers

The Payment Form is designed to meet high security and performance standards.

It is fully supported on all major modern browsers that are actively maintained and receive security updates, including:

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Opera
• Safari

Lite Customization

Lite customization allows you to adjust basic visual elements such as colors and fonts, ensuring alignment with your brand identity without impacting the standard Payment Form behaviour.

This customization is applied entirely on the frontend and does not impact backend processing or transaction validation.

To apply these customizations, include the spg-style attribute when defining the Payment Form in Step 2.

How to apply formStyle

</>HTML

<form class="paymentSPG"
      spg-context="{formContext}"
      spg-config="{formConfig}"
      spg-style='{formStyle}'>
</form>

The formStyle attribute is a JSON string that defines the visual configuration of the Payment Form.

This configuration is optional and only affects the presentation layer.

Ensure that the value provided in spg-style is a valid JSON string.

formStyle Structure (Example)

Below is a complete example of a formStyle configuration:

</> JSON

{
  "layout": "default",
  "theme": "default",
  "color": {
    "primary": "#FF5733",
    "secondary": "",
    "border": "#CCCCCC",
    "surface": "#FFFFFF",
    "header": {
      "text": "payment",
      "background": ""
    },
    "body": {
      "text": "#333333",
      "background": ""
    }
  },
  "font": "Arial"
}

formStyle parameters

Parameter	Type	Example	Description
layout	string	“default”	Defines the layout structure of the Payment Form
theme	string	“default”	Defines the visual theme applied to the form (default, light, grey, dark)
color.primary	string	“#ff0000”	Primary color used for buttons and highlights
color.secundary	string	“#ffffff”	Secondary color used in supporting UI elements
color.border	string	“#cccccc”	Border color of form elements
color.surface	string	“#ffffff”	Background color of the form container
color.header.text	string	“#000000”	Header text color
color.header.background	string	“#ffffff”	Header background color
color.body.text	string	“#000000”	Default text color
color.body.background	string	“#ffffff”	Background color of the form body
font	string	“Arial”	Font family used in the Payment Form

Visual Example

Below is an example illustrating how different style configurations impact the Payment Form appearance.

Full customization (white label)

Full customization (white label) allows you to further tailor the Payment Form and related user experience to fully align with your brand.

This option enables a more advanced level of customization, including both the Payment Form interface and the communication sent to customers.

Two levels of customization are available:

• Level 1: Payment Form – customize the look and feel of the payment interface
• Level 2: Payment Form and Outgoing Messages – extend customization to customer communications and messaging.

Full customization is typically enabled as part of a dedicated configuration and may require coordination with SIBS teams.

For more details, please refer to the dedicated Full Customization documentation.