Card Tokenization SDK React Native

Card Tokenization SDK React Native

A React Native wrapper for the Card Tokenization SDK enabling secure card tokenization integration in React Native applications.

Overview

This library is built using Turbo Native Modules (the new React Native architecture), ensuring highly efficient, synchronous data fetching and type-safe communication between JavaScript and native code.

Under the hood, it bridges the native platform implementations seamlessly:

• android: Directly integrates the native Android implementation of the Card Tokenization SDK.
• ios: Wraps the native .xcframework distribution of the SDK.

Prerequisites

Android

• Minimum SDK (minSdkVersion): 24 (or whatever version your underlying SDK requires)
• Compile SDK (compileSdkVersion): 36 or higher
• Kotlin Version (kotlinVersion): 2.0.21 or higher
• Java / Gradle: Java 11+ and an updated Gradle wrapper matching your React Native version.

iOS

• Deployment Target: iOS 13.0 or higher
• CocoaPods: 1.11.0 or higher
• Xcode: Version 16.0+ (Required for handling modern .xcframework distributions)

Running the Example App

The project includes an example/ directory, which is a pre-configured React Native application that demonstrates how to implement and test the Card Tokenization SDK.

Follow these steps to get the example app running locally:

1. Prerequisites for Running the Example

Make sure you have installed the root project dependencies first, as the example app links directly to the root library.

# Clone the repository (if you haven't already)
git clone <your-repo-url>
cd <your-repo-folder>

# Install root dependencies
yarn install # or npm install

2. Configure Native Dependencies

For Android: The example app will automatically resolve the root library via React Native's autolinking. Ensure your Android device/emulator is running and connected (adb devices).

For iOS: Navigate to the iOS folder inside the example app and install the pods (including the .xcframework dependencies).

cd example/ios
pod install
cd ..

3. Start the Metro Bundler

Start the React Native packager from the root or the example directory:

yarn example start
# or npm run example start

4. Build and Run the App

Open a new terminal window and run the platform of your choice:

Android

yarn example android
# or npm run example android

iOS

yarn example ios
# or npm run example ios

5. Testing Tokenization workflows

Once the example app is running on your device or emulator:

Configure Credentials: Open the example app's main file (e.g., example/src/App.tsx) and update the initialization block with your Interswitch sandbox configurations (Client ID, Secret, Merchant ID).

Trigger Tokenization: Use the provided UI inputs to input a test card.

Check logs: Monitor your terminal or native IDE console (Logcat for Android / Xcode Console for iOS) to verify the returned tokens and response payloads from the Turbo Native Module bridging layer.

Publishing and Updating the NPM Package

Follow these steps to package and release the library to the NPM registry.

1. Preparation & Authentication

Before publishing, ensure you are logged into your NPM account via the CLI. If you haven't logged in yet, run:

npm login

2. Verify files to be Published

To prevent bloating your NPM package, ensure your .npmignore or the files array in package.json is configured properly.

• Your package must include:

  • src/ (JavaScript/TypeScript source files)

  • android/ (Android build scripts and native code bridging the SDK)

  • ios/ (iOS source files and the .xcframework or Podspec)

  • lib/ or dist/ (The compiled JavaScript output)

You can verify exactly what will be uploaded to NPM without actually publishing by running:

npm pack

This generates a .tgz file. Extract it to verify all native and JS code are present.

3. Publishing a New Package (First Time)

If this is the very first release of the package:

1. Build the TypeScript/JavaScript distribution files (if your setup uses a build step):

yarn build # or npm run build

2. Publish to the registry:

npm publish --access public

4. Updating an Existing Package

When making changes, fixing bugs, or adding features, use the following workflow to update the package version:

Step A: Commit your changes Ensure your working directory is clean and all edits for the version are committed to Git.

Step B: Bump the version Use npm version to automatically update the version in package.json and create a matching Git release tag. Choose the appropriate bump according to SemVer (Semantic Versioning):

# For bug fixes / minor patches (e.g., 1.0.0 -> 1.0.1)
npm version patch

# For new features that are backwards-compatible (e.g., 1.0.0 -> 1.1.0)
npm version minor

# For breaking changes / major architectural updates (e.g., 1.0.0 -> 2.0.0)
npm version major

Step C: Publish the update Push your compiled assets and new version to the registry:

yarn build # ensure the latest TS compilation is included
npm publish

Made with create-react-native-library