SDKs de cliente

React Native

@n1co/react-native, los campos de tarjeta de n1co en tu app.

App · React Native 0.86+ o Expo SDK 57 y 58

Corre en tu app de React Native 0.86+ o Expo (SDK 57 o 58, también en Expo Go). Requiere react 19.2+, react-native-webview 13.16 o 14 y crypto.getRandomValues de react-native-get-random-values.

Instalar

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'; // primera línea de tu app
import { N1coProvider } from '@n1co/react-native';

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

Prop	Valores	Por defecto
`publishableKey`	Tu `publishable_key`	Requerido
`environment`	`'production'`, `'sandbox'`	`'production'`
`locale`	`'es'`, `'en'`	`'es'`
`host`	Un host de frames de n1co, `https:`	`https://elements.n1co.com`

Métodos

Componentes

Componente	Qué hace	Props
`CardField`	El formulario de tarjeta, en un WebView de n1co.	`ref`, `options`, `onReady`, `onChange`, `onFocus`, `onBlur`, `onError`, `style`
`CvcField`	El código de seguridad de una tarjeta guardada.	`ref`, `options`, `onReady`, `onChange`, `onFocus`, `onBlur`, `onError`, `style`

`useN1co()`

Método	Qué hace	Devuelve
`confirmPayment({ intent_token, card?, cvc?, billing? })`	Cobra el intent; 3D Secure se abre en una hoja sobre tu app.	Promesa del intent en estado final
`retrievePaymentIntent(intent_token)`	Lee el intent.	Promesa del intent

Ref de los campos

Método	Qué hace	Devuelve
`capture({ session_token })`	Guarda la tarjeta bajo la sesión; solo `CardField`.	Promesa de `{ ok: true, card }`
`update({ appearance?, locale? })`	Cambia la apariencia o el idioma sin recargar.	Nada
`focus(field?)`	Enfoca un campo.	Nada
`clear()`	Vacía el campo.	Nada

Apariencia

Pasa appearance en options al crear el campo; los cambios posteriores van con ref.current.update({ appearance }). update() mezcla variables sin quitar las anteriores: al cambiar de tema envía la apariencia completa.

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;

// Sigue el tema del sistema; update() recibe siempre la apariencia completa.
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>
  );
}

Opción	Valores	Por defecto	Qué controla
`theme`	`'light'`, `'dark'`	`'light'`	Colores base y texto secundario fijo.
`colorBackground`	`#rgb` o `#rrggbb`	según `theme`: `#ffffff`, `#1c2128`	Fondo del campo.
`colorText`	`#rgb` o `#rrggbb`	`#1f2328`, `#e6e8eb`	Texto escrito.
`colorTextPlaceholder`	`#rgb` o `#rrggbb`	`#8a8f98`, `#7d8590`	Texto de ejemplo.
`colorBorder`	`#rgb` o `#rrggbb`	`#c9ced6`, `#444c56`	Borde.
`colorBorderFocus`	`#rgb` o `#rrggbb`	`#2f6feb`, `#539bf5`	Borde con foco.
`colorDanger`	`#rgb` o `#rrggbb`	`#c62828`, `#ff7b72`	Mensajes de error.
`fontFamily`	`'system'`, `'sans-serif'`, `'serif'`, `'monospace'`	`'system'`	Tipografía.
`fontSizeBase`	12 a 20 px (`16` o `'16px'`)	15 px	Tamaño base del texto.
`borderRadius`	0 a 16 px	6 px	Esquinas.
`spacingUnit`	2 a 12 px	4 px	Espaciado.

El contraste se exige: una apariencia inválida llega a onError como invalid_options; si es la inicial, es fatal y debes remontar el campo.

Ajusta colorBackground al fondo de la vista donde va el campo para que se integre.