Customize Flow for mobile
Beta

Last updated: April 23, 2025

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

To customize the properties:

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


1val designTokens = DesignTokens(
2  colorTokens = ColorTokens(
3    colorAction = 0XFF00CC2D,
4    colorBackground = 0xFF17201E,
5    colorBorder = 0XFF00CC2D,
6    colorDisabled = 0XFFBBFFB9,
7    colorPrimary = 0XFFB1B1B1,
8    colorFormBackground = 0XFF24302D,
9    colorFormBorder = 0XFFB1B1B1,
10    colorInverse = 0xFFFFFFFF,
11    colorOutline = 0XFFB1B1B1,
12    colorSecondary = 0XFF000000,
13    colorSuccess = 0XFF00CC2D,
14    colorError = 0XFFFF0000,
15    colorScrolledContainer = 0XFFE8E6E6
16  ),
17  borderRadius = BorderRadius(
18    all = 20,
19  ),
20  borderFormRadius = BorderRadius(
21    all = 20,
22  ),
23  fonts = mapOf(
24    FontName.Subheading to Font(
25      fontStyle = FontStyle.Italic,
26      fontWeight = FontWeight.ExtraBold,
27      fontFamily = FontFamily.Monospace,
28      letterSpacing = 2,
29      lineHeight = 2,
30    ),
31    FontName.Input to Font(
32      fontStyle = FontStyle.Italic,
33      fontWeight = FontWeight.ExtraBold,
34      fontFamily = FontFamily.Monospace,
35      letterSpacing = 2,
36      lineHeight = 2,
37    ),
38    FontName.Button to Font(
39      fontStyle = FontStyle.Italic,
40      fontWeight = FontWeight.ExtraBold,
41      fontFamily = FontFamily.SansSerif,
42      letterSpacing = 2,
43      lineHeight = 2,
44    ),
45    FontName.Label to Font(
46      fontStyle = FontStyle.Normal,
47      fontWeight = FontWeight.Light,
48      fontFamily = FontFamily.Cursive,
49      letterSpacing = 2,
50      lineHeight = 2,
51    ),
52  ),
53)


