Customize your Flow integration

Last updated: October 14, 2026

After 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 change the text displayed in the UI, such as the text on the payment button, add a custom translation.

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 set the border width and color of each side of an input independently. The following optional tokens override the uniform borderWidth and colorFormBorder values for that 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 uses the uniform default, so existing integrations look the same.

To remove a border side, set its width token to '0px'. Avoid matching the border color to the page background instead, because the border still takes up layout space, breaks on non-solid backgrounds, and reappears on focus and error states.

In error and disabled states, Flow recolors every visible side. 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});

You can have the card component collect the customer's billing address. Use the following componentOptions.card options:

capturedBillingAddressFields – The billing address fields to collect.
requiredBillingAddressFields – The collected fields the customer must complete.

For the full list of options, see the CheckoutWebComponents reference.

Collect the country and zip code, and require both:


1const componentOptions = {
2  card: {
3    capturedBillingAddressFields: ['country', 'zip'],
4    requiredBillingAddressFields: ['country', 'zip']
5  }
6};

Collect the country and zip code, and require only the country:


1const componentOptions = {
2  card: {
3    capturedBillingAddressFields: ['country', 'zip'],
4    requiredBillingAddressFields: ['country']
5  }
6};

Collect the full address, and require every field:


1const componentOptions = {
2  card: {
3    capturedBillingAddressFields: ['country', 'address_line1', 'address_line2', 'city', 'state', 'zip'],
4    requiredBillingAddressFields: ['country', 'address_line1', 'address_line2', 'city', 'state', 'zip']
5  }
6};

Collect the full address, and require only the country, first address line, and zip code:


1const componentOptions = {
2  card: {
3    capturedBillingAddressFields: ['country', 'address_line1', 'address_line2', 'city', 'state', 'zip'],
4    requiredBillingAddressFields: ['country', 'address_line1', 'zip']
5  }
6};

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

Collect a billing address with the card component

Require a zip code

Make the zip code optional

Collect the full address

Make some address fields optional

Next steps

Flow library reference