@gingham/sdk v0.1.3

Gingham Pay React SDK

A modern, lightweight React SDK for integrating Gingham Pay cryptocurrency payments into your applications.

Installation

yarn add @gingham/sdk

Quick Start

Option 1: All-in-one Component (Recommended)

import React from 'react';
import { GinghamPayment } from '@gingham/sdk';

function App() {
  return (
    <GinghamPayment
      config={{
        theme: 'dark',
        currency: 'USDC',
        modalTitle: 'Complete Payment',
      }}
    >
      {(gingham) => (
        <div>
          <button
            onClick={() =>
              gingham.openModal({
                total: '25.00',
                description: 'Premium subscription',
                items: [
                  { name: 'Monthly Plan', price: '25.00' },
                ],
              })
            }
          >
            Pay with Crypto
          </button>
        </div>
      )}
    </GinghamPayment>
  );
}

Option 2: Individual Components

import React from 'react';
import { 
  GinghamProvider, 
  GinghamModal, 
  useGingham 
} from '@gingham/sdk';

function PaymentComponent() {
  const gingham = useGingham({
    theme: 'dark',
    currency: 'USDC',
  });

  return (
    <>
      <button
        onClick={() =>
          gingham.openModal({
            total: '25.00',
            description: 'Premium subscription',
          })
        }
      >
        Pay with Crypto
      </button>

      <GinghamModal
        isOpen={gingham.isModalOpen}
        onClose={gingham.closeModal}
        onPaymentStart={gingham.handlePaymentStart}
        onPaymentComplete={gingham.handlePaymentComplete}
        total={gingham.checkoutOptions.total}
        currency={gingham.config.currency}
        description={gingham.checkoutOptions.description}
      />
    </>
  );
}

function App() {
  return (
    <GinghamProvider>
      <PaymentComponent />
    </GinghamProvider>
  );
}

API Reference

Configuration Options

interface GinghamConfig {
  theme?: 'light' | 'dark';
  currency?: string;
  modalTitle?: string;
  primaryColor?: string;
  test_mode?: boolean;
  public_api_key?: string;
  api_url?: string;
}

Checkout Options

interface CheckoutOptions {
  total?: string;
  currency?: string;
  description?: string;
  items?: CheckoutItem[];
  modalTitle?: string;
  cancelButtonText?: string;
  onModalOpen?: () => void;
  onPaymentStart?: () => void;
  onPaymentComplete?: (result: any) => void;
  onModalClose?: () => void;
  merchantId?: string;
  orderId?: string;
}

Features

• 🚀 Modern React components with TypeScript support
• 🎨 Customizable themes and styling
• 💰 Cryptocurrency payments via Coinbase OnchainKit
• 📱 Responsive design
• 🔧 Simple integration
• 📦 Tree-shakeable exports

Development

# Install dependencies
yarn install

# Build the SDK
yarn build

# Run in watch mode
yarn dev

# Lint code
yarn lint

License

MIT