React

开始前，请先按照 JavaScript 接入指南加载 SDK、创建公共客户端模块并配置 TypeScript 类型。本页只说明 React 特有的初始化与调用方式。

接入步骤

在 public/index.html 或应用 HTML 模板中加载 SDK：

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

在应用入口预加载：

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

preloadGeeGuard().catch(function (error) {
  console.error('GeeLabGuard 初始化失败:', error);
});

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

在业务组件获取 GeeToken：

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 : '请求处理失败');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <>
      <button type="button" disabled={submitting} onClick={handleCheckout}>
        {submitting ? '处理中…' : '提交订单'}
      </button>
      {error && <p role="alert">{error}</p>}
    </>
  );
}

React StrictMode 在开发环境可能重复挂载组件。请缓存初始化 Promise，不要在组件函数体或没有依赖数组的 useEffect 中直接初始化 SDK。

React

接入步骤

On this page