Guides
React.js SDK
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.
Encrypt a string
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
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.
<Card />
Initializes a Card UI Component. The Card Component allows you to collect and encrypt card data in a completely PCI-compliant environment.
Props
Allows you to completely customize the appearance of the component. See the Styling section for more details.
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.
The complete event will fire once the user has successfully filled out all fields in the Card Component with valid values.
Triggered when the component detects a swipe event from a card reader.
Triggered when the component fails to load. If you want to respond to validation errors you should use the change event instead.
<Pin />
Initializes a Pin UI Component. The Pin component allows you to collect and encrypt pin numbers in a completely PCI-compliant environment.
Props
Allows you to completely customize the appearance of the component. See the Styling section for more details.
If set to 'alphanumeric' the pin number will also accept letters as input.
Triggered when the pin number field has been fully filled out by the user.
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 Inbound 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
Triggered when the request has been made and all child components are ready to be shown.
<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
A JSON path selector for the response field you want to display.
Allows you to completely customize the appearance of the component. See the Styling section for more details.
<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
A JSON path selector for the response field you want to display.
Allows you to completely customize the appearance of the component. See the Styling section for more details.
themes
The themes export provides access to the built-in UI Component themes. See the UI Components Styling section for more details.