The ui_config object allows you to customize the look and feel of the Hosted Checkout page.
You can set these fields as a default for your business using the Set Business Configuration endpoint, or override them for a single session in the Create a Payment Session request.
All color fields accept 6-digit hex codes (e.g., #FFFFFF).
Example ui_config Object
{
"branding": {
"brand_color": "#0A2540",
"brand_color_text": "#FFFFFF",
"secondary_brand_color": "#F0F0F0",
"secondary_brand_color_text": "#0A2540"
},
"theme": {
"shapes": "rounded",
"background_color": "#FDFDFD",
"form_background_color": "#FFFFFF",
"text_color": "#333333",
"error_color": "#D92D20"
},
"labels": {
"submit_button": "Pay Now",
"card_number": "Card Number",
"expiry_date": "MM/YY",
"cvc": "CVC"
}
}
branding
Colors related to your brand, used for buttons and highlights.
| Field | Type | Description |
|---|
| brand_color | string | Main brand color. Used for the submit button. |
| brand_color_text | string | Text color to display on top of brand_color. |
| secondary_brand_color | string | Secondary color. Used for links or minor buttons. |
| secondary_brand_color_text | string | Text color to display on top of secondary_brand_color. |
theme
General theme of the checkout page, including shapes and background colors.
| Field | Type | Description |
|---|
| shapes | string | Sets the border radius for buttons and form fields. Options: sharp (0px) or rounded (default, e.g., 8px). |
| background_color | string | The main background color of the page. |
| form_background_color | string | The background color of the payment form container. |
| text_color | string | The primary color for all text labels. |
| error_color | string | The color used for form validation errors. |
labels
Custom text for form fields and buttons.
| Field | Type | Description |
|---|
| submit_button | string | Text for the main payment submission button (e.g., “Pay”, “Complete Order”). |
| card_number | string | Placeholder label for the card number field. |
| expiry_date | string | Placeholder label for the card expiration date field. |
| cvc | string | Placeholder label for the CVC/CVV field. |
