Skip to main content

React SDK Introduction

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

Features​

🔐 PCI/PII Compliance​

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

⚛️ React Integration​

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

🎨 Customizable Components​

  • CardElement (complete card input)
  • CardNumberElement, CardExpirationDateElement, CardVerificationCodeElement
  • TextElement for bank account information
  • Full styling control

📱 TypeScript Support​

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

💳 Payment Methods​

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

Architecture​

The React SDK operates in the client-side environment and provides:

┌──────────────────────────────────┐
│       Your React App             │
│  ┌────────────────────────────┐  │
│  │    EasyProvider            │  │
│  │  ┌──────────────────────┐  │  │
│  │  │  useEasy Hook        │  │  │
│  │  │  - Customer Mgmt     │  │  │
│  │  │  - Payment Methods   │  │  │
│  │  │  - Checkout          │  │  │
│  │  │  - Products/Pricing  │  │  │
│  │  └──────────────────────┘  │  │
│  │                            │  │
│  │  ┌──────────────────────┐  │  │
│  │  │  Secure Elements     │  │  │
│  │  │  (Tokenization)      │  │  │
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘
            │
            ├──> Tokenization
            │
            ├──> Easy API
            │
            └──> Your Backend

When to Use React SDK​

Use the React SDK for:

  • ✅ Client-side payment form collection
  • ✅ Tokenizing payment instruments
  • ✅ Managing customer data in your UI
  • ✅ Creating checkout flows
  • ✅ Displaying product catalogs
Best Practice

Use the React SDK in combination with the Node.js SDK for full-stack applications. Let the React SDK handle tokenization and UI, while the Node.js SDK processes payments on your server.

Requirements​

  • React 18.0 or higher
  • Node.js 20.0 or higher
  • Modern browser with JavaScript enabled

Browser Support​

  • Chrome/Edge (last 2 versions)
  • Firefox (last 2 versions)
  • Safari (last 2 versions)
  • iOS Safari (last 2 versions)
  • Chrome Android (last 2 versions)

Next Steps​

  1. Install the React SDK
  2. Follow the Quick Start guide
  3. Explore API Reference
  4. View Examples