toc

• React.js SDK
  • Installation
  • Initialization
  • Reference
    • evervault.encrypt()
    • <EvervaultInput>

React.js SDK

A full reference of our React.js SDK.

The Evervault React.js SDK is a toolkit for encrypting data in the browser.

You can use our React.js SDK to encrypt data — rather than with Relay — and still send it to a third-party via Relay. Encrypting with our frontend SDKs is best for developers who want to avoid the network latency of Relay and/or want to avoid sending plaintext data to an Evervault endpoint.

You don’t need to change your database configuration. You can store Evervault-encrypted data in your database as you would the plaintext version.

Installation

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

bash
npm install @evervault/react

Initialization

Once installed, initialize the React.js SDK with your team's unique ID found in the Settings. Use an EvervaultProvider component as a provider for your app.

javascript
import { EvervaultProvider } from "@evervault/react";
export const App = () => (
  <EvervaultProvider teamId={"<YOUR-TEAM-ID>"}>
    <ChildComponent />
  </EvervaultProvider>;
);

Reference

The Evervault React.js SDK exposes two functions.

evervault.encrypt()

evervault.encrypt() encrypts data for use in your Cages. To encrypt data on the client, simply pass the value into the evervault.encrypt() function. Store the encrypted data in your database as normal. Send it to your API and use our Node.js SDK to forward the data to your Cage.

javascript
async evervault.encrypt(data: Object | Array | String | Number);

Any time you want to encrypt data, simply import useEvervault in your component:

jsx
import React from 'react';
import { useEvervault } from '@evervault/react';

export const MyComponent = ({ someState }) => {
  const evervault = useEvervault();
  const [encryptedState, setEncryptedState] = React.useState(undefined);

  const encryptState = React.useCallback(
    async () => setEncryptedState(await evervault.encrypt(someState)),
    [setEncryptedState, evervault]
  );

  React.useEffect(() => encryptState(), [encryptState])

  return (
    {encryptedState && <p>encryptedState</p>}
  );
}

Expand

<EvervaultInput>

Self-Serve customers can only use Inputs in debug mode, which is not safe for production use.

The <EvervaultInput> component makes it easy to use evervault.inputs() in your React application.

When you use the <EvervaultInput> component it initialises Evervault Inputs which make it easy to collect encrypted cardholder data in a completely PCI-compliant environment.

Evervault Inputs are served within an iFrame retrieved directly from Evervault’s PCI-compliant infrastructure, which can reduce your PCI DSS compliance scope to the simplest form (SAQ-A) once integrated correctly.

Simply include the component in your JSX to get started.

We also support themes and custom styles so you can customise how Inputs looks in your UI.

javascript
<EvervaultInput onChange=(function) config=(String | Object)></EvervaultInput>

Supported styles

When passing a config object for styling Inputs, the following key-value pairs are supported.

Retrieving card data

To access the card data simply pass in a function as the onChange parameter. Any time the values in the form change, your function will receive an object containing the latest card details.

You can see the format of this object below:

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

Expand

Sample Code

Here's a full example of how to implement Evervault Inputs in your React app:

javascript
const evervault = useEvervault();
const [cardDetails, setCardDetails] = useState(undefied);

return (
  <EvervaultInput onChange={setCardDetails}></EvervaultInput>
)

Was this page useful?

YesNo

Send comment