Nordic Panda Moor


    2.1.0 • Public • Published


    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.


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

    <script src=""></script>


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

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


    The Evervault JavaScript SDK exposes two functions.


    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);
    Parameter Type Description
    data Object, Array, String or Number Data to be encrypted.


    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, theme: String);
    Parameter Type Description
    id string Id of the element in which the Evervault Inputs iFrame should be embedded
    theme string Optional theme for styling Inputs, currently supported: Minimal
      <form id="ev-payment-form">
        <div id="ev-card-fields">
          <!-- Evervault will create input elements here -->
    <script src=""></script>
      const inputs = evervault.inputs("ev-card-fields");

    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();


    Bug reports and pull requests are welcome on GitHub at


    Questions or feedback? Let us know.




    npm i evervault-browser-sdk

    DownloadsWeekly Downloads






    Unpacked Size

    59.2 kB

    Total Files


    Last publish


    • narruc