toc

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);
ParameterTypeDescription
dataObject, Array, String or NumberData to be encrypted

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>}
);
}

<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>
ParameterTypeDescription
onChangeFunctionA function that is called whenever the submission changes.
configString or ObjectA theme string (supported: minimal or material), or a config object for custom styles. See supported styles below.

Supported styles

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

ParameterTypeDescription
themeStringThe base styling for Inputs. Currently supports minimal and material
heightStringThe height of the Evervault Inputs iFrame
primaryColorStringThe main theme color
labelColorStringThe color CSS property applied to the input labels
inputBorderColorStringThe border-color CSS property applied to inputs
inputTextColorStringThe color CSS property applied to inputs
inputBackgroundColorStringThe background-color CSS property applied to inputs
inputPlaceholderColorStringThe color CSS property applied to the ::placeholder CSS pseudo-element for inputs
inputBorderRadiusStringThe border-radius CSS property applied to inputs
inputHeightStringThe height CSS property applied to inputs

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"
}
}

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?