conekta-elements-react-native

React Native wrapper for Conekta Elements — renders the native Compose UI directly on Android and iOS via a thin JavaScript bridge.

Requirements

| Platform | Minimum version | |----------|----------------| | Android | API 24 (Android 7.0) | | iOS | 14.0 | | React Native | 0.71+ |

Installation

npm install conekta-elements-react-native

iOS

cd ios && pod install

pod install automatically downloads the Compose XCFramework from GitHub releases.

Android

Autolinking registers the module automatically. No additional configuration is required.

Usage

import React, { useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ConektaTokenizer } from 'conekta-elements-react-native';
import type { TokenResult, TokenizerError } from 'conekta-elements-react-native';

export default function CheckoutScreen() {
  const [token, setToken] = useState('');

  function handleSuccess(result: TokenResult) {
    console.log('Token:', result.token, 'Last four:', result.lastFour);
    setToken(result.token);
  }

  function handleError(error: TokenizerError) {
    console.error(`[${error.type}] ${error.message}`);
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ConektaTokenizer
        config={{
          publicKey: 'key_XXXXXXXXXXXXXXXX',
          merchantName: 'Mi Tienda',
        }}
        onSuccess={handleSuccess}
        onError={handleError}
        style={{ flex: 1 }}
      />
    </SafeAreaView>
  );
}

API

<ConektaTokenizer />

| Prop | Type | Required | Description | |------|------|----------|-------------| | config | TokenizerConfig | Yes | Public key and merchant settings | | onSuccess | (result: TokenResult) => void | Yes | Called when tokenization succeeds | | onError | (error: TokenizerError) => void | Yes | Called when tokenization fails | | style | StyleProp<ViewStyle> | No | View style |

TokenizerConfig

| Field | Type | Default | Description | |-------|------|---------|-------------| | publicKey | string | — | Conekta public key | | merchantName | string | "Demo Store" | Merchant name shown in the UI |

TokenResult

{ token: string; lastFour: string }

TokenizerError

| { type: 'ValidationError'; message: string }
| { type: 'NetworkError';    message: string }
| { type: 'ApiError'; code: string; message: string }

Expo

This library contains native code and has the following compatibility:

| Expo workflow | Compatible | |---------------|-----------| | Expo Go | No | | Development Build | Yes | | Bare workflow | Yes | | EAS Build | Yes |

Expo Go is not supported. It is a sandboxed app with a fixed set of native modules and cannot load custom native code.

To use this library with Expo, create a development build:

npx expo install expo-dev-client

# Build locally
npx expo run:ios
npx expo run:android

# Or build with EAS
eas build --profile development

After that, autolinking picks up the module automatically and the library works as usual.

Development

git clone https://github.com/conekta/conekta-elements-react-native.git
cd conekta-elements-react-native
npm install

Scripts

npm test          # Run tests
npm run test:watch # Run tests in watch mode
npx tsc --noEmit  # Type check

Example app

# Android
cd example && npx react-native run-android

# iOS
cd example/ios && pod install && cd ..
npx react-native run-ios

License

MIT