默认反应

容易嵌入的反应钩 阿皮德克·沃尔 在任何反应应用程序中.

默认反应 | 断层 | 联署材料

安装

软件包

npm install @apideck/vault-react

先决条件

在打开虚拟模式之前 @apideck/vault-react,您需要使用 Vault API 或我们中的一个 SDKs 软件中查找更多内容 文档。 。 。 .

使用量

将您获得的JWT从Vault会话传到 open 函数以打开 Vault 模式.

import { useVault } from '@apideck/vault-react';

function App() {
  const { open } = useVault();

  return (
    <button onClick={() => open({ token: 'REPLACE_WITH_SESSION_TOKEN' })}>
      Open Vault
    </button>
  );
}

export default App;

如果您只想要显示单个统一 API 的集成, 您可以通过 unifiedApi 道具 (英语). 如果您想要打开 Vault 只进行一个整合, 您可以提供 serviceId 道具 (英语).

import { useVault } from '@apideck/vault-react';

function App() {
  const { open } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          unifiedApi: 'file-storage',
          serviceId: 'dropbox',
        })
      }
    >
      Open Vault
    </button>
  );
}

export default App;

如果你想在模式打开和关闭时得到通知,你可以提供 onReady 财务报告和审定财务报表 onClose 选项。 您也可以提供 onConnectionChange 财务报告和审定财务报表 onConnectionDelete 选项,以便在连接状态发生变化或被删除时得到通知.

import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  function onClose() {
    console.log('close!');
  }

  function onReady() {
    console.log('ready!');
  }

  function onConnectionChange(connection: Connection) {
    console.log('changed!', connection);
    if (connection.state === 'callable') {
      close();
    }
  }

  function onConnectionDelete(connection: Connection) {
    console.log('ready!', connection);
  }

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          onReady,
          onClose,
          onConnectionChange,
          onConnectionDelete,
        })
      }
    >
      Open Vault
    </button>
  );
}

export default App;

如果你想打开一个特定的视图,你可以通过 initialView 道具 (英语). 现有观点是: settings, (中文(简体) ), configurable-resources,以及 custom-mapping。 。 。 .

import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          unifiedApi: 'accounting',
          serviceId: 'quickbooks',
          initialView: 'custom-mapping',
        })
      }
    >
      Open Vault
    </button>
  );
}

如果您想用特定语言打开保险库, 您可以通过一个本地语言 。 现有地点是: en (违约), nl, (中文(简体) ), de, (中文(简体) ), fr,以及 es。 。 。 .

import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          locale: 'nl',
        })
      }
    >
      Open Vault
    </button>
  );
}

如果您想要在底部显示语言切换, 您可以提供 showLanguageSwitch 道具 (英语).

import { useVault } from '@apideck/vault-react';

function App() {
  const { open, close } = useVault();

  return (
    <button
      onClick={() =>
        open({
          token: 'REPLACE_WITH_SESSION_TOKEN',
          locale: 'nl',
          showLanguageSwitch: true,
        })
      }
    >
      Open Vault
    </button>
  );
}