🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

evervault-browser-sdk

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

evervault-browser-sdk

[![Evervault](https://evervault.com/evervault.svg)](https://evervault.com/)

latest
npmnpm
Version
2.3.0
Version published
Maintainers
1
Created
Source

Evervault

Evervault JavaScript SDK

The Evervault JavaScript SDK is a toolkit for encrypting data in the browser. Using the Evervault React.js SDK means your customer's data never leaves their browser unencrypted.

Getting Started

Before starting with the Evervault JavaScript SDK, you will need to create an account and a team.

For full installation support, book time here.

Installation

To make Evervault available for use in your app, add this script to your page's footer:

<script src="https://js.evervault.com/v2"></script>

Setup

Once installed, initialize the JavaScript SDK with your team's unique ID found in the Settings.

const evervault = new Evervault("<TEAM_ID>", "<APP_ID>");

Reference

The Evervault JavaScript SDK exposes two functions.

evervault.encrypt()

evervault.encrypt() encrypts data for use in your Cages. To encrypt data in the browser, simply pass an object or string into the evervault.encrypt() function. Store the encrypted data in your database as normal.

async evervault.encrypt(data: Object | Array | String | Number | File | Blob);
ParameterTypeDescription
dataObject, Array, String or NumberData to be encrypted.

evervault.inputs()

Note: Self-Serve customers can only use Inputs in debug mode, which is not safe for production use.

evervault.inputs() 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 pass the id of the element in which the iFrame should be embedded.

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

evervault.inputs(id: String, settings: Object);
ParameterTypeDescription
idStringId of the element in which the Evervault Inputs iFrame should be embedded
configObjectA config object for custom styling.

config

ParameterTypeDescription
themeStringThe base styling for Inputs. Currently supports default, minimal and material.
heightStringThe height of the Evervault Inputs iframe.
primaryColorStringThe main theme color.
labelColorStringThe color CSS property applied to the input labels.
inputBorderColorStringThe border-color CSS property applied to inputs.
inputTextColorStringThe color CSS property applied to inputs.
inputBackgroundColorStringThe color CSS property applied to the ::placeholder CSS pseudo-element for inputs.
inputBorderRadiusStringThe border-radius CSS property applied to inputs.
inputHeightStringThe height CSS property applied to inputs.
cardNumberLabelStringThe label for the card number input
expirationDateLabelStringThe label for the expiration date input
securityCodeLabelStringThe label for the security code input
expirationDatePlaceholderStringThe placeholder shown for the expiration date input
invalidCardNumberLabelStringThe message shown on an invalid card number
invalidExpirationDateLabelStringThe message shown on an invalid expiration date
invalidSecurityCodeLabelStringThe message shown on an invalid security code
disableCVVBooleanIf true the CVV field will not be displayed
<body>
  <form id="ev-payment-form">
    <div id="ev-card-fields">
      <!-- Evervault will create input elements here -->
    </div>
  </form>
</body>
<script src="https://js.evervault.com/v2"></script>
<script>
  const inputs = evervault.inputs("ev-card-fields");
</script>

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.

{
  "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"
  }
}
onChange hook

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 for the hook is run every time your user updates the card data.

const hook = inputs.on("change", async (cardData) => {});
getData method

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

const cardData = await inputs.getData();

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.

await inputs.setLabels({});
ParameterTypeDescription
cardNumberLabelStringThe label for the card number input
expirationDateLabelStringThe label for the expiration date input
securityCodeLabelStringThe label for the security code input
expirationDatePlaceholderStringThe placeholder shown for the expiration date input
invalidCardNumberLabelStringThe message shown on an invalid card number
invalidExpirationDateLabelStringThe message shown on an invalid expiration date
invalidSecurityCodeLabelStringThe message shown on an invalid security code

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/evervault/evervault-js.

Feedback

Questions or feedback? Let us know.

FAQs

Package last updated on 13 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

The Changelog Podcast: Practical Steps to Stay Safe on npm

Security News

The Changelog Podcast: Practical Steps to Stay Safe on npm

Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.

By Sarah Gooding  -  Oct 31, 2025