@fanbasis/checkout-react

React components and hooks for integrating Fanbasis checkout into React applications. Built on top of @fanbasis/checkout-core with React-specific optimizations and developer experience enhancements.

🚀 Quick Start

Installation

npm install @fanbasis/checkout-react

Basic Usage

import React from 'react';
import { CheckoutProvider, AutoCheckout } from '@fanbasis/checkout-react';

const config = {
  creatorId: 'your-creator-id',
  productId: 'your-product-id',
  checkoutSessionSecret: 'your-session-secret',
  environment: 'sandbox'
};

function App() {
  return (
    <CheckoutProvider config={config}>
      <AutoCheckout autoOpen={true} />
    </CheckoutProvider>
  );
}

export default App;

📦 Package Contents

Components

• CheckoutProvider - Context provider for checkout configuration and state management
• AutoCheckout - Automatic checkout component with built-in lifecycle management
• Checkout - Manual checkout component for custom control
• SubmitButton - Customizable submit button component

Hooks

• useCheckout - Hook for accessing checkout instance and state
• Event hooks - React-friendly event handling

🎯 Key Features

• React Optimized - Built specifically for React applications
• Context Based - Shared state management across components
• TypeScript Support - Full type definitions with React types
• Hooks Integration - React hooks for checkout state and events
• Component Composition - Flexible component architecture
• Performance Optimized - Minimal re-renders and efficient updates
• Developer Experience - Intuitive React patterns and error boundaries

🔧 Components

CheckoutProvider

Context provider that manages checkout configuration and shared state.

import { CheckoutProvider } from '@fanbasis/checkout-react';

const config = {
  creatorId: 'creator_123',
  productId: 'product_456',
  checkoutSessionSecret: 'secret_789',
  environment: 'sandbox',
  theme: {
    theme: 'light',
    accent_color: '#007bff'
  }
};

function App() {
  return (
    <CheckoutProvider config={config}>
      {/* Your app components */}
    </CheckoutProvider>
  );
}

AutoCheckout

Automatic checkout component that handles the entire checkout lifecycle.

import { AutoCheckout } from '@fanbasis/checkout-react';

function CheckoutPage() {
  const handleSuccess = (data) => {
    console.log('Payment successful:', data);
  };

  const handleError = (error) => {
    console.error('Payment failed:', error);
  };

  return (
    <AutoCheckout
      autoOpen={true}
      onSuccess={handleSuccess}
      onError={handleError}
    />
  );
}

Checkout

Manual checkout component for custom control over the checkout process.

import { Checkout } from '@fanbasis/checkout-react';

function CustomCheckout() {
  return (
    <Checkout>
      {({ isOpen, isLoading, open, close }) => (
        <div>
          <button onClick={open} disabled={isLoading}>
            {isLoading ? 'Loading...' : 'Open Checkout'}
          </button>
          {isOpen && (
            <div>
              <p>Checkout is open</p>
              <button onClick={close}>Close</button>
            </div>
          )}
        </div>
      )}
    </Checkout>
  );
}

SubmitButton

Customizable submit button component.

import { SubmitButton } from '@fanbasis/checkout-react';

function CustomSubmitButton() {
  return (
    <SubmitButton
      className="custom-submit-btn"
      disabled={false}
      onClick={() => console.log('Submit clicked')}
    >
      Complete Purchase
    </SubmitButton>
  );
}

🪝 Hooks

useCheckout

Hook for accessing checkout instance and state.

import { useCheckout } from '@fanbasis/checkout-react';

function CheckoutStatus() {
  const { checkout, state, open, close } = useCheckout();

  return (
    <div>
      <p>Status: {state.isOpen ? 'Open' : 'Closed'}</p>
      <p>Loading: {state.isLoading ? 'Yes' : 'No'}</p>
      {state.error && <p>Error: {state.error.message}</p>}
      
      <button onClick={open}>Open Checkout</button>
      <button onClick={close}>Close Checkout</button>
    </div>
  );
}

Event Handling with Hooks

import { useCheckout } from '@fanbasis/checkout-react';
import { useEffect } from 'react';

