You can use our React.js SDK to:

Encrypt data client-side
Collect or display card data with UI Components

Quickstart

Install SDK

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

Initialize SDK

Once installed, initialize the React.js SDK with your Team and App ID found in the Evervault Dashboard.

Use the <EvervaultProvider> component as a provider for your app.

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 can be used to encrypt plaintext data in your application.

Reference

<EvervaultProvider />

The EvervaultProvider component exposes the useEvervault() hook to any nested components. UI Components (<Card/>, <Pin/> and <Reveal/>) can also be used in children of the provider

Props

TeamIdRequiredString

The unique identifier for your Team. It's found in Team Settings.

appIdRequiredString

The unique identifier for your App. It's found in App Settings.

useEvervault()

The useEvervault hook is accessible in children of the EvervaultProvider, and returns an initialized instance of the Evervault JavaScript SDK. One of the functions included in the returned object is encrypt(), which can be passed any plaintext data structure.

evervault.encrypt(data)

Encrypts data using Evervault Encryption. Evervault Strings can be used across all of our Primitives. It is accessible on the returned value from the useEvervault() hook. To encrypt data using the React.js SDK, simply pass a String or an Object into the evervault.encrypt() function.

The encrypted data can be passed to your server and stored in your database as normal. It can also be used with any of Evervault’s other services.

Parameters

dataRequiredString | Object

The data to encrypt.

evervault.decrypt(token, data)

Decrypts data previously encrypted with the encrypt() function or through Relay.

The decrypt() function allows you to decrypt previously encrypted data using a token.

The token is a time bound token for decrypting data. The token can be generated using our backend SDKs or through our REST API.

The payload must be the same payload that was used to create the token and expires in a maximum of 10 minutes depending on the expiry set when creating the token.

The payload can be any String or Object and it will be returned, decrypted, in the same form.

Parameters

tokenRequiredString

A valid client side token with permissions to decrypt the given data.

dataRequiredString | Object

The data to decrypt.

<Card />

Initializes a Card UI Component. The Card Component allows you to collect and encrypt card data in a completely PCI-compliant environment.

Props

themeTheme

Allows you to completely customize the appearance of the component. See the Styling section for more details.

autoFocusBoolean

If set to true, the component will automatically steal focus when it mounts.

fieldsString[]

Allows you to configure the fields displayed in the component. Possible values are 'name', 'number', 'expiry', and 'cvc'. By default only 'number', 'expiry' and 'cvc' will be shown.

onChange(payload: Object) => void

Triggered whenever the component's state is updated.

onComplete(payload: Object) => void

The complete event will fire once the user has successfully filled out all fields in the Card Component with valid values.

onSwipe(payload: Object) => void

Triggered when the component detects a swipe event from a card reader.

onReady() => void

Triggered when the component has fully loaded and is ready to be shown.

onError() => void

Triggered when the component fails to load. If you want to respond to validation errors you should use the change event instead.

translationsObject

Allows you to customize the text shown inside of the component.

<Pin />

Initializes a Pin UI Component. The Pin component allows you to collect and encrypt pin numbers in a completely PCI-compliant environment.

Props

themeTheme

Allows you to completely customize the appearance of the component. See the Styling section for more details.

autoFocusBoolean

If set to true, the component will automatically steal focus when it mounts.

lengthNumber | Default: 4

Change the length of the pin number.

modenumeric | alphanumeric

If set to 'alphanumeric' the pin number will also accept letters as input.

onChange(payload: Object) => void

Triggered whenever the component's state is updated.

onComplete(payload: Object) => void

Triggered when the pin number field has been fully filled out by the user.

onReady() => void

Triggered when the component has fully loaded and is ready to be shown.

onError() => void

Triggered when the component fails to load. If you want to respond to validation errors you should use the change event instead.

<Reveal />

Initializes a Reveal UI Component. The Reveal component allows you to display previously encrypted card data to your users in plaintext in a secure iframe hosted by Evervault. Before using Reveal you'll first need to have a JSON endpoint to retrieve data from. This is often your own API endpoint combined with Relay to decryped previously encrypted data from your database.

It is important that the endpoint that you create sets the applicable CORS headers so that it can be accessed from the Reveal iframe. Otherwise your requests will fail!

Props

requestRequiredRequest

The request objet for fetching the data.

onReady() => void

Triggered when the request has been made and all child components are ready to be shown.

onError() => void

Triggered when the request fails, or the component fails to load.

<Reveal.Text />

Creates a Reveal Text consumer component. The Reveal Text consumer allows you to render a selected field from the request response. This component must be rendered as a child of the Reveal component.

Props

pathRequiredString

A JSON path selector for the response field you want to display.

themeTheme

Allows you to completely customize the appearance of the component. See the Styling section for more details.

format

Allows you to use regex matching to format the field value.

<Reveal.CopyButton />

Creates a Reveal Copy Button consumer component. This renders a button which when clicked will copy a response field to the users clipboard. This component must be rendered as a child of the Reveal component.

Props

pathRequiredString

A JSON path selector for the response field you want to display.

themeTheme

Allows you to completely customize the appearance of the component. See the Styling section for more details.

onCopy() => void

Triggered when the user clicks the button and copies the value to their clipboard.

format

Allows you to use regex matching to format the field value.

themes

The themes export provides access to the built-in UI Component themes. See the UI Components Styling section for more details.