Client SDKs

React Native

@n1co/react-native, n1co's card fields in your app.

App · React Native 0.86+ or Expo SDK 57 and 58

Runs in your React Native 0.86+ or Expo app (SDK 57 or 58, Expo Go too). Needs react 19.2+, react-native-webview 13.16 or 14 and crypto.getRandomValues from react-native-get-random-values.

Install

Expo

Terminal

npx expo install react-native-webview expo-crypto react-native-get-random-values
npm install @n1co/react-native

pnpm expo install react-native-webview expo-crypto react-native-get-random-values
pnpm add @n1co/react-native

yarn expo install react-native-webview expo-crypto react-native-get-random-values
yarn add @n1co/react-native

bun expo install react-native-webview expo-crypto react-native-get-random-values
bun add @n1co/react-native

React Native

Terminal

npm install @n1co/react-native react-native-webview react-native-get-random-values
cd ios && pod install

pnpm add @n1co/react-native react-native-webview react-native-get-random-values
cd ios && pod install

yarn add @n1co/react-native react-native-webview react-native-get-random-values
cd ios && pod install

bun add @n1co/react-native react-native-webview react-native-get-random-values
cd ios && pod install

App.tsx

import 'react-native-get-random-values'; // first line of your app
import { N1coProvider } from '@n1co/react-native';

export function App() {
  return (
    <N1coProvider publishableKey="pk_3x4mpl3pUbl1shabl3k3yAAAAAAAAAAA" environment="sandbox" locale="en">
      <Checkout />
    </N1coProvider>
  );
}

Prop	Values	Default
`publishableKey`	Your `publishable_key`	Required
`environment`	`'production'`, `'sandbox'`	`'production'`
`locale`	`'es'`, `'en'`	`'es'`
`host`	One of n1co's frames hosts, `https:`	`https://elements.n1co.com`

Methods

Components

Component	What it does	Props
`CardField`	The card form, in an n1co WebView.	`ref`, `options`, `onReady`, `onChange`, `onFocus`, `onBlur`, `onError`, `style`
`CvcField`	The security code of a saved card.	`ref`, `options`, `onReady`, `onChange`, `onFocus`, `onBlur`, `onError`, `style`

`useN1co()`

Method	What it does	Returns
`confirmPayment({ intent_token, card?, cvc?, billing? })`	Charges the intent; 3D Secure opens in a sheet over your app.	Promise of the intent in a final state
`retrievePaymentIntent(intent_token)`	Reads the intent.	Promise of the intent

Field refs

Method	What it does	Returns
`capture({ session_token })`	Saves the card under the session; `CardField` only.	Promise of `{ ok: true, card }`
`update({ appearance?, locale? })`	Changes the appearance or the language without reloading.	Nothing
`focus(field?)`	Focuses a field.	Nothing
`clear()`	Empties the field.	Nothing

Appearance

Pass appearance in options when the field loads; later changes go through ref.current.update({ appearance }). update() merges variables without removing earlier ones: when switching themes, send the full appearance.

CardForm.tsx

import { useEffect, useRef } from 'react';
import { useColorScheme, View } from 'react-native';
import { CardField, type CardFieldHandle } from '@n1co/react-native';

const themes = {
  light: {
    theme: 'light',
    variables: {
      colorBackground: '#ffffff',
      colorText: '#1a1a1a',
      colorTextPlaceholder: '#767676',
      colorBorder: '#cccccc',
      colorBorderFocus: '#0b7a75',
      colorDanger: '#c62828',
    },
  },
  dark: {
    theme: 'dark',
    variables: {
      colorBackground: '#1a1a1a',
      colorText: '#f2f2f2',
      colorTextPlaceholder: '#8b8b8b',
      colorBorder: '#444444',
      colorBorderFocus: '#4da3ff',
      colorDanger: '#ff7b72',
    },
  },
} as const;

// Follows the OS theme; update() always gets the full appearance.
export function CardForm() {
  const appearance = themes[useColorScheme() === 'dark' ? 'dark' : 'light'];
  const options = { appearance };
  const style = { backgroundColor: appearance.variables.colorBackground };
  const card = useRef<CardFieldHandle>(null);

  useEffect(() => {
    card.current?.update({ appearance });
  }, [appearance]);

  return (
    <View style={style}>
      <CardField ref={card} options={options} onError={(e) => console.warn(e.code)} />
    </View>
  );
}

Option	Values	Default	What it controls
`theme`	`'light'`, `'dark'`	`'light'`	Base colors and fixed secondary text.
`colorBackground`	`#rgb` or `#rrggbb`	by `theme`: `#ffffff`, `#1c2128`	Field background.
`colorText`	`#rgb` or `#rrggbb`	`#1f2328`, `#e6e8eb`	Typed text.
`colorTextPlaceholder`	`#rgb` or `#rrggbb`	`#8a8f98`, `#7d8590`	Placeholder text.
`colorBorder`	`#rgb` or `#rrggbb`	`#c9ced6`, `#444c56`	Border.
`colorBorderFocus`	`#rgb` or `#rrggbb`	`#2f6feb`, `#539bf5`	Border when focused.
`colorDanger`	`#rgb` or `#rrggbb`	`#c62828`, `#ff7b72`	Error messages.
`fontFamily`	`'system'`, `'sans-serif'`, `'serif'`, `'monospace'`	`'system'`	Typeface.
`fontSizeBase`	12 to 20 px (`16` or `'16px'`)	15 px	Base text size.
`borderRadius`	0 to 16 px	6 px	Corners.
`spacingUnit`	2 to 12 px	4 px	Spacing.

Contrast is enforced: an invalid appearance reaches onError as invalid_options; if it is the initial one, it is fatal and you must remount the field.

Set colorBackground to the background of the view the field sits on so it blends in.