CheckoutImplementation OverviewMobile App Payments

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.

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

1

Add the card form component

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

1import React, {useRef} from 'react';
2import {Button, View} from 'react-native';
3import {
4  CoinflowCardForm,
5  CardFormNativeRef,
6} from '@coinflowlabs/react-native';
7
8export 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.

2

Configure the environment

1const env = __DEV__ ? 'sandbox' : 'prod';
  • 'sandbox' — test cards, no real money
  • 'prod' — live cards, real money
3

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

1import {
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';
ComponentCapturesUse case
CoinflowCardFormNumber, expiry, CVVStandard one-shot capture
CoinflowCardNumberFormNumber + expiryFirst step of a two-step flow
CoinflowCvvFormCVV onlyRe-collecting CVV for a card-on-file token

Theming

MerchantTheme styles the rendered form. All fields optional.

1import {MerchantTheme} from '@coinflowlabs/react-native';
2
3const 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} /* ... */ />
FieldPurpose
primary, ctaColorAccent / action colors (hex strings)
background, backgroundAccent, backgroundAccent2Form background tones
textColor, textColorAccent, textColorActionInput and label text colors
font, fontSize, fontWeightTypography. font must be available on the device.
styleInput shape: 'rounded', 'sharp', 'pill'
cardNumberPlaceholder, cvvPlaceholder, expirationPlaceholderOverride input placeholder text
showCardIconToggle the card brand icon (Visa/Mastercard/Amex)

Resources