# Customize your Flow integration

After you've [integrated Flow](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/get-started-with-flow.md), you can customize the colors, fonts, and borders of the various UI elements to match your website design.

To customize the properties:

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

```javascript
const appearance = {
  colorAction: '#5E48FC',
  colorBackground: '#0A0A0C',
  colorBorder: '#68686C',
  colorDisabled: '#64646E',
  colorError: '#FF3300',
  colorFormBackground: '#1F1F1F',
  colorFormBorder: '#1F1F1F',
  colorInverse: '#F9F9FB',
  colorOutline: '#ADA4EC',
  colorPrimary: '#F9F9FB',
  colorSecondary: '#828388',
  colorSuccess: '#2ECC71',
  button: {
    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',
    fontSize: '16px',
    fontWeight: 700,
    letterSpacing: 0,
    lineHeight: '24px',
  },
  footnote: {
    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',
    fontSize: '14px',
    fontWeight: 400,
    letterSpacing: 0,
    lineHeight: '20px',
  },
  label: {
    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',
    fontSize: '14px',
    fontWeight: 400,
    letterSpacing: 0,
    lineHeight: '20px',
  },
  subheading: {
    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',
    fontSize: '16px',
    fontWeight: 700,
    letterSpacing: 0,
    lineHeight: '24px',
  },
  borderRadius: ['8px', '8px'],
};
```

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

```javascript
{
  componentOptions: {
    card: {
      data: {
        cardholderName: 'Jia Tsang'
      },
      displayCardholderName: 'top'
    }
  }
}
```

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

```javascript
const checkout = await CheckoutWebComponents({
  paymentSession,
  publicKey,
  environment: 'sandbox',
  appearance,
  componentOptions,
});
```

---

## Color keys

You can customize the color of the following UI elements:

**Main UI**

![The main Flow UI with the customizable color keys highlighted.](https://www.checkout.com/docs/NAS/Flow/Flow_UI_color_keys.png)

**Radio element**

![The Flow radio element with the customizable color keys highlighted.](https://www.checkout.com/docs/NAS/Flow/Flow_web_elements_radio_color_keys.png)

**Checkbox element**

![The Flow checkbox element with the customizable color keys highlighted.](https://www.checkout.com/docs/NAS/Flow/Flow_web_elements_checkbox_color_keys.png)

**Input field**

![The Flow input field with the customizable color keys highlighted.](https://www.checkout.com/docs/NAS/Flow/Flow_web_elements_input_colors.png)

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"` |

---

## Font keys

To make Flow use the same fonts as your website, use [web fonts](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/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](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#web_safe_fonts) and [default fonts](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#default_fonts) as a fallback.

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

![The main Flow UI with the customizable font keys highlighted.](https://www.checkout.com/docs/NAS/Flow/Flow_UI_font_keys.png)

| 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](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/add-localization-to-your-flow-integration.md#Add_custom_translations).

---

## Border keys

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

![The main Flow UI with the customizable border keys highlighted.](https://www.checkout.com/docs/NAS/Flow/Flow_UI_border_keys.png)

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

### Per-side border tokens

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:

```javascript
const checkout = await CheckoutWebComponents({
  publicKey,
  paymentSession,
  appearance: {
    borderWidthTop: '0px',
    borderWidthRight: '0px',
    borderWidthLeft: '0px',
    borderWidthBottom: '1px',
    colorFormBorderBottom: '#000000',
  },
});
```

---

## Collect a billing address with the card component

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](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference/checkoutwebcomponents.md).

### Require a zip code

Collect the country and zip code, and require both:

```javascript
const componentOptions = {
  card: {
    capturedBillingAddressFields: ['country', 'zip'],
    requiredBillingAddressFields: ['country', 'zip']
  }
};
```

### Make the zip code optional

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

```javascript
const componentOptions = {
  card: {
    capturedBillingAddressFields: ['country', 'zip'],
    requiredBillingAddressFields: ['country']
  }
};
```

### Collect the full address

Collect the full address, and require every field:

```javascript
const componentOptions = {
  card: {
    capturedBillingAddressFields: ['country', 'address_line1', 'address_line2', 'city', 'state', 'zip'],
    requiredBillingAddressFields: ['country', 'address_line1', 'address_line2', 'city', 'state', 'zip']
  }
};
```

### Make some address fields optional

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

```javascript
const componentOptions = {
  card: {
    capturedBillingAddressFields: ['country', 'address_line1', 'address_line2', 'city', 'state', 'zip'],
    requiredBillingAddressFields: ['country', 'address_line1', 'zip']
  }
};
```

---

## Next steps

**[Flow library reference](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/flow-library-reference.md)**

See the configuration options and error handling steps for Flow.