React

<EvervaultInput />

The <EvervaultInput> component makes it easy to use Evervault's Inputs UI Component in your React application. Inputs make it easy to collect encrypted cardholder data in a completely PCI-compliant environment.

Inputs is 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).

Simply include the component in your JSX to get started.

The component also supports themes and custom styles so you can customise how Inputs looks in your UI.

Retrieving card data

There are two ways of accessing encrypted card data once it has been entered.

In each case, a cardData object containing details about the card data your user has entered is returned.

You can see the format of this object below:

Card data can be retrieved in one of the following two ways:

onChange()

This option is best when you are looking to handle the card values in realtime, like displaying validation errors as a user is inputting their card data. The callback function is run every time your user updates the card data.

Localization

The iFrame can be localized on initialization by providing a set of labels in the config. The labels can then be updated as required using the setLabels method.

Custom Fonts

A custom font can be loaded from Google's Fonts API and the font-family set with the fontFamily config paramerter

iFrame loading status

If you need to wait for the iFrame that serves inputs to load before doing some action, you can used the onInputsLoad prop callback:

<EvervaultReveal />

Use evervault.reveal to show your users their encrypted card details in plaintext in a secure iframe hosted by Evervault. Before using Reveal you'll first have to create a Relay to decrypt the card details; Reveal expects to receive the card data from the Relay as a JSON object with the schema below.

Once you have your endpoint that returns the encrypted card data, you'll need to create an Evervault Relay that will decrypt the encrypted card data as is passes through it, before it gets to the iFrame. Once you have created your Relay you can add the component to your React app.

The only required field is request which takes an object that supports all of the same fields as a Javascript Request Object. The URL must be the Evervault Relay you configured earlier.

Javascript

evervault.inputs(element, config)

Initializes Evervault's Inputs UI Component. Inputs makes 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).

Simply pass the ID of the element in which the iFrame should be embedded.

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

Example

Retrieving card data

There are two ways of accessing encrypted card data once it has been entered.

In each case, a cardData object containing details about the card data your user has entered is returned.

You can see the format of this object below:

Card data can be retrieved in one of the following two ways:

onChange()

This option is best when you are looking to handle the card values in realtime, like displaying validation errors as a user is inputting their card data. The callback function is run every time your user updates the card data.

getData()

This option is best when you are looking to retrieve card data occasionally, like when your form is submitted.

Localization

The iFrame can be localized by providing a set of labels in the config on initialization. The labels can then be updated as required using the setLabels method.

Adding labels on initialization:

Updating labels:

iFrame loading status

If you need to wait for the iFrame that serves inputs to load before doing some action, there is an easy way to do so.

isInputsLoaded

This is a Promise that resolves when the iFrame is loaded. You can listen for the iFrame load event by awaiting this Promise, or using then:

evervault.reveal(element, request, config, onCopy)

Use evervault.reveal to show your users their encrypted card details in plaintext in a secure iframe hosted by Evervault. Before using Reveal you'll first have to create a Relay to decrypt the card details; Reveal expects to receive the card data from the Relay as a JSON object with the schema below.

Once you have your endpoint that returns the encrypted card data, you'll need to create an Evervault Relay that will decrypt the encrypted card data as is passes through it, before it gets to the iFrame. Once you have created your Relay you can add the component to your React app.

Example