默认核心

我们建议使用新的 @ apideck/ 自动反应 或者说 @ apideck/vault-js (英语) 软件包.

要嵌入的回放组件 阿皮德克·沃尔 在任何反应应用程序中.

转到 开发者文件 以向导.

反弹 | 联署材料 | 阴道

使用量

安装软件包

npm install @apideck/react-vault

创建一个 默认会话 在您的应用程序中获取 JSON Web Token . 建议做这个服务器侧,所以你不会暴露你的API密钥.

与 @apideck/node数字 :

npm install @apideck/node

import { Apideck } from '@apideck/node';

const apideck = new Apideck({
  apiKey: 'REPLACE_WITH_API_KEY',
  appId: 'REPLACE_WITH_APP_ID',
  consumerId: 'REPLACE_WITH_CONSUMER_ID',
});

const { data } = await apideck.vault.sessionsCreate({});

console.log('Token:', data.session_token);

将 JSON 的 Web Token 传递到 Vault 组件 :

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

const MyComponent = () => {
  return (
    <Vault
      token="REPLACE_WITH_SESSION_TOKEN"
      trigger={<button>Open Vault</button>}
    />
  );
};

export default MyComponent;

如果你没有使用 尾风 CSS 在您的项目中, 将样式包含在您的项目中 :

import '@apideck/react-vault/dist/styles.css';

使用时 尾风 CSS 您应当将软件包路径包含在内容路径中 tailwind.config.js。 。 。 .

// tailwind.config.js

module.exports = {
  content: ['./node_modules/@apideck/react-vault/**/*.js'],
  plugins: [require('@tailwindcss/forms')]
  ...
}

如果您想要将连接结果范围扩大到一个单一的统一 API,您可以通过给 unifiedApi 道具 (英语). 如果您想要打开 Vault 只为单个连接器, 您也应该提供 serviceId。 。 。 .

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

const MyComponent = () => {
  return (
    <Vault
      token="REPLACE_WITH_SESSION_TOKEN"
      unifiedApi="accounting"
      serviceId="quickbooks"
      trigger={<button>Open Vault</button>}
    />
  );
};

export default MyComponent;

如果您想要手动控制模式的打开和关闭,您可以提供 open 财务报告和审定财务报表 onClose 道具来.

import { Button } from '@apideck/components';
import { Vault } from '@apideck/react-vault';
import { useState } from 'react';

const VaultButton = ({ token }) => {
  const [openVault, setOpenVault] = useState(false);

  const toggleVault = () => {
    setOpenVault(!openVault);
  };

  return (
    <div className="flex items-center space-x-3">
      <Button text="Open Vault" onClick={toggleVault} />
      <Vault token={token} open={openVault} onClose={toggleVault} />
    </div>
  );
};

export default VaultButton;

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

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

const MyComponent = () => {
  return (
    <Vault
      token="REPLACE_WITH_SESSION_TOKEN"
      unifiedApi="accounting"
      serviceId="quickbooks"
      initialView="custom-mapping"
      trigger={<button>Open Vault</button>}
    />
  );
};

export default MyComponent;

如果您想要在模式上方提供自定义标识, 您可以设置 logo 财产 theme 您可以通过会话提供. 查看 API 文档。 。 。 .

属性

部署

用户 np (b) 向国家防范机制公布(需要2份表格)。 新版本发布后确保升级 @apideck/react-vault 软件包 iframe-vault 计划并部署.