Customize Flow for mobile

Last updated: December 22, 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    )


1import { Style } from '@checkout.com/checkout-react-native-components';
2
3const style: Style = {
4  colorTokensMain: {
5    primary: '#186AFF',
6    background: '#FFFFFF',
7    formBackground: '#F7F9FC',
8    border: '#E3E8F2',
9    formBorder: '#C8D1E0',
10    outline: '#91B2EE',
11    error: '#E01E5A',
12    success: '#1AA27B',
13    disabled: '#B0B0B0',
14    secondary: '#545F7A',
15    inverse: '#FFFFFF',
16    action: '#186AFF',
17    scrolledContainer: '#F0F0F0' // Android only
18  },
19  borderButtonRadius: 12,
20  borderFormRadius: 8
21};

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)


1const config: CheckoutConfiguration = { ...config, style }
2
3<CheckoutProvider
4  config={config}
5  paymentSession={paymentSession}
6>
7  <Flow />
8</CheckoutProvider>

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`

Key	Format
`primary`	`#RRGGBB` or `rgb(r, g, b)`
`background`	`#RRGGBB` or `rgb(r, g, b)`
`formBackground`	`#RRGGBB` or `rgb(r, g, b)`
`border`	`#RRGGBB` or `rgb(r, g, b)`
`formBorder`	`#RRGGBB` or `rgb(r, g, b)`
`outline`	`#RRGGBB` or `rgb(r, g, b)`
`error`	`#RRGGBB` or `rgb(r, g, b)`
`success`	`#RRGGBB` or `rgb(r, g, b)`
`disabled`	`#RRGGBB` or `rgb(r, g, b)`
`secondary`	`#RRGGBB` or `rgb(r, g, b)`
`inverse`	`#RRGGBB` or `rgb(r, g, b)`
`action`	`#RRGGBB` or `rgb(r, g, b)`
`scrolledContainer`	`#RRGGBB` or `rgb(r, g, b)`

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

Property	Type	Default value
`borderFormRadius`	`number`	`8`
`borderButtonRadius`	`number`	`12`

You can customize options for the individual Flow components using component-specific configuration.


1/**
2 * Options for configuring the behavior of a component of a payment method, 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 be performed when the pay button is tapped.
7 * @property googlePayConfiguration Configuration for Wallet payment method.
8 * @property addressConfiguration Configuration for billing address functionality for card payment.
9 * @property rememberMeConfiguration Configuration for the Remember Me payment method.
10 * @property cardConfiguration Configuration for card payment method.
11 */
12public data class ComponentOption(
13    val showPayButton: Boolean? = true,
14    val callback: ComponentCallback? = null,
15    val paymentButtonAction: PaymentButtonAction = PaymentButtonAction.PAYMENT,
16    val googlePayConfiguration: GooglePayConfiguration? = null,
17    val addressConfiguration: AddressConfiguration? = null,
18    val rememberMeConfiguration: RememberMeConfiguration? = null,
19    val cardConfiguration: CardConfiguration? = null,
20)

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.
`cardConfiguration.acceptedCardSchemes`	The list of accepted card schemes for card payments. This can be one of: `CardSchemeName.AmericanExpress` `CardSchemeName.CartesBancaires` `CardSchemeName.ChinaUnionPay` `CardSchemeName.DinersClubInternational` `CardSchemeName.Discover` `CardSchemeName.JCB` `CardSchemeName.Mada` `CardSchemeName.Mastercard` `CardSchemeName.Visa`
`cardConfiguration.displayCardholderName`	The position of the cardholder name input field for card payments. This configuration takes the following values: `CardholderNamePosition.TOP` – The input field positions on top of all other fields. `CardholderNamePosition.BOTTOM` – The field positions after all other fields. `CardholderNamePosition.HIDDEN` – The field is not displayed.
`googlePayConfiguration.acceptedCardSchemes`	The list of accepted card schemes for Google Pay payments, as mapped to the Google Pay API. This can be one of: `CardSchemeName.AmericanExpress` `CardSchemeName.Discover` `CardSchemeName.JCB` `CardSchemeName.Mastercard` `CardSchemeName.Visa`
`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`.
`rememberMeConfiguration.acceptedCardSchemes`	The list of accepted card schemes for card payments. This can be one of: `CardSchemeName.AmericanExpress` `CardSchemeName.CartesBancaires` `CardSchemeName.ChinaUnionPay` `CardSchemeName.DinersClubInternational` `CardSchemeName.Discover` `CardSchemeName.JCB` `CardSchemeName.Mada` `CardSchemeName.Mastercard` `CardSchemeName.Visa`
`rememberMeConfiguration.data`	Pre-filled data for Remember Me. This configuration supports email address and phone number.
`rememberMeConfiguration.showPayButton`	Indicates whether to display the pay button for Remember Me.
`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`.

In React Native, you can customize Flow and Card components using their respective config props:


1import { Flow, Card } from '@checkout.com/checkout-react-native-components';
2
3// Flow component configuration
4<Flow
5config={{
6  showPayButton: false,
7  paymentButtonAction: 'tokenize'
8}}
9/>
10
11// Card component configuration 
12<Card
13config={{
14  showPayButton: true,
15  paymentButtonAction: 'payment'
16 }}
17/>

Property Type Default Description

Property	Type	Default	Description
`showPayButton`	`boolean`	`true`	Whether to display the built-in pay button.
`paymentButtonAction`	`'payment' \| 'tokenize'`	`'payment'`	Action when the pay button is pressed: `'payment'`: Process payment `'tokenize'`: Tokenize card only

showPayButton

boolean

true

Whether to display the built-in pay button.

paymentButtonAction

'payment' | 'tokenize'

'payment'

Action when the pay button is pressed:

'payment': Process payment
'tokenize': Tokenize card only

You can also control components programmatically using refs:


1import { useRef } from 'react';
2import { Flow, Card, FlowRef, CardRef } from '@checkout.com/checkout-react-native-components';
3
4const PaymentScreen = () => {
5  const flowRef = useRef<FlowRef>(null);
6  const cardRef = useRef<CardRef>(null);
7
8  const handlePayment = () => {
9    flowRef.current?.submit();
10  };
11
12  const handleTokenization = () => {
13    cardRef.current?.tokenize();
14  };
15
16  return (
17    <CheckoutProvider config={config} paymentSession={paymentSession}>
18      <Flow ref={flowRef} config={{ showPayButton: false }} />
19      <Card ref={cardRef} config={{ showPayButton: false }} />
20    
21      <Button title="Pay" onPress={handlePayment} />
22      <Button title="Save Card" onPress={handleTokenization} />
23    </CheckoutProvider>
24  );
25};

Flow library reference

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

Customize Flow for mobile

Color keys

Font keys

Information

Border keys

Component options

Imperative API

Next steps

Flow library reference