> ## Documentation Index
> Fetch the complete documentation index at: https://telr-docs.cashfree.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customise Checkout

> Customize your checkout theme and

## Overview

The *Canvas* branding dashboard aims to enable you to customise every visual detail of all the components present in the checkout page to make it look like a true extension of your own platform. This helps in instilling trust in customers regarding the authenticity of the checkout page and makes the visual transition from your platform to checkout much smoother.

## How to customise the checkout page

Follow the instructions below to customise the checkout page from the dashboard:

1. Log in to the *Cashfree Payments* dashboard using your credentials.
2. Navigate to **Checkout One** > **Canvas** from the *Payment Gateway* dashboard, or navigate to **Settings** > **Branding**.

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/branding.jpg?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=526522718d47a6d70289e36c5a39336f" alt="" width="1893" height="968" data-path="static/payments/checkout/customize/branding.jpg" />

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/advancedcustomisation.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=91a450e7dccb87586be4f73c1113c052" alt="" width="1893" height="968" data-path="static/payments/checkout/customize/advancedcustomisation.webp" />

<br />

3. Customise the checkout page using the basic options, or click **Advanced Configuration** for more detailed customisation tailored to your specific needs.
4. Click **Save**.

Read the following to understand the Basic and Advanced options that help you fulfil your business needs.

***

## Basic configurations

Quick configuration option allows you to customise checkout with minimalist branding like adding their primary colour on checkout.\
Configurations available:

* **Logo**

Logo is a graphic mark used for a company's identification.

* **Primary Colour**

It is the most prominent colour for a company's identity. Headers, icons, call to action (CTAs), and all the clickable elements on the checkout page will displays this colour.

* **Text Colour**

It defines the colour of the text used on the headers. Note that the text along with the colour will display over the header colour.

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/basicconfig.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=0e1fc02eb29a1de0f0dd88d489daff77" alt="" width="1546" height="2116" data-path="static/payments/checkout/customize/basicconfig.webp" />

***

## Advanced configurations

Detailed configuration option allows you to customise checkout to match the exact visual styling of their platform\
Configurations available:

### Layout and Typography

You can configure the following options:

* Checkout page background colour
* Card style - full or medium sized
* Card colour
* Card border colour
* Card corner radius
* Primary text colour
* Secondary text colour
* Tertiary text colour

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/layout.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=f1cdc376944e988d4cf03f385955b462" alt="" width="1830" height="924" data-path="static/payments/checkout/customize/layout.webp" />

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/cardtype.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=fbaef3f732cdc238be8d02f2e57f94d1" alt="" width="2422" height="1848" data-path="static/payments/checkout/customize/cardtype.webp" />

***

### Header

You can configure the following options:

* Header colour
* Header text colour
* Header corner radius
* Logo

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/header.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=9507a6dde2e10cd6604715b688c84e73" alt="" width="866" height="439" data-path="static/payments/checkout/customize/header.webp" />

***

### Offers Banner

You can configure the following options:

* Offer banner style - card width or full width
* Banner background colour
* Banner border colour
* Banner corner radius
* Offers text colour

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/border.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=e8bb2627be0df1e7b49d9c0843baf3fa" alt="" width="1742" height="1164" data-path="static/payments/checkout/customize/border.webp" />

<br />

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/widthtype.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=fe5c98def1a79c835629e761f40ed8cc" alt="" width="2372" height="1794" data-path="static/payments/checkout/customize/widthtype.webp" />

***

### Input Fields

You can configure the following options:

* Input field style - underlined or enclosed
* Field corner radius
* Field background colour
* Field border colour

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/input.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=0606455550386c8dae3e610935f06d31" alt="" width="3404" height="3448" data-path="static/payments/checkout/customize/input.webp" />

<br />

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/fields.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=bbdc932972a886b36f7e035f2325856e" alt="" width="3042" height="1682" data-path="static/payments/checkout/customize/fields.webp" />

***

### Buttons

You can configure the following options:

* Primary button

  | Button Type | Configuration              |
  | :---------- | :------------------------- |
  | Active      | Button colour, text colour |
  | Disabled    | Button colour, text colour |

* Secondary button

  | Button Type | Configuration              |
  | :---------- | :------------------------- |
  | Active      | Border colour, text colour |
  | Disabled    | Border colour, text colour |

* Tertiary button

  | Button Type | Configuration |
  | :---------- | :------------ |
  | Active      | Text colour   |
  | Disabled    | Text colour   |

* Button shadow

* Button corner radius

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/buttons.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=9c23de59e7d95a8448d72f3f5e8958cb" alt="" width="2716" height="1114" data-path="static/payments/checkout/customize/buttons.webp" />

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/buttonex.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=8596996b8c9e899f4f46cb2014204886" alt="" width="3008" height="1214" data-path="static/payments/checkout/customize/buttonex.webp" />

### Icons

You can configure the following options:

* Icon style
* Icon colour

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/icons.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=c00f81a9eb5964c56186cdf0fc2bb6e2" alt="" width="3202" height="1806" data-path="static/payments/checkout/customize/icons.webp" />

<br />

### Tags

You can configure the following options:

* **Incident tag**- background colour, text colour
* **Delight tag** - background colour, text colour
* **Informational tag** - background colour, text colour
* **Tag corner radius**

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/tags.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=20a2345b77c829c05066070f47b7a21c" alt="" width="3128" height="3724" data-path="static/payments/checkout/customize/tags.webp" />

### Terminal State

You can configure the following options:

* Failure colour
* Success colour

<img src="https://mintcdn.com/telr/-uG3dVZ7IVYDmoy3/static/payments/checkout/customize/state.webp?fit=max&auto=format&n=-uG3dVZ7IVYDmoy3&q=85&s=dc5e388607af718ba53669850583a86f" alt="" width="2654" height="1806" data-path="static/payments/checkout/customize/state.webp" />

<br />