Web SDK

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

const SDK_URL = 'https://cdn.yourflexpay.com/v1/sdk.min.js';

export function useFlexOneTap({ merchantId, apiKey, debug = false }) {
  const sdkRef = useRef(null);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    let cancelled = false;

    function init() {
      if (cancelled || !window.FlexOneTap) return;
      sdkRef.current = new window.FlexOneTap({ merchantId, apiKey, debug });
      setReady(true);
    }

    if (window.FlexOneTap) {
      init();
      return;
    }

    // Reuse the tag if another component already added it
    let script = document.querySelector(`script[src="${SDK_URL}"]`);
    if (!script) {
      script = document.createElement('script');
      script.src = SDK_URL;
      script.async = true;
      document.body.appendChild(script);
    }

    script.addEventListener('load', init);
    return () => {
      cancelled = true;
      script.removeEventListener('load', init);
    };
  }, [merchantId, apiKey, debug]);

  return { sdk: sdkRef.current, ready };
}

import { useState } from 'react';
import { useFlexOneTap } from './useFlexOneTap';

export function CheckoutButton({ orderId, amount }) {
  const { sdk, ready } = useFlexOneTap({
    merchantId: process.env.REACT_APP_FLEX_MERCHANT_ID,
    apiKey: process.env.REACT_APP_FLEX_API_KEY,
    debug: process.env.NODE_ENV !== 'production',
  });

  const [status, setStatus] = useState('idle');

  const pay = () => {
    if (!sdk) return;
    setStatus('pending');

    sdk.open({
      reference: `ORDER-${orderId}`,
      amount,
      comment: `Order #${orderId}`,
      duration: 30,
      onSuccess: () => setStatus('success'),
      onError: () => setStatus('error'),
      onClose: () => setStatus((s) => (s === 'pending' ? 'idle' : s)),
    });
  };

  return (
    <div>
      <button onClick={pay} disabled={!ready || status === 'pending'}>
        {status === 'pending' ? 'Waiting for payment…' : 'Pay with FLEX'}
      </button>

      {status === 'success' && <p>Payment received. Confirming your order…</p>}
      {status === 'error' && <p>Payment failed. Please try again.</p>}
    </div>
  );
}

'use client';

import { useRef, useState } from 'react';
import Script from 'next/script';

export default function FlexCheckout({ orderId, amount }) {
  const sdkRef = useRef(null);
  const [ready, setReady] = useState(false);
  const [status, setStatus] = useState('idle');

  const handleLoad = () => {
    sdkRef.current = new window.FlexOneTap({
      merchantId: process.env.NEXT_PUBLIC_FLEX_MERCHANT_ID,
      apiKey: process.env.NEXT_PUBLIC_FLEX_API_KEY,
      debug: process.env.NODE_ENV !== 'production',
    });
    setReady(true);
  };

  const pay = () => {
    if (!sdkRef.current) return;
    setStatus('pending');

    sdkRef.current.open({
      reference: `ORDER-${orderId}`,
      amount,
      comment: `Order #${orderId}`,
      duration: 30,
      onSuccess: () => setStatus('success'),
      onError: () => setStatus('error'),
      onClose: () => setStatus((s) => (s === 'pending' ? 'idle' : s)),
    });
  };

  return (
    <>
      <Script
        src="https://cdn.yourflexpay.com/v1/sdk.min.js"
        strategy="afterInteractive"
        onLoad={handleLoad}
      />

      <button onClick={pay} disabled={!ready || status === 'pending'}>
        {status === 'pending' ? 'Waiting for payment…' : 'Pay with FLEX'}
      </button>

      {status === 'success' && <p>Payment received. Confirming your order…</p>}
      {status === 'error' && <p>Payment failed. Please try again.</p>}
    </>
  );
}

import FlexCheckout from './FlexCheckout';

export default function CheckoutPage() {
  // Fetch the order server-side, pass the amount down
  const order = { id: '1042', amount: 5000 };

  return (
    <main>
      <h1>Checkout</h1>
      <FlexCheckout orderId={order.id} amount={order.amount} />
    </main>
  );
}

import { useRef, useState } from 'react';
import Script from 'next/script';

export default function CheckoutPage() {
  const sdkRef = useRef(null);
  const [ready, setReady] = useState(false);

  return (
    <>
      <Script
        src="https://cdn.yourflexpay.com/v1/sdk.min.js"
        strategy="afterInteractive"
        onLoad={() => {
          sdkRef.current = new window.FlexOneTap({
            merchantId: process.env.NEXT_PUBLIC_FLEX_MERCHANT_ID,
            apiKey: process.env.NEXT_PUBLIC_FLEX_API_KEY,
            debug: false,
          });
          setReady(true);
        }}
      />

      <button
        disabled={!ready}
        onClick={() =>
          sdkRef.current?.open({
            reference: `ORDER-${Date.now()}`,
            amount: 5000,
            comment: 'Order #1042',
            duration: 30,
            onSuccess: () => console.log('success'),
            onError: () => console.log('error'),
            onClose: () => console.log('closed'),
          })
        }
      >
        Pay with FLEX
      </button>
    </>
  );
}