React CodeSpear Payment

A comprehensive payment integration library for React supporting Paystack, Pesapal, PayHero, and Crypto payments.

Features

• 💳 Card Payments - Visa, Mastercard, Amex, Discover
• 📱 Mobile Money - M-Pesa, Airtel Money, Tigo Pesa
• ₿ Cryptocurrency - Bitcoin, Ethereum, USDT, USDC, Dogecoin
• 💳 PayPal - Secure PayPal checkout
• 🔄 Auto Polling - Automatic status checking for async payments
• 🎨 Beautiful UI - Responsive modal with all payment methods
• 📝 Receipt Generation - Downloadable PDF receipts
• 🔐 Secure - PCI compliant, tokenized payments

Installation

npm install react-codespear-payment
Quick Start
jsx
import React, { useState } from 'react';
import { PaymentModal } from 'react-codespear-payment';
import 'react-codespear-payment/dist/index.css';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const config = {
    paystack: {
      publicKey: 'pk_test_...',
      secretKey: 'sk_test_...'
    },
    paypal: {
      clientId: 'your-paypal-client-id'
    },
    redirectUrl: 'https://yourapp.com/success'
  };

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>
        Pay Now
      </button>

      <PaymentModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        amount={125.00}
        currency="KES"
        description="VIP Subscription"
        customerEmail="[email protected]"
        customerPhone="254712345678"
        config={config}
        provider="all"
        onSuccess={(data) => console.log('Success:', data)}
        onError={(error) => console.error('Error:', error)}
      />
    </div>
  );
}

export default App;

API Reference
PaymentModal Props
Prop	Type	Default	Description
isOpen	boolean	false	Modal visibility
onClose	function	-	Close handler
amount	number	-	Payment amount
currency	string	'KES'	Currency code
description	string	'Payment'	Payment description
customerEmail	string	-	Customer email
customerPhone	string	-	Customer phone
config	object	-	Provider configurations
provider	string	'paystack'	Payment provider ('paystack', 'pesapal', 'payhero', 'all')
onSuccess	function	-	Success callback
onError	function	-	Error callback
Hooks
jsx
import { usePaystack, usePesapal, usePayHero, useCryptoPayment } from 'react-codespear-payment';

// Paystack hook
const { chargeCard, chargeMobileMoney, processing } = usePaystack(config);

// Pesapal hook  
const { submitOrder, getTransactionStatus } = usePesapal(config);

// PayHero hook
const { initiateSTKPush, checkTransactionStatus } = usePayHero(config);

// Crypto hook
const { generateAddress, verifyPayment, paymentStatus } = useCryptoPayment({
  amount: 100,
  fiatCurrency: 'usd',
  cryptoCurrency: 'btc'
});