Skip to main content

React Native SDK Introduction

The Easy React Native SDK (@easylabs/react-native) provides a comprehensive, type-safe solution for integrating payment processing, customer management, and e-commerce functionality into React Native applications.

Features​

🔐 PCI/PII Compliance​

Built with secure form elements for PCI-compliant payment data collection. Your application never touches sensitive payment information.

⚛️ React Native Integration​

  • EasyProvider: Context provider for easy setup
  • useEasy Hook: Access all SDK functionality
  • Secure Form Elements: Pre-built, customizable payment forms with PCI-compliant data collection

🎨 Customizable Components​

  • CardNumberElement, CardExpirationDateElement, CardVerificationCodeElement
  • TextElement for bank account information
  • Full styling control with React Native styles

📱 Cross-Platform Support​

Works seamlessly on both iOS and Android with Expo or bare React Native projects.

💳 Payment Methods​

  • Credit/Debit cards
  • Bank accounts (ACH)
  • Tokenization for secure data handling

📘 TypeScript Support​

Comprehensive TypeScript definitions with full type safety for all API methods and data structures.

Architecture​

The React Native SDK operates in the mobile environment and provides:

┌──────────────────────────────────┐
│    Your React Native App         │
│  ┌────────────────────────────┐  │
│  │    EasyProvider            │  │
│  │  ┌──────────────────────┐  │  │
│  │  │  useEasy Hook        │  │  │
│  │  │  - Customer Mgmt     │  │  │
│  │  │  - Payments          │  │  │
│  │  │  - Products          │  │  │
│  │  │  - Subscriptions     │  │  │
│  │  │  - Orders            │  │  │
│  │  └──────────────────────┘  │  │
│  │                             │  │
│  │  ┌──────────────────────┐  │  │
│  │  │  Secure Elements     │  │  │
│  │  │  - CardNumber        │  │  │
│  │  │  - CardExpiry        │  │  │
│  │  │  - CardCVC           │  │  │
│  │  │  - TextElement       │  │  │
│  │  └──────────────────────┘  │  │
│  └────────────────────────────────┘  │
└──────────────────────────────────────┘
           │
           ▼
         Easy API

Key Differences from React SDK​

The React Native SDK uses secure native elements instead of web-based React Elements:

  • Component Names: Same API but powered by React Native components
  • Styling: Uses React Native StyleSheet instead of CSS
  • Platform Support: iOS and Android instead of web browsers
  • Refs: Uses btRef prop instead of standard React ref

Use Cases​

E-commerce Apps​

  • Product catalogs
  • Shopping carts
  • Secure checkout flows
  • Order management

Subscription Apps​

  • Subscription plans
  • Recurring billing
  • Trial periods
  • Plan upgrades/downgrades

Marketplace Apps​

  • Multi-vendor payments
  • Split payments
  • Escrow functionality
  • Dispute management

Service Apps​

  • On-demand services
  • Appointment booking with payments
  • Tip handling
  • Refunds and adjustments

Security​

The Easy React Native SDK is built with security at its core:

  • No sensitive data in your app: Payment data is collected directly by secure elements
  • PCI DSS compliant: Built with PCI-compliant secure form elements
  • Tokenization: All payment data is tokenized before transmission
  • End-to-end encryption: Data is encrypted in transit and at rest

Getting Started​

Ready to integrate payments into your React Native app?

  1. Install the SDK
  2. Follow the Quick Start Guide
  3. Explore the Examples

Support​

For questions, issues, or feature requests: