Customize your Flow integration

Last updated: October 23, 2024

Once you've integrated Flow, you can customize the colors, fonts, and borders of the various UI elements to match your website design.

To customize the properties:

Create an appearance object and include the color, font, or border keys you want to customize, along with their values. For example:


1const appearance = {
2  colorAction: '#5E48FC',
3  colorBackground: '#0A0A0C',
4  colorBorder: '#68686C',
5  colorDisabled: '#64646E',
6  colorError: '#FF3300',
7  colorFormBackground: '#1F1F1F',
8  colorFormBorder: '#1F1F1F',
9  colorInverse: '#F9F9FB',
10  colorOutline: '#ADA4EC',
11  colorPrimary: '#F9F9FB',
12  colorSecondary: '#828388',
13  colorSuccess: '#2ECC71',
14  button: {
15    fontFamily: '"Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',
16    fontSize: '16px',
17    fontWeight: 700,
18    letterSpacing: 0,
19    lineHeight: '24px',
20  },
21  footnote: {
22    fontFamily: '"PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',
23    fontSize: '14px',
24    fontWeight: 400,
25    letterSpacing: 0,
26    lineHeight: '20px',
27  },
28  label: {
29    fontFamily: '"Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',
30    fontSize: '14px',
31    fontWeight: 400,
32    letterSpacing: 0,
33    lineHeight: '20px',
34  },
35  subheading: {
36    fontFamily: '"Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',
37    fontSize: '16px',
38    fontWeight: 700,
39    letterSpacing: 0,
40    lineHeight: '24px',
41  },
42  borderRadius: ['8px', '8px'],
43};

Create a componentOptions object and include the customization options for the individual components you want to modify:


1{
2  componentOptions: {
3    card: {
4      data: {
5        cardholderName: 'Jia Tsang'
6      },
7      displayCardholderName: 'top'
8    }
9  }
10}

Pass the appearance and componentOptions objects when you create the instance of CheckoutWebComponents.


1const checkout = await CheckoutWebComponents({
2  paymentSession,
3  publicKey,
4  environment: 'sandbox',
5  appearance,
6  componentOptions,
7});

You can customize the color of the following UI elements:

To customize an element, provide a CSS color value to any of the following keys:

Key	Format
`colorAction`	`"#RRGGBB"`
`colorBackground`	`"#RRGGBB"`
`colorBorder`	`"#RRGGBB"`
`colorDisabled`	`"#RRGGBB"`
`colorError`	`"#RRGGBB"`
`colorFormBackground`	`"#RRGGBB"`
`colorFormBorder`	`"#RRGGBB"`
`colorInverse`	`"#RRGGBB"`
`colorOutline`	`"#RRGGBB"`
`colorPrimary`	`"#RRGGBB"`
`colorSecondary`	`"#RRGGBB"`

To make Flow use the same fonts as your website, use web fonts and set the font family names in the fontFamily key.

Information

Custom web fonts are not supported in card detail input fields. To ensure consistency across all UI elements, provide web safe fonts and default fonts as a fallback.

Use the following properties to modify the fonts for specific UI elements:

Property	Type
`button`	`font`
`footnote`	`font`
`input`	`font`
`label`	`font`
`subheading`	`font`

You can modify the following sub-properties of each font property:

Property	Type	Example
`fontFamily`	`string`	`-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif`
`fontSize`	`number` or `string`	`14px`
`fontWeight`	`number`	`600`
`letterSpacing`	`number` or `string`	`1px`
`lineHeight`	`number` or `string`	`1.5`

Information

To modify the text displayed in the UI, add a custom translation. For example, to change the text displayed within the payment button.

Use the following properties to modify the borders for specific UI elements:

Property	Type	Example
`borderRadius`	An `Array` of two `string` or `number` values.	`["4px", "8px"]`

You can customize options for the individual Flow components using the componentOptions object. For example, you can change the position of the cardholder field in the card component:


1{
2  componentOptions: {
3    card: {
4      data: {
5        cardholderName: 'Jia Tsang'
6      },
7      displayCardholderName: 'top'
8    }
9  }
10}

Component key Description

Component key	Description
`card.data.cardholderName`	Allows you to pre-fill the cardholder name.
`card.displayCardholderName`	Specifies the position of the cardholder name field, using one of the following values: `top` – the field will be positioned above all other fields `bottom` – the field will be positioned below all other fields `hidden` – the field will not be displayed

card.data.cardholderName

Allows you to pre-fill the cardholder name.

card.displayCardholderName

Specifies the position of the cardholder name field, using one of the following values:

top – the field will be positioned above all other fields
bottom – the field will be positioned below all other fields
hidden – the field will not be displayed

Flow library reference

See the configuration options and error handling steps for Flow.

Customize your Flow integration

Color keys

Font keys

Information

Information

Border keys

Component options

Next steps

Flow library reference