This page provides an overview of the available customization options that allow you to modify and personalize the Payment Form, empowering you to enhance your customers’ experience.
Supported browsers
The Payment Form is a payment service of utmost importance and demands the latest security measures. As a result, we endorse all major web browsers that are still receiving official security updates and are actively maintained, such as:
Lite customization
Adjust the page colors and font to your desired specifications to align with your brand scheme.
To achieve this, you should incorporate the {formStyle} when creating the payment form.
formStyle -> spg-style=”{formStyle}”
"transaction": {
"layout": 'default',
"theme": 'default',
"color": {
"primary": "",
"secondary": "",
"border": "",
"surface": "",
"header": {
"text": "",
"background": ""
},
"body": {
"text": "",
"background": ""
}
},
"font": ""
}The attribute attr.spg-style is a JSON string, optional allowing you to customize the payment form:
| Parameter | Type | Possible values (examples) | Default | Description |
|---|---|---|---|---|
| layout | String | ‘default’, ‘accordion’, ‘list’ | ‘default’ | Form layout. |
| theme | String | ‘default’, ‘light’, ‘dark’, ‘grey’ | ‘default’ | Form theme. |
| color.primary | String | ‘#ff0000’ | – | Primary color in hexadecimal. |
| color.secondary | String | ‘#ff0000’ | – | Secondary color in hexadecimal. |
| color.border | String | ‘#ff0000’ | – | Border color in hexadecimal. |
| color.surface | String | ‘#ff0000’ | – | Surface color in hexadecimal – surface is the ‘main background’ of the html page. |
| color.header.text | String | ‘#ff0000’ | – | Card Header Text Color in Hexadecimal. |
| color.header.background | String | ‘#ff0000’ | – | Card Header Color in Hexadecimal. |
| color.body.text | String | ‘#ff0000’ | – | Color in Hexadecimal of the Text in the Background. |
| color.body.background | String | ‘#ff0000’ | – | Background Color in Hexadecimal – the background color used for payment cards. |
| font | String | ‘Times New Roman’ | – | Font Family used. |
You can find below a visual example of different colors being applied to the payment form.
Full customization (white label)
To take customization to the next level and ensure perfect alignment with your brand’s design, the full customization option offers numerous advantages.