Components

Last updated: October 6, 2025

The Checkout React Native Components library provides a set of components for integrating Flow for mobile into your React Native application.

The CheckoutProvider component wraps your payment screen and provides configuration context to all child components.


1import { CheckoutProvider, CheckoutConfiguration } from '@checkout.com/checkout-react-native-components';
2
3const config: CheckoutConfiguration = {
4  publicKey: 'pk_test_your_key',
5  environment: 'sandbox',
6  locale: 'en-GB',
7  merchantIdentifier: 'merchant.com.your-app.name', // Required for Apple Pay
8};
9
10<CheckoutProvider
11  config={config}
12  paymentSession={paymentSession}
13  onSuccess={(paymentMethod, paymentID) => {
14    console.log('Payment successful:', { paymentMethod, paymentID });
15  }}
16  onError={(error) => {
17    console.error('Payment error:', error);
18  }}
19>
20  {/* Your components */}
21</CheckoutProvider>

Property	Type	Description
`config` required	`CheckoutConfiguration`	Configuration object.
`paymentSession` required	`PaymentSession`	Payment session from your server.
`onReady`	`(paymentMethod: string) => void`	Component ready callback.
`onChange`	`(paymentMethod: string, isValid: boolean) => void`	Form validation callback.
`onSubmit`	`(paymentMethod: string) => void`	Payment submission callback.
`onTokenized`	`(result: TokenizationResult) => void`	Tokenization callback.
`onSuccess`	`(paymentMethod: string, paymentID: string) => void`	Payment success callback.
`onError`	`(error: Error) => void`	Error handling callback.

The Flow component provides a complete payment experience with multiple payment methods.


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

Property	Type	Description
`config`	`FlowConfig`	Flow specific configuration.
`style`	`ViewStyle \| ViewStyle[]`	React Native styling.
`ref`	`FlowRef`	Imperative API reference.

Property	Type	Default	Description
`showPayButton`	`boolean`	`true`	Show/hide the built-in pay button
`paymentButtonAction`	`'payment' \| 'tokenize'`	`'payment'`	Action when pay button is pressed

The Card component provides a secure card input form.


1import { Card, CardRef } from '@checkout.com/checkout-react-native-components';
2
3const CardPaymentScreen = () => {
4  const cardRef = useRef<CardRef>(null);
5    const handleSubmit = () => {
6    cardRef.current?.submit();
7  };
8
9  return (
10    <CheckoutProvider config={config} paymentSession={paymentSession}>
11      <Card
12        ref={cardRef}
13        config={{ showPayButton: false }}
14      />
15      <Button title="Pay" onPress={handleSubmit} />
16    </CheckoutProvider>
17  );
18};

Property	Type	Description
`config`	`CardConfig`	Card-specific configuration
`style`	`ViewStyle \| ViewStyle[]`	React Native styling
`ref`	`CardRef`	Imperative API reference

The ApplePay component provides native Apple Pay integration (iOS only).


1import { ApplePay } from '@checkout.com/checkout-react-native-components';
2
3const PaymentScreen = () => {
4  return (
5  <CheckoutProvider
6    config={{
7      ...config,
8      merchantIdentifier: 'merchant.com.your-app.name' // Required!
9    }}
10    paymentSession={paymentSession}
11  >
12    <ApplePay style={{ height: 60, marginVertical: 10 }} />
13  </CheckoutProvider>
14 );
15};

Property	Type	Description
`style`	`ViewStyle \| ViewStyle[]`	React Native styling

Information

Apple Pay requires a valid merchantIdentifier in your CheckoutConfiguration and is only available on iOS devices.

The GooglePay component provides native Google Pay integration (Android only).


1import { GooglePay } from '@checkout.com/checkout-react-native-components';
2
3const PaymentScreen = () => {
4  return (
5    <CheckoutProvider config={config} paymentSession={paymentSession}>
6      <GooglePay />
7    </CheckoutProvider>
8 );
9};

Property	Type	Description
`config`	`GooglePayConfig`	Google Pay configuration (reserved for future use)
`style`	`ViewStyle \| ViewStyle[]`	React Native styling

Information

Google Pay is only available on Android devices.

Both Flow and Card components support imperative APIs for programmatic control:


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


1interface FlowRef {
2  submit(): void;
3  tokenize(): void;
4}


1interface CardRef {
2  submit(): void;
3  tokenize(): void;
4}

Components

CheckoutProvider

CheckoutProvider Props

Flow Component

Flow Props

FlowConfig Options

Card Component

Card Props

ApplePay Component

ApplePay Props

Information

GooglePay Component

GooglePay Props

Information

Imperative API

FlowRef Methods

CardRef Methods