Customize your Flow integration

Last updated: August 12, 2026

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"`
`colorSuccess`	`"#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 control the border width and color of each side of an input independently. The following optional tokens override the uniform borderWidth and colorFormBorder values for the specified side:

Token	Type	Example
`borderWidthTop`	CSS length	`'1px'`
`borderWidthRight`	CSS length	`'1px'`
`borderWidthBottom`	CSS length	`'1px'`
`borderWidthLeft`	CSS length	`'1px'`
`colorFormBorderTop`	CSS color	`'#000000'`
`colorFormBorderRight`	CSS color	`'#000000'`
`colorFormBorderBottom`	CSS color	`'#000000'`
`colorFormBorderLeft`	CSS color	`'#000000'`

These tokens apply to text inputs (such as billing address fields and cardholder name), secure card fields (card number, expiry date, and CVV), and selects (such as the country picker). They do not apply to checkboxes, radio buttons, the one-time-passcode field, or the open dropdown list.

Any token you leave unset inherits the uniform default, so existing integrations render exactly as before.

To remove a border side, set its width token to '0px'. Matching the border color to the page background is not equivalent: the border still occupies layout space, breaks on non-solid backgrounds, and reappears on focus and error states.

On error and disabled states, Flow recolors every visible side accordingly; zero-width sides stay hidden.

The following example produces an underline-style form with a bottom border only:


1const checkout = await CheckoutWebComponents({
2  publicKey,
3  paymentSession,
4  appearance: {
5    borderWidthTop: '0px',
6    borderWidthRight: '0px',
7    borderWidthLeft: '0px',
8    borderWidthBottom: '1px',
9    colorFormBorderBottom: '#000000',
10  },
11});

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

Per-side border tokens

Next steps

Flow library reference