@rotateprotocol/sdk 1.0.0

package/src/components/CheckoutForm.tsx

@@ -0,0 +1,608 @@
+/**
+ * Rotate Checkout Form
+ * 
+ * Embeddable checkout form that can be styled to match your site.
+ * Drop-in component for seamless crypto payments.
+ * 
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CheckoutForm 
+ *   amount={99.99}
+ *   onSuccess={(payment) => {
+ *     console.log('Paid!', payment);
+ *     router.push('/success');
+ *   }}
+ * />
+ * 
+ * // With product details
+ * <CheckoutForm 
+ *   amount={149.99}
+ *   productName="Pro Plan"
+ *   productDescription="Unlimited access for 1 year"
+ *   productImage="/images/pro-plan.png"
+ *   onSuccess={handleSuccess}
+ *   onError={handleError}
+ * />
+ * 
+ * // Embedded in your own form
+ * <form onSubmit={handleSubmit}>
+ *   <input name="email" placeholder="Email" />
+ *   <CheckoutForm 
+ *     amount={total}
+ *     embedded
+ *     onSuccess={onPaymentSuccess}
+ *   />
+ * </form>
+ * ```
+ */
+
+import React, { useState, useCallback, useEffect, CSSProperties } from 'react';
+import { useRotateContext } from './RotateProvider';
+
+// ==================== TYPES ====================
+
+export interface CheckoutFormProps {
+  /** Amount to charge */
+  amount: number;
+  /** Currency (default: USD) */
+  currency?: 'SOL' | 'USDC' | 'USDT' | 'USD';
+  /** Product name to display */
+  productName?: string;
+  /** Product description */
+  productDescription?: string;
+  /** Product image URL */
+  productImage?: string;
+  /** Your order reference ID */
+  orderRef?: string;
+  /** Allow customer tips */
+  allowTips?: boolean;
+  /** Show currency selector */
+  showCurrencySelector?: boolean;
+  /** Default payment currency */
+  defaultPaymentCurrency?: 'SOL' | 'USDC' | 'USDT';
+  /** Compact mode (no product display) */
+  compact?: boolean;
+  /** Embedded mode (no container styling) */
+  embedded?: boolean;
+  /** Success callback */
+  onSuccess?: (payment: PaymentResult) => void;
+  /** Error callback */
+  onError?: (error: Error) => void;
+  /** Custom class name */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+  /** Submit button text */
+  submitText?: string;
+  /** Show "Powered by Rotate" badge */
+  showBranding?: boolean;
+}
+
+export interface PaymentResult {
+  linkId: number;
+  amount: number;
+  currency: string;
+  transactionId: string;
+  paidAt: number;
+  tip?: number;
+}
+
+// ==================== STYLES ====================
+
+const containerStyles: CSSProperties = {
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  maxWidth: '400px',
+  width: '100%',
+  background: '#ffffff',
+  borderRadius: '12px',
+  boxShadow: '0 4px 24px rgba(0, 0, 0, 0.08)',
+  overflow: 'hidden',
+};
+
+const headerStyles: CSSProperties = {
+  padding: '24px',
+  background: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
+  borderBottom: '1px solid #e2e8f0',
+};
+
+const productStyles: CSSProperties = {
+  display: 'flex',
+  gap: '16px',
+  alignItems: 'center',
+};
+
+const productImageStyles: CSSProperties = {
+  width: '60px',
+  height: '60px',
+  borderRadius: '8px',
+  objectFit: 'cover' as const,
+  background: '#e2e8f0',
+};
+
+const bodyStyles: CSSProperties = {
+  padding: '24px',
+};
+
+const sectionStyles: CSSProperties = {
+  marginBottom: '20px',
+};
+
+const labelStyles: CSSProperties = {
+  display: 'block',
+  fontSize: '13px',
+  fontWeight: 600,
+  color: '#64748b',
+  marginBottom: '8px',
+  textTransform: 'uppercase' as const,
+  letterSpacing: '0.5px',
+};
+
+const currencySelectorStyles: CSSProperties = {
+  display: 'flex',
+  gap: '8px',
+};
+
+const currencyOptionStyles = (selected: boolean, color: string): CSSProperties => ({
+  flex: 1,
+  padding: '12px 16px',
+  border: `2px solid ${selected ? color : '#e2e8f0'}`,
+  borderRadius: '8px',
+  background: selected ? `${color}10` : '#ffffff',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '8px',
+  fontSize: '14px',
+  fontWeight: selected ? 600 : 400,
+  color: selected ? color : '#64748b',
+});
+
+const tipSelectorStyles: CSSProperties = {
+  display: 'flex',
+  gap: '8px',
+};
+
+const tipOptionStyles = (selected: boolean, color: string): CSSProperties => ({
+  flex: 1,
+  padding: '10px',
+  border: `2px solid ${selected ? color : '#e2e8f0'}`,
+  borderRadius: '8px',
+  background: selected ? `${color}10` : '#ffffff',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  textAlign: 'center' as const,
+  fontSize: '14px',
+  fontWeight: selected ? 600 : 400,
+  color: selected ? color : '#64748b',
+});
+
+const summaryStyles: CSSProperties = {
+  background: '#f8fafc',
+  borderRadius: '8px',
+  padding: '16px',
+  marginBottom: '20px',
+};
+
+const summaryRowStyles: CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '8px 0',
+  fontSize: '14px',
+  color: '#64748b',
+};
+
+const summaryTotalStyles: CSSProperties = {
+  ...summaryRowStyles,
+  borderTop: '1px solid #e2e8f0',
+  marginTop: '8px',
+  paddingTop: '16px',
+  fontSize: '18px',
+  fontWeight: 700,
+  color: '#1e293b',
+};
+
+const buttonStyles = (color: string, loading: boolean): CSSProperties => ({
+  width: '100%',
+  padding: '16px 24px',
+  background: `linear-gradient(135deg, ${color} 0%, ${adjustColor(color, -20)} 100%)`,
+  border: 'none',
+  borderRadius: '8px',
+  color: '#ffffff',
+  fontSize: '16px',
+  fontWeight: 600,
+  cursor: loading ? 'wait' : 'pointer',
+  transition: 'all 0.2s ease',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '8px',
+  boxShadow: `0 4px 14px ${color}40`,
+});
+
+const footerStyles: CSSProperties = {
+  textAlign: 'center' as const,
+  padding: '16px',
+  borderTop: '1px solid #e2e8f0',
+  fontSize: '12px',
+  color: '#94a3b8',
+};
+
+const errorStyles: CSSProperties = {
+  padding: '12px 16px',
+  background: '#fef2f2',
+  border: '1px solid #fecaca',
+  borderRadius: '8px',
+  color: '#dc2626',
+  fontSize: '14px',
+  marginBottom: '16px',
+};
+
+function adjustColor(hex: string, percent: number): string {
+  const num = parseInt(hex.replace('#', ''), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = (num >> 16) + amt;
+  const G = (num >> 8 & 0x00FF) + amt;
+  const B = (num & 0x0000FF) + amt;
+  return '#' + (
+    0x1000000 +
+    (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+    (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+    (B < 255 ? B < 1 ? 0 : B : 255)
+  ).toString(16).slice(1);
+}
+
+// ==================== ICONS ====================
+
+const CurrencyIcon: Record<string, () => React.ReactElement> = {
+  SOL: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+      <circle cx="12" cy="12" r="10" fillOpacity="0.2"/>
+      <text x="12" y="16" textAnchor="middle" fontSize="10" fontWeight="bold">◎</text>
+    </svg>
+  ),
+  USDC: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+      <circle cx="12" cy="12" r="10" fillOpacity="0.2"/>
+      <text x="12" y="16" textAnchor="middle" fontSize="10" fontWeight="bold">$</text>
+    </svg>
+  ),
+  USDT: () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+      <circle cx="12" cy="12" r="10" fillOpacity="0.2"/>
+      <text x="12" y="16" textAnchor="middle" fontSize="10" fontWeight="bold">₮</text>
+    </svg>
+  ),
+};
+
+const WalletIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/>
+    <path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/>
+    <path d="M18 12a2 2 0 0 0 0 4h4v-4h-4z"/>
+  </svg>
+);
+
+const SpinnerIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" 
+    style={{ animation: 'rotate-spin 1s linear infinite' }}>
+    <circle cx="12" cy="12" r="10" strokeOpacity="0.25"/>
+    <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round"/>
+  </svg>
+);
+
+const LockIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M19 11H5c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2zm0 9H5v-7h14v7zm-7-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm3-10V5c0-1.7-1.3-3-3-3S9 3.3 9 5v2H7V5c0-2.8 2.2-5 5-5s5 2.2 5 5v2h-2z"/>
+  </svg>
+);
+
+// ==================== COMPONENT ====================
+
+export function CheckoutForm({
+  amount,
+  currency = 'USD',
+  productName,
+  productDescription,
+  productImage,
+  orderRef,
+  allowTips = false,
+  showCurrencySelector = true,
+  defaultPaymentCurrency = 'USDC',
+  compact = false,
+  embedded = false,
+  onSuccess,
+  onError,
+  className = '',
+  style = {},
+  submitText,
+  showBranding = true,
+}: CheckoutFormProps) {
+  const { config, createCheckoutSession, calculateTotal, sdk } = useRotateContext();
+  const [selectedCurrency, setSelectedCurrency] = useState<'SOL' | 'USDC' | 'USDT'>(defaultPaymentCurrency);
+  const [selectedTip, setSelectedTip] = useState<number>(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [solPrice, setSolPrice] = useState<number | null>(null);
+
+  const brandColor = config.brandColor || '#8B5CF6';
+  const tipOptions = [0, 10, 15, 20]; // Percentage options
+
+  // Fetch SOL price
+  useEffect(() => {
+    async function fetchPrice() {
+      try {
+        const price = await sdk.getSolPrice();
+        setSolPrice(price);
+      } catch (e) {
+        setSolPrice(100); // Fallback
+      }
+    }
+    fetchPrice();
+  }, [sdk]);
+
+  // Calculate totals
+  const tipAmount = (amount * selectedTip) / 100;
+  const subtotalWithTip = amount + tipAmount;
+  const { total, fees, merchantReceives } = calculateTotal(subtotalWithTip);
+
+  // Convert to selected currency
+  const getAmountInCurrency = (usdAmount: number): number => {
+    if (selectedCurrency === 'SOL' && solPrice) {
+      return usdAmount / solPrice;
+    }
+    return usdAmount; // USDC/USDT are 1:1
+  };
+
+  const formatAmount = (amt: number, curr: string): string => {
+    if (curr === 'SOL') {
+      const solAmt = getAmountInCurrency(amt);
+      return `${solAmt.toFixed(solAmt < 1 ? 4 : 3)} SOL`;
+    }
+    return `$${amt.toFixed(2)}`;
+  };
+
+  // Handle payment — creates an on-chain checkout session and opens the
+  // hosted checkout page so the buyer can connect their wallet and pay.
+  const handleSubmit = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const session = await createCheckoutSession({
+        amount: subtotalWithTip,
+        currency,
+        description: productName,
+        orderRef,
+        allowTips,
+        metadata: {
+          tip: tipAmount.toString(),
+          paymentCurrency: selectedCurrency,
+        },
+      });
+
+      // Open hosted checkout in a popup so the buyer can connect a wallet and pay
+      const checkoutUrl = sdk.getPaymentUrl(session.linkId);
+      const width = 450;
+      const height = 700;
+      const left = window.screenX + (window.outerWidth - width) / 2;
+      const top = window.screenY + (window.outerHeight - height) / 2;
+
+      const popup = window.open(
+        checkoutUrl,
+        'rotate_checkout',
+        `width=${width},height=${height},left=${left},top=${top},popup=1`
+      );
+
+      if (popup) {
+        const messageHandler = (event: MessageEvent) => {
+          if (event.data?.type === 'rotate_payment_success') {
+            setLoading(false);
+            window.removeEventListener('message', messageHandler);
+            onSuccess?.({
+              linkId: session.linkId,
+              amount: total,
+              currency: selectedCurrency,
+              transactionId: event.data.payment?.transactionId || session.id,
+              paidAt: Date.now(),
+              tip: tipAmount,
+            });
+          } else if (event.data?.type === 'rotate_payment_cancel') {
+            setLoading(false);
+            window.removeEventListener('message', messageHandler);
+          } else if (event.data?.type === 'rotate_payment_error') {
+            setLoading(false);
+            setError(event.data.message || 'Payment failed');
+            window.removeEventListener('message', messageHandler);
+            onError?.(new Error(event.data.message || 'Payment failed'));
+          }
+        };
+
+        window.addEventListener('message', messageHandler);
+
+        // Detect popup closed without completing
+        const checkClosed = setInterval(() => {
+          if (popup.closed) {
+            clearInterval(checkClosed);
+            setLoading(false);
+            window.removeEventListener('message', messageHandler);
+          }
+        }, 500);
+      } else {
+        // Popup blocked — fall back to redirect
+        window.location.href = checkoutUrl;
+      }
+
+    } catch (err: any) {
+      setLoading(false);
+      setError(err.message);
+      onError?.(err);
+    }
+  }, [
+    subtotalWithTip, currency, productName, orderRef, allowTips,
+    tipAmount, selectedCurrency, total, sdk,
+    createCheckoutSession, onSuccess, onError,
+  ]);
+
+  // Render
+  return (
+    <>
+      <style>{`
+        @keyframes rotate-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+      
+      <div 
+        className={className}
+        style={embedded ? style : { ...containerStyles, ...style }}
+      >
+        {/* Product Header */}
+        {!compact && productName && (
+          <div style={headerStyles}>
+            <div style={productStyles}>
+              {productImage && (
+                <img 
+                  src={productImage} 
+                  alt={productName}
+                  style={productImageStyles}
+                />
+              )}
+              <div>
+                <div style={{ fontSize: '16px', fontWeight: 600, color: '#1e293b' }}>
+                  {productName}
+                </div>
+                {productDescription && (
+                  <div style={{ fontSize: '14px', color: '#64748b', marginTop: '4px' }}>
+                    {productDescription}
+                  </div>
+                )}
+                <div style={{ fontSize: '18px', fontWeight: 700, color: brandColor, marginTop: '8px' }}>
+                  {formatAmount(amount, currency)}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Form Body */}
+        <div style={bodyStyles}>
+          {/* Error Display */}
+          {error && (
+            <div style={errorStyles}>
+              {error}
+            </div>
+          )}
+
+          {/* Currency Selector */}
+          {showCurrencySelector && (
+            <div style={sectionStyles}>
+              <label style={labelStyles}>Pay with</label>
+              <div style={currencySelectorStyles}>
+                {(['SOL', 'USDC', 'USDT'] as const).map((curr) => (
+                  <button
+                    key={curr}
+                    type="button"
+                    style={currencyOptionStyles(selectedCurrency === curr, brandColor)}
+                    onClick={() => setSelectedCurrency(curr)}
+                  >
+                    {CurrencyIcon[curr]()}
+                    <span>{curr}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Tip Selector */}
+          {allowTips && (
+            <div style={sectionStyles}>
+              <label style={labelStyles}>Add a tip</label>
+              <div style={tipSelectorStyles}>
+                {tipOptions.map((tip) => (
+                  <button
+                    key={tip}
+                    type="button"
+                    style={tipOptionStyles(selectedTip === tip, brandColor)}
+                    onClick={() => setSelectedTip(tip)}
+                  >
+                    {tip === 0 ? 'None' : `${tip}%`}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Order Summary */}
+          <div style={summaryStyles}>
+            <div style={summaryRowStyles}>
+              <span>Subtotal</span>
+              <span>{formatAmount(amount, currency)}</span>
+            </div>
+            {tipAmount > 0 && (
+              <div style={summaryRowStyles}>
+                <span>Tip ({selectedTip}%)</span>
+                <span>{formatAmount(tipAmount, currency)}</span>
+              </div>
+            )}
+            <div style={summaryRowStyles}>
+              <span>Processing fee</span>
+              <span>{formatAmount(fees, currency)}</span>
+            </div>
+            <div style={summaryTotalStyles}>
+              <span>Total</span>
+              <span>{formatAmount(total, selectedCurrency)}</span>
+            </div>
+          </div>
+
+          {/* Pay Button */}
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={loading}
+            style={buttonStyles(brandColor, loading)}
+          >
+            {loading ? (
+              <>
+                <SpinnerIcon />
+                <span>Connecting Wallet...</span>
+              </>
+            ) : (
+              <>
+                <WalletIcon />
+                <span>{submitText || `Pay ${formatAmount(total, selectedCurrency)}`}</span>
+              </>
+            )}
+          </button>
+
+          {/* Security Badge */}
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'center', 
+            gap: '6px',
+            marginTop: '16px',
+            fontSize: '12px',
+            color: '#94a3b8',
+          }}>
+            <LockIcon />
+            <span>Secure payment • Funds go directly to merchant</span>
+          </div>
+        </div>
+
+        {/* Footer Branding */}
+        {showBranding && !embedded && (
+          <div style={footerStyles}>
+            Powered by <strong style={{ color: brandColor }}>Rotate</strong> • Non-custodial payments
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default CheckoutForm;