React Native SDK

Embed the Coinflow card tokenization form natively in a React Native app.

Overview

@coinflowlabs/react-native is a React Native SDK that embeds Coinflow’s card tokenization form directly into iOS and Android apps from a single TypeScript codebase. The user enters their card inside your app, the SDK returns a payment token, and your backend charges the card via the standard Coinflow checkout API.

Package: @coinflowlabs/react-native
Distribution: npm
Current version: 4.13.0

Requirements

React Native 0.71+ / Expo SDK 50+
iOS 15+ / Android minSdk 24+
Peer dependency: react-native-webview >=11.16.0

Installation

$ npm install @coinflowlabs/react-native react-native-webview

For Expo projects, also run:

$ npx expo install react-native-webview

iOS additionally requires running pod install from the ios/ directory after install (skip if you use Expo’s prebuild flow).

Integration

Add the card form component

Render CoinflowCardForm and hold a ref you’ll use to trigger tokenization.

1 import React, {useRef} from 'react';
2 import {Button, View} from 'react-native';
3 import {
4   CoinflowCardForm,
5   CardFormNativeRef,
6 } from '@coinflowlabs/react-native';
7 
8 export function PaymentScreen() {
9   const formRef = useRef<CardFormNativeRef>(null);
10 
11   const onPay = async () => {
12     try {
13       const response = await formRef.current?.tokenize();
14       console.log('Token:', response?.token);
15     } catch (e) {
16       // surface error to user
17     }
18   };
19 
20   return (
21     <View>
22       <CoinflowCardForm
23         ref={formRef}
24         merchantId="your-merchant-id"
25         env="sandbox"
26         style={{height: 52}}
27       />
28       <Button title="Pay" onPress={onPay} />
29     </View>
30   );
31 }

your-merchant-id is an example placeholder. Use your actual merchant ID from the merchant dashboard, or contact the Coinflow integrations team. Typically read from your app’s config layer, not hard-coded.

Configure the environment

1 const env = __DEV__ ? 'sandbox' : 'prod';

'sandbox' — test cards, no real money
'prod' — live cards, real money

Charge the token server-side

tokenize() returns a CardFormTokenResponse:

token: string — payment token to send to your backend
expMonth?: string, expYear?: string — populated only for variants that collect expiry

Send the token to your server and call Coinflow’s checkout API to charge it. See the Card Checkout endpoint for the full request shape.

Variants

1 import {
2   CoinflowCardForm,        // full card entry (number, expiry, CVV)
3   CoinflowCardNumberForm,  // number + expiry only
4   CoinflowCvvForm,         // CVV only — requires `token` prop for saved card
5 } from '@coinflowlabs/react-native';

Component	Captures	Use case
`CoinflowCardForm`	Number, expiry, CVV	Standard one-shot capture
`CoinflowCardNumberForm`	Number + expiry	First step of a two-step flow
`CoinflowCvvForm`	CVV only	Re-collecting CVV for a card-on-file token

Theming

MerchantTheme styles the rendered form. All fields optional.

1 import {MerchantTheme} from '@coinflowlabs/react-native';
2 
3 const theme: MerchantTheme = {
4   primary: '#165DFB',
5   background: '#ffffff',
6   textColor: '#05092E',
7   ctaColor: '#165DFB',
8   font: 'Red Hat Display',
9   style: 'rounded',
10 };
11 
12 <CoinflowCardForm theme={theme} /* ... */ />

All theme fields

Field	Purpose
`primary`, `ctaColor`	Accent / action colors (hex strings)
`background`, `backgroundAccent`, `backgroundAccent2`	Form background tones
`textColor`, `textColorAccent`, `textColorAction`	Input and label text colors
`font`, `fontSize`, `fontWeight`	Typography. `font` must be available on the device.
`style`	Input shape: `'rounded'`, `'sharp'`, `'pill'`
`cardNumberPlaceholder`, `cvvPlaceholder`, `expirationPlaceholder`	Override input placeholder text
`showCardIcon`	Toggle the card brand icon (Visa/Mastercard/Amex)

Resources

Source: github.com/coinflow-labs-us/coinflow-react-native
npm: @coinflowlabs/react-native
License: Apache 2.0
Checkout API: Card Checkout endpoint

1	import React, {useRef} from 'react';
2	import {Button, View} from 'react-native';
3	import {
4	CoinflowCardForm,
5	CardFormNativeRef,
6	} from '@coinflowlabs/react-native';
7
8	export function PaymentScreen() {
9	const formRef = useRef<CardFormNativeRef>(null);
10
11	const onPay = async () => {
12	try {
13	const response = await formRef.current?.tokenize();
14	console.log('Token:', response?.token);
15	} catch (e) {
16	// surface error to user
17	}
18	};
19
20	return (
21	<View>
22	<CoinflowCardForm
23	ref={formRef}
24	merchantId="your-merchant-id"
25	env="sandbox"
26	style={{height: 52}}
27	/>
28	<Button title="Pay" onPress={onPay} />
29	</View>
30	);
31	}

1	import {
2	CoinflowCardForm, // full card entry (number, expiry, CVV)
3	CoinflowCardNumberForm, // number + expiry only
4	CoinflowCvvForm, // CVV only — requires `token` prop for saved card
5	} from '@coinflowlabs/react-native';

1	import {MerchantTheme} from '@coinflowlabs/react-native';
2
3	const theme: MerchantTheme = {
4	primary: '#165DFB',
5	background: '#ffffff',
6	textColor: '#05092E',
7	ctaColor: '#165DFB',
8	font: 'Red Hat Display',
9	style: 'rounded',
10	};
11
12	<CoinflowCardForm theme={theme} /* ... */ />