Reference
JavaScript SDK
You can use our JavaScript SDK to:
- Encrypt data client-side
- Collect credit card numbers with Inputs
Quickstart
Install SDK
Our JavaScript SDK is distributed from our CDN, and can be installed just by placing this script tag before the closing </body>
tag in your HTML.
Initialize SDK
Once installed, initialize the JavaScript SDK with your Team and App ID found in the Evervault Dashboard.
Encrypt a string
Now that the SDK is initialized, we can encrypt a string.
Full example
Pulling all of this together leaves us with the following working example. You can copy and paste the code below (using a sandbox API key), run it in your own environment and run the encryption and decryption for yourself.
Reference
window.Evervault(appId, teamId)
The SDK constructor accepts two parameters:
- Your Team ID
- Your App ID
The ID of your Evervault app. This can be found inside of your app settings on the Evervault dashboard.
The ID of your Evervault team. This can be found inside of your team settings on the Evervault dashboard.
evervault.encrypt(data)
Encrypts data using Evervault Encryption.
To encrypt strings using the JavaScript SDK, simply pass a String
or an Object
into the evervault.encrypt()
function. To encrypt a file, pass a File
or Blob
.
The encrypted data can be stored in your database or file storage as normal. Evervault Strings can be used across all of our products. Evervault File Encryption is currently in Beta, and files can only be decrypted with Outbound Relay.
evervault.inputs(element, config)
Initializes Evervault Inputs. Evervault 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
A theme string (supported: default, minimal or material), or a config object for custom styles.
The color CSS property applied to the ::placeholder CSS pseudo-element for inputs.
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 on initialization by providing a set of labels in the config. The labels can then be updated as required using the setLabels
method.
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 await
ing this Promise
, or using then
: