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.
bashnpm 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.
javascriptimport { 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.
javascriptasync evervault.encrypt(data: Object | Array | String | Number);
Parameter | Type | Description |
---|---|---|
data | Object , Array , String or Number | Data to be encrypted |
Any time you want to encrypt data, simply import useEvervault
in your component:
jsximport 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>
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>
Parameter | Type | Description |
---|---|---|
onChange | Function | A function that is called whenever the submission changes. |
config | String or Object | A 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.
Parameter | Type | Description |
---|---|---|
theme | String | The base styling for Inputs. Currently supports minimal and material |
height | String | The height of the Evervault Inputs iFrame |
primaryColor | String | The main theme color |
labelColor | String | The color CSS property applied to the input labels |
inputBorderColor | String | The border-color CSS property applied to inputs |
inputTextColor | String | The color CSS property applied to inputs |
inputBackgroundColor | String | The background-color CSS property applied to inputs |
inputPlaceholderColor | String | The color CSS property applied to the ::placeholder CSS pseudo-element for inputs |
inputBorderRadius | String | The border-radius CSS property applied to inputs |
inputHeight | String | The 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:
javascriptconst evervault = useEvervault();const [cardDetails, setCardDetails] = useState(undefied);return (<EvervaultInput onChange={setCardDetails}></EvervaultInput>)