@ basis-理论/反应代理

[大 需要使用HTTPS. 用于验证的卡片网络SDK(Visa和Mastercard)要求您的应用程序在HTTPS上服务,即使在开发中也如此. 普通HTTP的验证失败 .

对于地方发展,我们建议 云浮快隧道 用零配置在 HTTPS 上曝光您的本地服务器 :

# Install cloudflared
brew install cloudflared

# Start a quick tunnel pointing to your local dev server
cloudflared tunnel --url http://localhost:3000

这给你一个临时的 https://*.trycloudflare.com URL 您可以用于测试 .

安装

npm install @basis-theory/react-agentic

设置

包装您的应用程序 BtAiProvider数字 :

import { BtAiProvider } from '@basis-theory/react-agentic';

function App() {
  return (
    <BtAiProvider
      apiKey="your-public-api-key"
      environment="production"
      passkeyTimeoutMs={120000}        // optional: 2 min passkey timeout
      sessionReadyTimeoutMs={15000}    // optional: 15s session ready timeout
    >
      <YourComponent />
    </BtAiProvider>
  );
}

BtAi 提供道具

SDK 准备状态

这个 useAgentic 钩子会暴露 ready 布尔表示基础卡网SDKs(Visa和Mastercard)何时完成初始化. 在SDK准备就绪之前,用这个来防止调用核查方法.

import { useAgentic } from '@basis-theory/react-agentic';

function VerifyButton() {
  const { ready, verifyEnrollment } = useAgentic();

  return (
    <button onClick={() => verifyEnrollment('enrollment-id')} disabled={!ready}>
      {ready ? 'Verify' : 'Initializing...'}
    </button>
  );
}

• false 初始化和SDK初始化期间
• true 至少一个卡片网络SDK(Visa或Mastercard)已经准备好
• 恢复为 false 如果提供者卸载或环境发生变化

所有核查方法verifyEnrollment, (中文(简体) ), verifyInstruction自动等待 ready 在执行前,所以在初始化完成之前可以安全地给他们打电话——他们会排队直到SDK准备好.

颗粒网状态,使用 getStatus() 返回时 { visa: boolean, mastercard: boolean }。 。 。 .

钩子

useAgentic() 编号 : useBtAi()

与SDK互动的主钩. 返回验证方法和SDK状态.

import { useAgentic } from '@basis-theory/react-agentic';

function MyComponent() {
  const {
    ready,              // boolean - whether the SDK is ready
    apiKey,             // string - current API key
    environment,        // string - current environment
    updateApiKey,       // (newKey: string) => void
    getStatus,          // () => { visa: boolean, mastercard: boolean }
    verifyEnrollment,   // (enrollmentId: string) => Promise
    verifyInstruction,  // (agentId: string, instructionId: string) => Promise
  } = useAgentic();
}

两者 useAgentic() 财务报告和审定财务报表 useBtAi() 返回同一接口——以您喜欢的为准.

useEnrollmentVerification()

基于行动的钩子用于建立 自定义注册验证 UI。根据 status 并要求相应的行动来推进流动.

这个钩子处理两个卡片网络的完整管弦:

• 签证- 完成
• 总卡: 弹出式认证 – 完成

状态

示例

import { useEnrollmentVerification } from '@basis-theory/react-agentic';

function CustomEnrollmentUI({ enrollmentId }) {
  const {
    status,           // current status (see table above)
    error,            // string | null — error message when status is 'error'
    otpMethods,       // available OTP methods when status is 'otp_required'
    start,            // () => Promise — begin or restart verification
    selectOtpMethod,  // (methodId: string) => Promise — select an OTP delivery method
    submitOtp,        // (code: string) => Promise — submit the OTP code
    confirmPasskey,   // () => Promise — trigger passkey creation (Visa) or popup (Mastercard)
    retry,            // () => Promise — retry the current step (or restart if needed)
    cancel,           // () => void — cancel and reset to idle
  } = useEnrollmentVerification({ enrollmentId });

  // Render your own UI based on status
}

如何构建自己的用户界面

• 打电话 start() 以启动入学核查流程
• 打开 status 使每一步骤具有适当的UI:
  • loading 显示自旋器或加载指示器
  • otp_required - 从 otpMethods 打电话 selectOtpMethod(methodId) 选择时
  • otp_sent ——提供代码输入字段并调用 submitOtp(code) 提交时
  • passkey_required 显示快速/ 按钮解释密码创建和呼叫 confirmPasskey()
  • popup_required 显示一个快速/ 按钮解释 Mastercard 弹出认证和呼叫 confirmPasskey()
  • verified 显示成功信息, 继续您的应用程序流
  • error - 显示 error 带有按钮的信件 retry() 或者说 start() 再来一次
• 使用 cancel() 让用户中止并重置到 idle 任何时候
• 钩子在内部管理所有的卡- 网络管弦乐—— 您只需要渲染UI和调用动作

useInstructionVerification()

基于行动的钩子用于建立 自定义指令校验。处理两个卡片网络的密码认证:

• 签证: 密码认证 – 完成
• 总卡: 弹出式认证 – 完成

状态

示例

import { useInstructionVerification } from '@basis-theory/react-agentic';

function CustomInstructionUI({ agentId, instructionId }) {
  const {
    status,           // current status (see table above)
    error,            // string | null — error message when status is 'error'
    start,            // () => Promise — begin or restart verification
    confirmPasskey,   // () => Promise — trigger passkey auth (Visa) or popup (Mastercard)
    retry,            // () => Promise — retry the current step (or restart if needed)
    cancel,           // () => void — cancel and reset to idle
  } = useInstructionVerification({ agentId, instructionId });

  // Render your own UI based on status
}

如何构建自己的用户界面

• 打电话 start() 以启动指令验证流程
• 打开 status 使每一步骤具有适当的UI:
  • loading 显示自旋器或加载指示器
  • passkey_required 显示一个快速/按钮解释 Visa 密码认证和呼叫 confirmPasskey()
  • popup_required 显示一个快速/ 按钮解释 Mastercard 弹出认证和呼叫 confirmPasskey()
  • verified 显示成功信息, 继续您的应用程序流
  • error - 显示 error 带有按钮的信件 retry() 或者说 start() 再来一次
• 使用 cancel() 让用户中止并重置到 idle 任何时候
• 钩子在内部管理所有的卡- 网络管弦乐—— 您只需要渲染UI和调用动作

核查

打开一个模式,引导用户通过入学验证。 自动处理Visa(OTP + 密码创建)和Mastercard(流行认证)的流量.

import { useAgentic } from '@basis-theory/react-agentic';

function EnrollmentExample() {
  const { verifyEnrollment } = useAgentic();

  const handleVerify = async () => {
    try {
      const result = await verifyEnrollment('enrollment-id');
      console.log('Verified:', result);
    } catch (err) {
      console.error('Verification failed:', err.message);
    }
  };

  return <button onClick={handleVerify}>Verify Enrollment</button>;
}

校验

打开一个模式,通过指令验证(passkey认证)来引导用户. 支持Visa和Mastercard卡两种卡.

import { useAgentic } from '@basis-theory/react-agentic';

function InstructionExample() {
  const { verifyInstruction } = useAgentic();

  const handleVerify = async () => {
    try {
      const result = await verifyInstruction('agent-id', 'instruction-id');
      console.log('Verified:', result);
    } catch (err) {
      console.error('Verification failed:', err.message);
    }
  };

  return <button onClick={handleVerify}>Verify Instruction</button>;
}

公用事业

collectDeviceContext()

收集随核查请求而发送的浏览器和设备指纹数据. 如果你正在构建一个完全定制的集成,就很有用.

import { collectDeviceContext } from '@basis-theory/react-agentic';

const context = collectDeviceContext();
// { userAgent, language, platform, screenResolution, ... }

许可证

麻省理工学院