React Native SDK

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.

import React, {useRef} from 'react';
import {Button, View} from 'react-native';
import {
  CoinflowCardForm,
  CardFormNativeRef,
} from '@coinflowlabs/react-native';

export function PaymentScreen() {
  const formRef = useRef<CardFormNativeRef>(null);

  const onPay = async () => {
    try {
      const response = await formRef.current?.tokenize();
      console.log('Token:', response?.token);
    } catch (e) {
      // surface error to user
    }
  };

  return (
    <View>
      <CoinflowCardForm
        ref={formRef}
        merchantId="your-merchant-id"
        env="sandbox"
        style={{height: 52}}
      />
      <Button title="Pay" onPress={onPay} />
    </View>
  );
}

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

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

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

Theming

MerchantTheme styles the rendered form. All fields optional.

import {MerchantTheme} from '@coinflowlabs/react-native';

const theme: MerchantTheme = {
  primary: '#165DFB',
  background: '#ffffff',
  textColor: '#05092E',
  ctaColor: '#165DFB',
  font: 'Red Hat Display',
  style: 'rounded',
};

<CoinflowCardForm theme={theme} /* ... */ />

All theme fields

Resources

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