Card Reveal

Once you have collected encrypted cardholder data, you may need to dislay the plaintext card number to your users. Our Card Reveal product allows you to do this safely, without ever handling the card data in plaintext.

Getting started

The Reveal component allows you to request and display decrypted card data inside of an iframe served from our PCI-compliant infrastructure. Because the request is made from within the Evervault iframe, the plaintext card data is never exposed to your application.

Retrieving the encrypted card data

To use Reveal, you will first need to have a JSON endpoint that returns the encrypted card data. It is important that this endpoint returns encrypted data, not plaintext. For example, let's say you have the following endpoint to retrieve a stored card:

1// GET https://your-api.com/cards/:id
2
3{
4  "card": {
5      "number": "ev:debug:Tk9D:number:mqrANWE1KMapRVCX:A8Gse2iNxLKy8WLnBDkqtkt+TTSaJFNyc+R/toYd2d8n:FUM5vwjOIrHI+3Jk7QnVCUpHVS0aZQC80ih/wpHtR2o=:$",
6      "cvv": "ev:debug:Tk9D:number:YG1KlyImadEc/qJz:A7odbz+iMRub/WHEO9bwLI5tig+nJ12aKCfWHtMU87rJ:/g1rhC8GeaGyWbM1Y0kaT45IKw==:$",
7      "expiry": "09/28"
8    }
9  }
10}

It's also important that the endpoint that you create sets applicable CORS headers so that it can be accessed from the Reveal Component iframe. Otherwise your requests will fail.

1Access-Control-Allow-Methods: POST, GET
2Access-Control-Allow-Origin: https://ui-components.evervault.com

Next, you will need to create a new Relay for your endpoint, and configure it to decrypt the card data on response. Reveal will only accept requests made to Evervault Relay domains so you must proxy your request through a Relay.

Install the Evervault SDK

Once you have an endpoint configured through Relay to retrieve the encrypted data, you can use our client side SDK to display the card data.

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

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

1import { loadEvervault } from "@evervault/js";
2
3const evervault = loadEvervault("<TEAM_ID>", "<APP_ID>");

Create a Reveal component

1// construct a request to your relay endpoint
2const request = new Request("https://your-relay-domain.com/cards/:id", {
3  method: "GET",
4  headers: {
5    "Content-Type": "application/json",
6  },
7});
8
9const reveal = evervault.reveal(request);

1// Display text from the decrypted response card.number field
2const text = reveal.text("$.card.number", {
3format: {{
4    regex: /(.{4})/g,
5    replace: '$1 ',
6  }}
7})
8text.mount('.card')

Styling

The reveal component can be fully customised to match the design of your application. This can be done by passing a theme option when rendering the component. A theme is just an object with a styles property. This styles property uses a CSS-as-JS format to define CSS rules for the component. These rules will be compiled to CSS and injected into the iframe.

1const text = reveal.text("$.card.number", {
2  theme: {
3    styles: {
4      ":root": {
5        "color-scheme": "dark",
6      },
7      body: {
8        fontSize: 14,
9        color: "white",
10        fontFamily: "monospace",
11      },
12    },
13  },
14});