Customize Checkout Page's Theme

We recommend that you use the sandbox environment for accessing the Tenant portal, if you are trying to customize checkout page's Theme for the first time.

When you want to reach out to your customers for something as significant as their financial information, you would not want to overlook the branding of your company or organization. And Imburse understands this very well. The Imburse platform uses Theme templates to let you customize the colour, size, and layout of the Imburse white-label solution that will be seen by your customers.

Before you Start

Before you start following this guide, we assume that you understand the concepts related to the Imburse platform. We also assume that you have access to the Tenant Portal and permission to set up Theme.

How it works?

After you have saved a new Theme template that reflects your company's visual style, the Imburse platform will generate a themeid associated with the Theme template.
You will then use this themeid with the Imburse platform's checkout components.
Before your customers are presented with the checkout component, the visual style associated with the themeid will automatically apply and visually customized checkout screen will be shown to your customers.

Follow this guide to the end to see how to customize the Theme of your checkout component.

How to Customize Checkout Page's Theme?

Login to the Tenant Portal.
Select Theming under Developers menu from the left sidebar. The Checkout theme page appears with a list of all the created Theme templates (if any).

A predefined Theme template is shipped with your copy of the Imburse platform and will appear in the Checkout theme page.
Click the button on the top-right corner of the page. The Add theme page appears.
In the page, you will find 8 sections - General, Prompt, Header, Footer, Buttons, Input fields, Validation, and Preview. Refer to the table under the tabs below for more information on each sections and their respective fields.

The General section holds information that applies to all the elements of the checkout component.

You can also apply customization at individual element level. In that case, the customization done at the individual element level will override the customization done using General settings.

Field	Description
Name	Enter a unique name for the Theme template.
Default theme	Enable this button to make this Theme template a Default Theme template. If a Theme is marked as Default, that Theme template will be used in case the Theme ID is not provided for the checkout component.
Description	A free-form text field that lets you add additional information on top of the checkout component. You can use this field to add a welcome message or any information that might be useful to your customers.
Background colour	Use the text box field next to this label to specify the hex code of the background colour of the entire checkout component. Alternatively, you can also use the colour picker control next to the text box to choose a desired colour.
Font family	Use the dropdown box to select the font face for all the elements of the checkout component.
Text colour	Use the text box field next to this label to specify the hex code of the text colour of the entire checkout component. Alternatively, you can also use the colour picker control next to the text box to choose a desired colour.
Text size	Hold and drag the slider control to increase (or decrease) the size of the text in the entire checkout component.

Click the Save button at the bottom of the page. A slide-in banner on the top of the page will notify that the Theme template has been created and the Edit theme page will appear.

A new field, Theme ID, will also appear on the page with randomly generated value next it. You must specify this value whenever you want to use a this Theme template with our whitelabel services.

How to Use the Theme Template with the Whitelabel Solution?

Whether you are creating a session token or a pay-by-link object, you will need to make a call to Imburse's Whitelabel solution API. All the endpoints within the Whitelabel solution will have a property named themeid.

You will have to assign the value of Theme ID displayed at the end of Theme template creation process to the property to start using the desired Theme template with the Whitelabel solution.

An example of the request body with themeID property is shown below.

Copy

Copied

{
  "orderRef": "order-ref-345634",
  "instructionRef": "instruction-ref-67445645",
  "expirySeconds": 500,
  ...
  "themeId": "8BB3BCDB-A0EB-4328-8C92-E596E3D7A63C"
}

You can leave the themeid property as blank. However, the default Theme template will automatically be applied to the Whitelabel solution in such case.

Troubleshooting

The correct Theme template is not applied to the checkout component.

There could be multiple reasons behind incorrect Theme template. Some of the common reasons are:

You have not set the themeid property with the correct Theme template ID.
You have left the themeid property blank hence the Imburse platform applied the default Theme template.
The Theme template that you have marked as default is different from the Theme template you wanted to use.

If either of the above reasons don't address your issue, please contact your Implementation Manager or Account Manager.

I want to modify a Theme template.

Follow the steps below to remove a Theme template.

Select Theming under Developers menu from the left sidebar. The Checkout theme page appears with a list of all the created Theme templates (if any).
Click on the Edit button next to the name of the Theme template. The Edit theme page appears.
Make necessary changes and click the Save button at the bottom of the page.
A slide-in banner on the top of the page will notify that the changes to the Theme template has been saved.

I want to remove a Theme template.

You can't remove a default theme template. You can easily identify a default theme template; they will always have a Default label next to their names.

Follow the steps below to remove a Theme template.

Select Theming under Developers menu from the left sidebar. The Checkout theme page appears with a list of all the created Theme templates (if any).
Click on the Delete button next to the name of the Theme template. When prompted, click on Yes, delete.
A slide-in banner on the top of the page will notify that the Theme template has been removed successfully.