function CheckoutEvents() {
  const { checkout } = useCheckout();

  useEffect(() => {
    if (!checkout) return;

    const handleSuccess = (data) => {
      console.log('Payment successful:', data);
    };

    const handleError = (error) => {
      console.error('Payment failed:', error);
    };

    checkout.on('checkout:success', handleSuccess);
    checkout.on('checkout:error', handleError);

    return () => {
      checkout.off('checkout:success', handleSuccess);
      checkout.off('checkout:error', handleError);
    };
  }, [checkout]);

  return <div>Checkout events are being monitored</div>;
}

🎨 Advanced Usage

Custom Configuration

import { CheckoutProvider, AutoCheckout } from '@fanbasis/checkout-react';

const advancedConfig = {
  creatorId: 'creator_123',
  productId: 'product_456',
  checkoutSessionSecret: 'secret_789',
  environment: 'sandbox',
  
  // Additional products
  bumpProductIds: ['bump_1', 'bump_2'],
  
  // Coupon and affiliate
  couponCode: 'SAVE10',
  affiliateCode: 'partner123',
  
  // Custom styling
  theme: {
    theme: 'dark',
    accent_color: '#ff6b6b',
    show_product_info: true,
    product_layout: 'left'
  },
  
  // Container options
  containerOptions: {
    width: '400px',
    height: '600px'
  },
  
  // Redirect settings
  redirectSettings: {
    success_redirect_url: '/success',
    failure_redirect_url: '/error',
    always_redirect: true
  }
};

function AdvancedCheckout() {
  return (
    <CheckoutProvider config={advancedConfig}>
      <AutoCheckout 
        autoOpen={false}
        onSuccess={(data) => {
          // Handle success
          window.location.href = '/thank-you';
        }}
        onError={(error) => {
          // Handle error
          console.error('Checkout error:', error);
        }}
      />
    </CheckoutProvider>
  );
}

Multiple Checkout Instances

import { CheckoutProvider, AutoCheckout } from '@fanbasis/checkout-react';

function MultiProductPage() {
  const product1Config = {
    creatorId: 'creator_123',
    productId: 'product_1',
    checkoutSessionSecret: 'secret_1',
    environment: 'sandbox'
  };

  const product2Config = {
    creatorId: 'creator_123',
    productId: 'product_2',
    checkoutSessionSecret: 'secret_2',
    environment: 'sandbox'
  };

  return (
    <div>
      <CheckoutProvider config={product1Config}>
        <AutoCheckout autoOpen={false} />
      </CheckoutProvider>
      
      <CheckoutProvider config={product2Config}>
        <AutoCheckout autoOpen={false} />
      </CheckoutProvider>
    </div>
  );
}

🔄 State Management

The React package provides built-in state management through React Context:

import { useCheckout } from '@fanbasis/checkout-react';

function CheckoutState() {
  const { state } = useCheckout();

  return (
    <div>
      <p>Is Open: {state.isOpen ? 'Yes' : 'No'}</p>
      <p>Is Loading: {state.isLoading ? 'Yes' : 'No'}</p>
      <p>Is Initialized: {state.isInitialized ? 'Yes' : 'No'}</p>
      {state.error && (
        <p>Error: {state.error.message}</p>
      )}
    </div>
  );
}

🧪 Testing

import { render, screen } from '@testing-library/react';
import { CheckoutProvider, AutoCheckout } from '@fanbasis/checkout-react';

const mockConfig = {
  creatorId: 'test_creator',
  productId: 'test_product',
  checkoutSessionSecret: 'test_secret',
  environment: 'sandbox'
};

test('renders checkout component', () => {
  render(
    <CheckoutProvider config={mockConfig}>
      <AutoCheckout autoOpen={false} />
    </CheckoutProvider>
  );
  
  // Your test assertions
});

📚 Documentation

• React Demo App - Interactive examples and documentation
• Core Package - Underlying JavaScript library
• API Reference - Complete component and hook documentation

🔧 Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run linting
npm run lint

📦 Dependencies

• React >= 18.0.0
• React DOM >= 18.0.0
• @fanbasis/checkout-core - Core checkout functionality

📄 License

This package is part of the Fanbasis Payment SDK. See the main project for license information.

🆘 Support

• Documentation: docs.fanbasis.com
• Issues: GitHub Issues
• Support: [email protected]

Size: ~15KB (gzipped)
Dependencies: React 18+, @fanbasis/checkout-core
Browser Support: Modern browsers with React 18+ support