Custom Checkout

// 1. Include ZenPay.js on your page
<script src="https://js.zenpay.io/v1/zenpay.js"></script>

// 2. Configure your checkout
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const zenpay = new ZenPay('pk_test_YourPublicKey');
    
    document.getElementById('pay-button').addEventListener('click', async () => {
      try {
        // Create a checkout session
        const session = await zenpay.createCheckoutSession({
          amount: 99.99,
          currency: 'USD',
          product_name: 'Premium Membership',
          customer_email: 'customer@example.com',
          success_url: window.location.origin + '/thank-you',
          cancel_url: window.location.origin + '/cart'
        });
        
        // Launch the checkout modal
        zenpay.showCheckout(session.id, {
          theme: {
            colorPrimary: '#4F46E5',
            colorBackground: '#FFFFFF',
            colorText: '#1F2937',
            borderRadius: '8px',
            fontFamily: 'Inter, sans-serif'
          }
        });
      } catch (error) {
        console.error('Error creating checkout session:', error);
      }
    });
  });
</script>

// 3. Add a button to trigger checkout
<button id="pay-button" class="payment-button">Pay with Crypto</button>

// First, install the ZenPay React SDK
// npm install @zenpay/react

import React, { useState } from 'react';
import { 
  ZenPayProvider, 
  useZenPay,
  CryptoPaymentForm,
  CryptoMethodSelector,
  CheckoutSummary,
  PaymentStatus
} from '@zenpay/react';

// Your checkout component
function CustomCheckout({ amount, currency, productName }) {
  const [paymentStatus, setPaymentStatus] = useState('idle');
  const [selectedMethod, setSelectedMethod] = useState(null);
  const { createPayment, getPaymentStatus } = useZenPay();
  
  const handleSubmit = async () => {
    try {
      setPaymentStatus('processing');
      
      // Create a payment with ZenPay
      const payment = await createPayment({
        amount,
        currency,
        product_name: productName,
        payment_method: selectedMethod,
        metadata: {
          customer_id: 'cust_123456', // Your internal customer ID
          order_id: 'ord_789012'      // Your internal order ID
        }
      });
      
      // Poll for payment status
      const statusInterval = setInterval(async () => {
        const status = await getPaymentStatus(payment.id);
        
        if (status === 'completed') {
          setPaymentStatus('success');
          clearInterval(statusInterval);
        } else if (status === 'failed') {
          setPaymentStatus('error');
          clearInterval(statusInterval);
        }
      }, 5000);
      
    } catch (error) {
      console.error('Payment error:', error);
      setPaymentStatus('error');
    }
  };
  
  return (
    <div className="checkout-container">
      <CheckoutSummary 
        amount={amount} 
        currency={currency} 
        productName={productName} 
      />
      
      <CryptoMethodSelector 
        onChange={method => setSelectedMethod(method)} 
        selectedMethod={selectedMethod}
      />
      
      {selectedMethod && (
        <CryptoPaymentForm 
          method={selectedMethod} 
          onSubmit={handleSubmit}
        />
      )}
      
      {paymentStatus !== 'idle' && (
        <PaymentStatus status={paymentStatus} />
      )}
    </div>
  );
}

// Wrap your app with the provider
function App() {
  return (
    <ZenPayProvider apiKey="pk_test_YourPublicKey">
      <CustomCheckout 
        amount={99.99}
        currency="USD"
        productName="Premium Membership"
      />
    </ZenPayProvider>
  );
}