1let colorTokens: CheckoutComponents.ColorTokens = .init(
2      action: Color(hex: "#FFFF00"),
3      background: Color(hex: "#17201E"),
4      border: Color(hex: "#00CC2D"),
5      disabled: Color(hex: "#BBFFB9"),
6      error: Color(hex: "#FF0000"),
7      formBackground: Color(hex: "#24302D"),
8      formBorder: .white,
9      inverse: .black,
10      outline: Color(hex: "#B1B1B1"),
11      primary: Color(hex: "#B1B1B1"),
12      secondary: .white,
13      success: Color(hex: #00856A)
14    )
15    
16    let customFont: CheckoutComponents.Font = .init(
17      font: .custom("HelveticaNeue-Bold", size: 20),
18      lineHeight: 2,
19      letterSpacing: 2
20    )
21
22 let designTokens: CheckoutComponents.DesignTokens = .init(
23      colorTokensMain: colorTokens,
24      fonts: .init(
25        button: customFont,
26        footnote: customFont,
27        input: customFont,
28        label: customFont,
29        subheading: customFont
30      ),
31      borderButtonRadius: .init(
32        radius: 5,
33        corners: [
34          .topLeft,
35          .bottomRight]
36      ),
37      borderFormRadius: .init(
38        radius: 20,
39        corners: [
40          .topLeft,
41          .topRight]
42      )
43    )

Pass the designTokens when you create the configuration instance:


1val configuration = CheckoutComponentConfiguration(
2   context = context,
3   paymentSession = paymentSession,
4   publicKey = publicKey,
5   environment = environment,
6   appearance = designTokens,
7)


1let configuration = try await CheckoutComponents.Configuration(
2  paymentSession: paymentSession,
3  publicKey: publicKey,
4  environment: environment,
5  appearance: designTokens,
6  callbacks: callbacks
7)

You can customize the color of the following UI elements:

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

Key	Format
`colorAction`	`0xAARRGGBB`
`colorBackground`	`0xAARRGGBB`
`colorBorder`	`0xAARRGGBB`
`colorDisabled`	`0xAARRGGBB`
`colorError`	`0xAARRGGBB`
`colorFormBackground`	`0xAARRGGBB`
`colorFormBorder`	`0xAARRGGBB`
`colorInverse`	`0xAARRGGBB`
`colorOutline`	`0xAARRGGBB`
`colorPrimary`	`0xAARRGGBB`
`colorSecondary`	`0xAARRGGBB`
`colorSuccess`	`0xAARRGGBB`
`colorScrolledContainer`	`0xFFE8E6E6L`

Key	Default value
`colorAction`	`#186AFF`
`colorBackground`	`#FFFFFF`
`colorBorder`	`#DDDDDD`
`colorDisabled`	`#B0B0B0`
`colorError`	`#AD283E`
`colorFormBackground`	`#FFFFFF`
`colorFormBorder`	`#949494`
`colorInverse`	`#FFFFFF`
`colorOutline`	`#91B2EE`
`colorPrimary`	`#000000`
`colorSecondary`	`#727272`
`colorSuccess`	`#00856A`

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

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

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

Property	Default value
`button`	`CheckoutComponents.Font(font: .body, lineHeight: 8, letterSpacing: 0)`
`input`	`CheckoutComponents.Font(font: .body, lineHeight: 4, letterSpacing: 0)`
`label`	`CheckoutComponents.Font(font: .body, lineHeight: 6, letterSpacing: 0)`
`footnote`	`CheckoutComponents.Font(font: .footnote, lineHeight: 6, letterSpacing: 0)`
`subheading`	`CheckoutComponents.Font(font: .subheadline.weight(.semibold), lineHeight: 4, letterSpacing: 0)`

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

Property	Type	Example
`fontFamily`	`FontFamily`	`FontFamily.Monospace` `FontFamily.FontFamily.Custom(semiBold = R.font.cko_roboto_semi_bold)`
`fontSize`	`Int`	`12`
`fontWeight`	`FontWeight`	`FontWeight.Normal` `FontWeight.Medium`
`letterSpacing`	`Int?`	`20`
`lineHeight`	`Int?`	`20`

Property	Type	Example
`font`	`SwiftUI.Font`	`.custom("HelveticaNeue-Bold", size: 20)`
`letterSpacing`	`CGFloat`	`2`
`lineHeight`	`CGFloat`	`2`

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	Default value
`borderFormRadius`	`BorderRadius`	`BorderRadius(all=4)`
`borderButtonRadius`	`BorderRadius`	`BorderRadius(all=4)`

Property	Type	Default value
`borderFormRadius`	`BorderRadius`	`.init(radius: 4, corners: .allCorners)`
`borderButtonRadius`	`BorderRadius`	`.init(radius: 4, corners: .allCorners)`

You can customize options for the individual Flow components using the componentOptions object.


1/**
2 * Options for configuring the behavior of a payment method component, which overrides the default configuration.
3 *
4 * @property showPayButton Indicates whether the pay button should be displayed for this payment method.
5 * @property callback Callback functions for handling events in the component.
6 * @property paymentButtonAction The action to perform when the customer taps the pay button.
7 */
8public data class ComponentOption(
9    val showPayButton: Boolean? = true,
10    val callback: ComponentCallback? = null,
11    val paymentButtonAction: PaymentButtonAction = PaymentButtonAction.PAYMENT,
12    val addressConfiguration: AddressConfiguration? = null,
13)

Component key	Description
`showPayButton`	Specifies whether the pay button should be displayed for this payment method. Mainly used for card payments.
`callback`	Callback functions for handling events in the specific component.
`paymentButtonAction`	The action to perform when the user selects the pay button. Mainly used for card payments. `PaymentButtonAction.PAYMENT`: When the customer taps the pay button, Flow performs a payment. `PaymentButtonAction.TOKENIZE`: When the customer taps the pay button, Flow tokenizes the card details they provided. You can access the token using the `onTokenized()` method provided by `ComponentCallback`.
`addressConfiguration`	Configuration for managing the address collection and handling during the checkout process. Mainly used for card payments. `AddressConfiguration#data`: The pre-filled contact data. This field is optional. `AddressConfiguration#fields`: The pre-defined fields to display in the address form. This field is optional. If not set, the default `billing address` fields are used: `AddressField.Country` `AddressField.AddressLine1` `AddressField.AddressLine2` `AddressField.City` `AddressField.State` `AddressField.Zip` `AddressConfiguration#onComplete:` A callback triggered after successfully collecting `ContactData`.

Flow library reference

See the configuration options and error handling steps for Flow for mobile.

Customize Flow for mobile
Beta

Color keys

Font keys

Information

Border keys

Component options

Next steps

Flow library reference