React

Getting Started

Our React SDK is distributed via npm and can be installed using your preferred package manager.

1npm install @evervault/react

Once installed, Initialize the SDK by wrapping your application with the EvervaultProvider component.

1import { EvervaultProvider } from "@evervault/react";
2
3export default function App() {
4  return (
5    <EvervaultProvider teamId="<TEAM_ID>" appId="<APP_ID>">
6      ...
7    </EvervaultProvider>
8  );
9}

Once you've added the <EvervaultProvider>, you can access the useEvervault() hook in its children. The useEvervault() hook returns an initialized instance of the JavaScript SDK, which includes the encrypt() function. The encrypt() function can be used to encrypt plaintext data in your application.

1import { useState } from "react";
2import { useEvervault } from "@evervault/react";
3
4export default function ChildComponent() {
5  const evervault = useEvervault();
6  const [message, setMessage] = useState("");
7
8  const handleSubmit = async (e) => {
9    e.preventDefault();
10    const encryptedMessage = await evervault.encrypt(message);
11    alert(encryptedMessage);
12  };
13
14  return (
15    <form onSubmit={handleSubmit}>
16      <input value={message} onChange={(e) => setMessage(e.target.value)} />
17      <button>Submit</button>
18    </form>
19  );
20}

Components

EvervaultProvider

Sets up a client for interacting with Evervault. You must provide a teamId and appId to the provider.

1<EvervaultProvider teamId={String} appId={String}>
2  {children}
3</EvervaultProvider>

Props

teamIdRequiredString
The unique identifier for your Team.
appIdRequiredString
The unique identifier for your App.
onLoadError(error: unknown) => void
A callback function that is called if the SDK fails to load. Use the isScriptLoadError utility to determine the cause of the error.
loadTimeoutNumber
The timeout in milliseconds for the SDK to load. Defaults to 15000 (15s).

The EvervaultProvider accepts a ref that exposes a reload() method that you can use to reload the script if it fails.

Ref Methods

reload() => void
Attempts to reload the Evervault script. Typically called in response to an onLoadError event.

Card

The Card Component allows you to collect and encrypt card data in a completely PCI-compliant environment. See Card Collection for more information.

1import { Card, themes } from "@evervault/react";
2const theme = themes.clean();
3
4export function Checkout() {
5  const handleChange = (details) => {
6    console.log(details);
7  };
8
9  return (
10    <div>
11      <Card theme={theme} onChange={handleChange} />
12    </div>
13  );