@astropay/tokenizer-sdk-react-native

Tokenizer - React Native

# AstroPay Tokenizer SDK for React Native

A secure library for tokenizing and revealing sensitive payment information in React Native applications. This library provides two main components: SecureTextField and SecureLabel, designed to handle sensitive data in compliance with PCI-DSS requirements.

✨ Features

• 🔒 PCI Compliant: Designed with security first, following PCI-DSS requirements
• 🛡️ Isolated Context: Components operate in isolated contexts to prevent data leakage
• 📱 Cross-Platform: Works on both iOS and Android
• 🧩 Expo Compatible: Works seamlessly with Expo and React Native CLI projects
• 💳 Enhanced Card Validation: Accurate card type detection and specific validation rules
• 🎨 Card Brand Display: Visual indicators for card types as users enter their information
• ♿ Accessibility Support: Fully accessible components for all users
• 🔍 Code Obfuscation: Built-in code obfuscation to protect internal logic
• 🧪 Fully Tested: Includes comprehensive unit and integration tests

📦 Installation

# Using npm
npm install @astropay/tokenizer-sdk-react-native

# Using yarn
yarn add @astropay/tokenizer-sdk-react-native

🚀 Quick Start

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { SecureTextField, SecureLabel, Environment, FieldType } from '@astropay/tokenizer-sdk-react-native';

export default function PaymentScreen() {
  const [cardToken, setCardToken] = useState('');
  const accessToken = 'your_access_token'; // Get this from your server

  const handleTokenized = (token, fieldName) => {
    if (fieldName === 'card_number') {
      setCardToken(token);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>Enter Card Details</Text>

      {/* Secure input for card number with card brand detection */}
      <SecureTextField
        name="card_number"
        type={FieldType.CARD_NUMBER}
        accessToken={accessToken}
        placeholder="4111 1111 1111 1111"
        showCardBrand={true}
        onTokenized={handleTokenized}
        onChange={(state) => {
          console.log('Card type detected:', state.cardBrand);
        }}
      />

      {cardToken && (
        <>
          <Text>Masked Card Number:</Text>
          {/* Display masked card number from token */}
          <SecureLabel
            token={cardToken}
            accessToken={accessToken}
            type={FieldType.CARD_NUMBER}
            masked={true}
          />
        </>
      )}
    </View>
  );
}

Components Overview

This library includes two main components designed for secure handling of sensitive information:

📘 Detailed Documentation

For full usage, advanced props, and styling:

• SecureTextField Documentation
• SecureLabel Documentation

API Reference

Initialization

import { initAstropayTokenizer, Environment } from '@astropay/tokenizer-sdk-react-native';

// Initialize the tokenizer
const tokenizer = Tokenizer.getInstance().initTokenizer({
  environment: Environment.SANDBOX, // or Environment.PRODUCTION
  apiVersion: 'v1',
  timeout: 30000, // in milliseconds
  debugLogging: {
    enabled: true, // Set to true to enable debug logging
    logLevel: 'debug', //  'error', 'warn', 'info', 'debug'
    verbose: false, // Show detailed logs
  },
});

Field Types

import { FieldType } from '@astropay/tokenizer-sdk-react-native';

// Available field types
FieldType.CARD_NUMBER       // For credit card numbers
FieldType.CARD_EXPIRY       // For expiration dates
FieldType.CARD_CVV          // For CVV/CVC codes
FieldType.TEXT              // For other sensitive text

Security Considerations

Data Isolation

The library ensures that sensitive data remains isolated:

• No direct access to sensitive data from the application code
• Secure communication with the tokenization server
• Token-based operations to avoid exposing actual data

PCI DSS Compliance

This library helps achieve PCI DSS compliance by:

• Never storing sensitive card data on the device
• Using tokenization for all sensitive data
• Maintaining secure communication channels
• Implementing code obfuscation to protect internal logic

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

Important: This package is publicly available on npm, but its use is strictly limited to authorized clients under a commercial agreement with AstroPay. Any unauthorized use, distribution, modification, or reverse engineering is prohibited and may result in legal consequences.

• See LICENSE.runtime (runtime npm package license) for details on restrictions and terms of use.

• See LICENSE (proprietary source code license, internal use only).