@rotateprotocol/sdk 1.0.0

package/src/components/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Rotate Protocol React Components
+ * 
+ * Drop-in components for seamless payment integration on Solana.
+ * 
+ * @packageDocumentation
+ */
+
+// Provider
+export { RotateProvider, useRotateContext } from './RotateProvider';
+export type { RotateProviderProps, RotateConfig, RotateContextType, CheckoutSession, CreateCheckoutParams } from './RotateProvider';
+
+// Payment Button
+export { PaymentButton } from './PaymentButton';
+export type { PaymentButtonProps, PaymentResult } from './PaymentButton';
+
+// Checkout Form
+export { CheckoutForm } from './CheckoutForm';
+export type { CheckoutFormProps } from './CheckoutForm';
+
+// Hosted Checkout
+export { HostedCheckout } from './HostedCheckout';
+export type { HostedCheckoutProps } from './HostedCheckout';
+
+// Default export for convenience
+export { RotateProvider as default } from './RotateProvider';

package/src/embed.ts

@@ -0,0 +1,408 @@
+/**
+ * Rotate Embeddable Widget
+ * 
+ * Add Rotate payments to any website with just a script tag.
+ * No React required - works with vanilla HTML/JS.
+ * 
+ * @example
+ * ```html
+ * <!-- Add this to your HTML -->
+ * <script src="https://js.rotate.app/embed.js"></script>
+ * 
+ * <!-- Simple payment button -->
+ * <button data-rotate-pay data-amount="29.99" data-merchant="1000000" data-platform="1000000">
+ *   Pay $29.99
+ * </button>
+ * 
+ * <!-- Or use JavaScript -->
+ * <script>
+ *   Rotate.checkout({
+ *     amount: 29.99,
+ *     merchantId: 1000000,
+ *     platformId: 1000000,
+ *     onSuccess: (payment) => console.log('Paid!', payment)
+ *   });
+ * </script>
+ * ```
+ */
+
+// ==================== TYPES ====================
+
+interface RotateCheckoutOptions {
+  amount: number;
+  merchantId: number;
+  platformId: number;
+  currency?: 'SOL' | 'USDC' | 'USDT' | 'USD';
+  description?: string;
+  orderRef?: string;
+  allowTips?: boolean;
+  brandName?: string;
+  brandLogo?: string;
+  brandColor?: string;
+  successUrl?: string;
+  cancelUrl?: string;
+  popup?: boolean;
+  onSuccess?: (payment: PaymentResult) => void;
+  onCancel?: () => void;
+  onError?: (error: Error) => void;
+}
+
+interface PaymentResult {
+  linkId: number;
+  amount: number;
+  currency: string;
+  transactionId: string;
+  paidAt: number;
+}
+
+interface RotateButtonOptions extends RotateCheckoutOptions {
+  element: HTMLElement;
+  label?: string;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'solid' | 'outline' | 'ghost';
+}
+
+// ==================== STYLES ====================
+
+const BUTTON_BASE_STYLES = `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+`;
+
+const BUTTON_SIZES: Record<string, string> = {
+  sm: 'padding: 8px 16px; font-size: 14px; border-radius: 6px;',
+  md: 'padding: 12px 24px; font-size: 16px; border-radius: 8px;',
+  lg: 'padding: 16px 32px; font-size: 18px; border-radius: 10px;',
+};
+
+const SPINNER_CSS = `
+  @keyframes rotate-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+`;
+
+// ==================== UTILITY FUNCTIONS ====================
+
+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);
+}
+
+function createSpinner(): string {
+  return `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: rotate-spin 1s linear infinite;">
+    <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+    <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+  </svg>`;
+}
+
+function createWalletIcon(): string {
+  return `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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>`;
+}
+
+// ==================== MAIN ROTATE OBJECT ====================
+
+const Rotate = {
+  // Configuration
+  _config: {
+    baseUrl: 'https://rotate.app',
+    network: 'mainnet-beta' as 'devnet' | 'mainnet-beta',
+  },
+
+  /**
+   * Configure Rotate settings
+   */
+  configure(options: { baseUrl?: string; network?: 'devnet' | 'mainnet-beta' }) {
+    if (options.baseUrl) this._config.baseUrl = options.baseUrl;
+    if (options.network) this._config.network = options.network;
+  },
+
+  /**
+   * Open checkout popup/redirect
+   */
+  checkout(options: RotateCheckoutOptions) {
+    const {
+      amount,
+      merchantId,
+      platformId,
+      currency = 'USD',
+      description,
+      orderRef,
+      allowTips,
+      brandName,
+      brandLogo,
+      brandColor = '#8B5CF6',
+      successUrl,
+      cancelUrl,
+      popup = true,
+      onSuccess,
+      onCancel,
+      onError,
+    } = options;
+
+    // Build checkout URL
+    const params = new URLSearchParams({
+      amount: amount.toString(),
+      merchant: merchantId.toString(),
+      platform: platformId.toString(),
+      currency,
+      network: this._config.network,
+    });
+
+    if (description) params.set('description', description);
+    if (orderRef) params.set('ref', orderRef);
+    if (allowTips) params.set('tips', '1');
+    if (brandName) params.set('brand', brandName);
+    if (brandLogo) params.set('logo', brandLogo);
+    if (brandColor) params.set('color', brandColor.replace('#', ''));
+    if (successUrl) params.set('success', successUrl);
+    if (cancelUrl) params.set('cancel', cancelUrl);
+
+    const checkoutUrl = `${this._config.baseUrl}/checkout?${params.toString()}`;
+
+    if (popup) {
+      // Open popup window
+      const width = 450;
+      const height = 700;
+      const left = window.screenX + (window.outerWidth - width) / 2;
+      const top = window.screenY + (window.outerHeight - height) / 2;
+
+      const popupWindow = window.open(
+        checkoutUrl,
+        'rotate_checkout',
+        `width=${width},height=${height},left=${left},top=${top},popup=1`
+      );
+
+      if (popupWindow) {
+        // Listen for popup messages
+        const messageHandler = (event: MessageEvent) => {
+          if (event.data?.type === 'rotate_payment_success') {
+            onSuccess?.(event.data.payment);
+            window.removeEventListener('message', messageHandler);
+          } else if (event.data?.type === 'rotate_payment_cancel') {
+            onCancel?.();
+            window.removeEventListener('message', messageHandler);
+          } else if (event.data?.type === 'rotate_payment_error') {
+            onError?.(new Error(event.data.message));
+            window.removeEventListener('message', messageHandler);
+          }
+        };
+
+        window.addEventListener('message', messageHandler);
+
+        // Check if popup closed without completing
+        const checkClosed = setInterval(() => {
+          if (popupWindow.closed) {
+            clearInterval(checkClosed);
+            window.removeEventListener('message', messageHandler);
+          }
+        }, 500);
+      }
+    } else {
+      // Redirect
+      window.location.href = checkoutUrl;
+    }
+  },
+
+  /**
+   * Create a payment button
+   */
+  createButton(options: RotateButtonOptions) {
+    const {
+      element,
+      amount,
+      merchantId,
+      platformId,
+      currency = 'USD',
+      label,
+      size = 'md',
+      variant = 'solid',
+      brandColor = '#8B5CF6',
+      onSuccess,
+      onCancel,
+      onError,
+      ...checkoutOptions
+    } = options;
+
+    // Inject styles
+    if (!document.getElementById('rotate-styles')) {
+      const style = document.createElement('style');
+      style.id = 'rotate-styles';
+      style.textContent = SPINNER_CSS;
+      document.head.appendChild(style);
+    }
+
+    // Format amount
+    const formattedAmount = currency === 'SOL' 
+      ? `${amount} SOL` 
+      : `$${amount.toFixed(2)}`;
+
+    const buttonLabel = label || `Pay ${formattedAmount}`;
+
+    // Build styles
+    let buttonStyles = BUTTON_BASE_STYLES + BUTTON_SIZES[size];
+
+    if (variant === 'solid') {
+      buttonStyles += `
+        background: linear-gradient(135deg, ${brandColor} 0%, ${adjustColor(brandColor, -20)} 100%);
+        color: #ffffff;
+        box-shadow: 0 4px 14px ${brandColor}40;
+      `;
+    } else if (variant === 'outline') {
+      buttonStyles += `
+        background: transparent;
+        color: ${brandColor};
+        border: 2px solid ${brandColor};
+      `;
+    } else {
+      buttonStyles += `
+        background: ${brandColor}15;
+        color: ${brandColor};
+      `;
+    }
+
+    // Create button
+    const button = document.createElement('button');
+    button.setAttribute('style', buttonStyles);
+    button.innerHTML = `${createWalletIcon()}<span>${buttonLabel}</span>`;
+    button.className = 'rotate-pay-button';
+
+    // Add hover effect
+    button.addEventListener('mouseenter', () => {
+      button.style.transform = 'translateY(-2px)';
+      button.style.filter = 'brightness(1.1)';
+    });
+    button.addEventListener('mouseleave', () => {
+      button.style.transform = 'translateY(0)';
+      button.style.filter = 'brightness(1)';
+    });
+
+    // Handle click
+    let loading = false;
+    button.addEventListener('click', () => {
+      if (loading) return;
+
+      loading = true;
+      button.innerHTML = `${createSpinner()}<span>Processing...</span>`;
+      button.style.cursor = 'wait';
+
+      this.checkout({
+        amount,
+        merchantId,
+        platformId,
+        currency,
+        brandColor,
+        ...checkoutOptions,
+        onSuccess: (payment) => {
+          loading = false;
+          button.innerHTML = `<span>✓ Paid!</span>`;
+          button.style.background = '#10B981';
+          button.style.cursor = 'pointer';
+          onSuccess?.(payment);
+
+          // Reset after delay
+          setTimeout(() => {
+            button.innerHTML = `${createWalletIcon()}<span>${buttonLabel}</span>`;
+            button.style.background = variant === 'solid' 
+              ? `linear-gradient(135deg, ${brandColor} 0%, ${adjustColor(brandColor, -20)} 100%)`
+              : variant === 'outline' ? 'transparent' : `${brandColor}15`;
+          }, 3000);
+        },
+        onCancel: () => {
+          loading = false;
+          button.innerHTML = `${createWalletIcon()}<span>${buttonLabel}</span>`;
+          button.style.cursor = 'pointer';
+          onCancel?.();
+        },
+        onError: (error) => {
+          loading = false;
+          button.innerHTML = `${createWalletIcon()}<span>${buttonLabel}</span>`;
+          button.style.cursor = 'pointer';
+          onError?.(error);
+        },
+      });
+    });
+
+    // Replace element content
+    element.innerHTML = '';
+    element.appendChild(button);
+
+    return button;
+  },
+
+  /**
+   * Auto-initialize buttons from data attributes
+   */
+  init() {
+    // Find all elements with data-rotate-pay
+    const buttons = document.querySelectorAll('[data-rotate-pay]');
+
+    buttons.forEach((element) => {
+      const el = element as HTMLElement;
+      
+      const amount = parseFloat(el.dataset.amount || '0');
+      const merchantId = parseInt(el.dataset.merchant || '0');
+      const platformId = parseInt(el.dataset.platform || '0');
+
+      if (!amount || !merchantId || !platformId) {
+        console.warn('Rotate: Missing required data attributes (amount, merchant, platform)', el);
+        return;
+      }
+
+      this.createButton({
+        element: el,
+        amount,
+        merchantId,
+        platformId,
+        currency: (el.dataset.currency as any) || 'USD',
+        label: el.dataset.label || el.textContent?.trim(),
+        size: (el.dataset.size as any) || 'md',
+        variant: (el.dataset.variant as any) || 'solid',
+        brandColor: el.dataset.color || '#8B5CF6',
+        brandName: el.dataset.brand,
+        description: el.dataset.description,
+        orderRef: el.dataset.ref,
+        allowTips: el.dataset.tips === 'true',
+        successUrl: el.dataset.successUrl,
+        cancelUrl: el.dataset.cancelUrl,
+        popup: el.dataset.popup !== 'false',
+      });
+    });
+  },
+};
+
+// Auto-initialize on DOMContentLoaded
+if (typeof window !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => Rotate.init());
+  } else {
+    Rotate.init();
+  }
+
+  // Expose globally
+  (window as any).Rotate = Rotate;
+}
+
+export default Rotate;