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>;
}

'use client';

import { useEffect, useRef, useCallback } from 'react';

// Dynamically load the SDK and track when it is ready (avoids SSR issues
// and prevents calling window.SurgeConnect before the script has loaded)
function useSurgeSDK() {
  const ready = useRef(false);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    if ((window as any).SurgeConnect) { ready.current = true; return; }

    const script = document.createElement('script');
    script.src = 'https://consumer.gosurge.xyz/surge.js';
    script.async = true;
    script.onload = () => { ready.current = true; };
    document.body.appendChild(script);
  }, []);

  return ready;
}

export default function BuyNowPayLaterButton({ priceKobo, title, orderRef }: {
  priceKobo: number;
  title: string;
  orderRef: string;
}) {
  const sdkReady = useSurgeSDK();

  const handleClick = useCallback(async () => {
    if (!sdkReady.current) {
      alert('Checkout is still loading — please try again in a moment.');
      return;
    }

    const res = await fetch('/api/surge-checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount: priceKobo, title, orderReference: orderRef }),
    });
    const { sessionToken } = await res.json();

    const surge = (window as any).SurgeConnect.init();
    surge.openCheckout({
      sessionToken,
      onSuccess: ({ paymentPlanId }: { paymentPlanId: string }) => {
        window.location.href = `/orders/pending?plan=${paymentPlanId}`;
      },
      onCancel: () => {},
      onError: (err: { message: string }) => console.error(err.message),
    });
  }, [priceKobo, title, orderRef, sdkReady]);

  return <button onClick={handleClick}>Pay in installments</button>;
}

// Initialize the SDK
const surge = SurgeConnect.init();

// Open the checkout modal
surge.openCheckout({
  sessionToken: "fcs_7a2b9d1e...", // The token from your backend

  onSuccess: ({ paymentPlanId }) => {
    // ✅ Plan confirmed — show a pending/processing state.
    console.log("Plan created:", paymentPlanId);
  },

  onCancel: () => {
    console.log("User closed the checkout widget.");
  },

  onError: (error) => {
    console.error("Surge Error:", error.message);
  }
});