Client Integration

import { useCallback } from 'react';

// Assumes the SDK script is already loaded in your index.html:
// <script src="https://consumer.gosurge.xyz/surge.js"></script>

export default function BuyNowPayLaterButton({ product }) {
  const handleClick = useCallback(async () => {
    // Get a session token from YOUR backend (never call the Surge API directly from the browser)
    const res = await fetch('/api/surge-checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        amount: product.priceKobo,
        title: product.name,
        orderReference: product.orderRef,
      }),
    });
    const { sessionToken } = await res.json();

    const surge = window.SurgeConnect.init();
    surge.openCheckout({
      sessionToken,

      onSuccess: ({ paymentPlanId }) => {
        // ✅ Plan confirmed — NOT yet charged.
        // Show a "Processing" screen; wait for the webhook to fulfill the order.
        console.log('Plan created:', paymentPlanId);
      },

      onCancel: () => {
        console.log('Customer closed the widget.');
      },

      onError: (error) => {
        console.error('Surge error:', error.message);
      },
    });
  }, [product]);

  return <button onClick={handleClick}>Buy Now, Pay Later</button>;
}