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. Duck Creek understands this very well. Duck Creek Payments uses Theme templates to let you customize the colour, size, and layout of the Payments white-label solution that will be seen by your customers.

Before you Start

Before you start following this guide, you should understand the concepts related to the Payments application. You must also have access to the Tenant Portal and permission to set up a Theme.

How it works?

After you have saved a new Theme template that reflects your company's visual style, Payments will generate a themeid associated with the Theme template.
You will then use this themeid with Payments' 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 learn 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 instance of Payments and will appear in the Checkout theme page.
Click the button on the top-right corner of the page. The Add theme page appears.
On the page, you will find the following sections: General, Prompt, Header, Footer, Buttons, Input fields, Validation, and Preview. Refer to the table under the tabs below for more information on each section and their respective fields.

The General section allows you to manage information that applies to all the elements of the checkout component.

You can also apply customization at the individual element level. This customization will override the customization applied 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 color	Use the text box field next to this label to specify the hex code of the background color of the entire checkout component. Alternatively, you can also use the color picker control next to the text box to choose a desired color.
Font family	Use the dropdown box to select the font face for all the elements of the checkout component.
Text color	Use the text box field next to this label to specify the hex code of the text color of the entire checkout component. Alternatively, you can also use the color picker control next to the text box to choose a desired color.
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 the 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 Payments' 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 for an 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 and 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.