React

Before you begin, follow the JavaScript integration guide to load the SDK, create the shared client module, and configure the TypeScript declarations. This page covers only React-specific initialization and usage.

Integration Steps

Load the SDK in public/index.html or the application's HTML template:

<script src="./gld_v2.js"></script>

Preload it from the application entry point:

// src/main.jsx
import { createRoot } from 'react-dom/client';
import App from './App';
import { preloadGeeGuard } from './geeGuardClient';

preloadGeeGuard().catch(function (error) {
  console.error('GeeLabGuard initialization failed:', error);
});

createRoot(document.getElementById('root')).render(<App />);

Obtain the GeeToken in a business component:

import { useState } from 'react';
import { getGeeToken } from './geeGuardClient';

export default function CheckoutButton({ orderId }) {
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');

  async function handleCheckout() {
    setSubmitting(true);
    setError('');
    try {
      const { token, offline } = await getGeeToken();
      await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ orderId, gee_token: token, offline }),
      });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to process the request');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <>
      <button type="button" disabled={submitting} onClick={handleCheckout}>
        {submitting ? 'Processing…' : 'Submit order'}
      </button>
      {error && <p role="alert">{error}</p>}
    </>
  );
}

React StrictMode may mount components more than once in development. Cache the initialization Promise. Do not initialize the SDK directly in a component body or in a useEffect without a dependency array.

React

Integration Steps

On this page