Customize your Flow integration
Last updated: July 10, 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 = {2colorAction: '#5E48FC',3colorBackground: '#0A0A0C',4colorBorder: '#68686C',5colorDisabled: '#64646E',6colorError: '#FF3300',7colorFormBackground: '#1F1F1F',8colorFormBorder: '#1F1F1F',9colorInverse: '#F9F9FB',10colorOutline: '#ADA4EC',11colorPrimary: '#F9F9FB',12colorSecondary: '#828388',13colorSuccess: '#2ECC71',14button: {15fontFamily: '"Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',16fontSize: '16px',17fontWeight: 700,18letterSpacing: 0,19lineHeight: '24px',20},21footnote: {22fontFamily: '"PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',23fontSize: '14px',24fontWeight: 400,25letterSpacing: 0,26lineHeight: '20px',27},28label: {29fontFamily: '"Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',30fontSize: '14px',31fontWeight: 400,32letterSpacing: 0,33lineHeight: '20px',34},35subheading: {36fontFamily: '"Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',37fontSize: '16px',38fontWeight: 700,39letterSpacing: 0,40lineHeight: '24px',41},42borderRadius: ['8px', '8px'],43};
- Create a
componentOptions
object and include the customization options for the individual components you want to modify:
1const componentOptions = {2componentOptions: {3card: {4data: {5cardholderName: 'Jia Tsang'6},7displayCardholderName: 'top'8}9}10}
- Pass the
appearance
andcomponentOptions
objects when you create the instance ofCheckoutWebComponents
.
1const checkout = await CheckoutWebComponents({2paymentSession,3publicKey,4environment: 'sandbox',5appearance,6componentOptions,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 |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 inputs. 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 |
---|---|
|
|
|
|
|
|
|
|
|
|
You can modify the following sub-properties of each font property:
Property | Type | Example |
---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Use the following properties to modify the borders for specific UI elements:
Property | Type | Example |
---|---|---|
| An |
|
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{2componentOptions: {3card: {4data: {5cardholderName: 'Jia Tsang'6},7displayCardholderName: 'top'8}9}10}
Component key | Description |
---|---|
| Allows you to pre-fill the cardholder name. |
| Specifies the position of the cardholder name field, using one of the following values:
|