Evervault 反应.js SDK

这个 Evervault (英语) React.js SDK是用于加密客户端数据的工具包. 使用 Evervault React.js SDK 意味着您的客户数据永远不会不加密他们的设备.

开始

在开始Evervault React SDK之前,您需要 创建账户 和一个团队.

文档

见"埃弗沃" React.js SDK 文档。 。 。 .

安装

我们的反应.js SDK通过 无,并可以使用您的首选软件包管理器安装.

# Using npm
npm install @evervault/react

# Using yarn
yarn add @evervault/react

初始化 SDK

安装后, 将 React.js SDK 初始化, 使用您的团队和 App ID 在 Evervault 板盘。 。 。 .

使用 <EvervaultProvider> 作为您的应用程序的提供者.

import { EvervaultProvider } from "@evervault/react";
import ChildComponent from "../ChildComponent";
export default function App() {
  return (
    <EvervaultProvider teamId="<TEAM_ID>" appId="<APP_ID>">
      <ChildComponent />
    </EvervaultProvider>
  );
}

加密字符串

一旦你添加 <EvervaultProvider>,可以使用 useEvervault() 钩住它的孩子。 这个 useEvervault() 钩子返回初始化实例 Java 脚本 SDK,包括 encrypt() 函数.

import { useState } from "react";
import { useEvervault } from "@evervault/react";

export default function ChildComponent() {
  const evervault = useEvervault();
  const [message, setMessage] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const encryptedMessage = await evervault.encrypt(message);
    alert(encryptedMessage);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
      <button>Submit</button>
    </form>
  );
}

参考文献

<EvervaultProvider />

这个 EvervaultProvider 组件曝光 useEvervault() 钩入任何嵌入式组件.

<EvervaultProvider teamId="<TEAM_ID>" appId="<APP_ID>">
  <App />
</EvervaultProvider>

道具

useEvervault()

这个 useEvervault 儿童可以使用钩子 EvervaultProvider,并返回已初始化的 Evervault 实例 Java 脚本 SDK。返回对象所包含的功能之一是 encrypt(),它可以传递任何纯文本数据结构.

const evervault = useEvervault();

evervault.encrypt(data)

使用 Evervault 加密Evervault Strings可以用于我们所有的产品。 可在返回的值上访问 useEvervault() 钩. 要使用React.js SDK加密数据,只需通过一个 String 或一个 Object 输入 evervault.encrypt() 函数.

加密数据可以传递到您的服务器,并正常存储在数据库中. Evervault的其他服务也可以使用.

const evervault = useEvervault();

const encrypted = await evervault.encrypt("Hello, world!");

<EvervaultInput />

使用 Evervault 输入 安全收集加密的持卡人数据。 Evervault Introductions服务于从Evervault的PCI兼容基础设施直接取回的iFrame,这可以将您的PCIDS兼容范围降低到最简单的形式(SAQ A).

Evervault 输入也支持 主题 和自定义样式,这样您就可以自定义输入在您的用户界面中的样子.

道具

获取卡片数据

要访问加密的卡片数据,必须经过 onChange 处理者。 此功能在卡片数据更新后随即被调用,并通过一个带有加密卡片细节以及验证信息的对象.

function Payment() {
  const handleChange = ({ encryptedCard, isValid }) => {
    if (isValid) {
      console.log(encryptedCard);
    }
  };

  return <EvervaultInput onChange={handleChange} />;
}

更改召回参数

在Change回调时,将传递以下对象作为参数.

{
  "encryptedCard": {
    "type": "visa_credit",
    "number": "ev:encrypted:abc123",
    "cvc": "ev:encrypted:def456",
    "expMonth": "01",
    "expYear": "23"
    "lastFour": "1234"
  },
  "isValid": true,
  "isPotentiallyValid": true,
  "isEmpty": false,
  "error": {
    "type": "invalid_pan",
    "message": "The credit card number you entered was invalid"
  }
}

本地化

IFrame 可以在初始化时通过提供一组标签进行本地化 配置。 。 。 .

const config = {
  cardNumberLabel: 'Numéro de carte:',
  expirationDateLabel: 'Date d'expiration:',
  securityCodeLabel: 'Code de sécurité:'
}

<EvervaultInput onChange={handleChange} config={config} />

自定义字体

自定义字体可以从 Google 下载 字体 API 编辑 font-family 设定与 fontFamily 配置参数

const config = {
  fontUrl: 'https://fonts.googleapis.com/css2?family=Poppins:wght@100;800&display=swap',
  fontFamily: 'Poppins, sans-serif',
  inputFontSize: '20px',
  inputBoxShadow: '2px 2px 2px 1px rgba(0, 0, 255, .2)',
  labelFontSize: '13px',
  labelWeight: '400'
}

<EvervaultInput onChange={handleChange} config={config} />

iFrame 装入状态

如果您需要等待服务输入器的 iFrame 来加载, 才能进行一些动作, 您可以使用 onInputsLoad 道具召回 :

<EvervaultInput
  onInputsLoad={() => {
    console.log("Inputs has loaded!");
  }}
/>

<Card />

默认. 即时出山出会.

<Card />

与 preload。 。 。 . 把卡藏起来 然后打电话 show() 何时通过裁判 用户到达支付步骤。 牌坐后退步时有用.

const cardRef = useRef(null);

<Card ref={cardRef} preload />;

// Later.
cardRef.current?.show();

<EvervaultReveal />

使用 埃弗沃尔启示录 显示加密卡 详细信息,在安全的 iFrame 中以纯文本显示用户的加密卡片细节 埃弗沃尔. 在使用"启示录"之前,首先需要创建回放来解密卡片细节; Reveal 期望从中继器接收出作为 JSON 对象的卡片数据,其方案如下.

说明: 您创建的终点必须设置适用的 CORS 信头, 以便 可以从输入 iFrame 访问。 否则你的要求就会失败!

{
  "cardNumber": "string | number",
  "cvv": "string | number",
  "expiry": "string | number"
}

一旦你找到返回加密卡片数据的终点,你将需要创建一个 Evervault 输入中继器 这将解密 加密的卡片数据通过它,在它到达iFrame之前. 一旦你创造了 您可以将组件添加到您的 React app 中.

export default function Reveal() {
  const request = {
    url: "https://example-com.relay.evervault.com",
    method: "GET",
    headers: {
      Authorization: "Bearer ey...",
    },
  };

  return (
    <main>
      <EvervaultReveal request={request}></EvervaultReveal>
    </main>
  );
}

唯一需要的领域是 request 中选择一个支持所有相同字段的对象 Javascript 请求对象。URL必须是 Evervault 输入 重播您先前配置的 .

道具

捐款

GitHub 上欢迎错误报告和拉取请求 https://github.com/evervault/evervault-resact. (原始内容存档于2018-09-29)。 。 。 .

反馈

问题还是反馈? 告诉我们。 。 。 .