# Card Reveal _Securely display decrypted data in your app using an Evervault-hosted iframe without exposing plaintext to your infrastructure._ ![An illustration of an encrypted card being revealed]() Once you have collected encrypted cardholder data, you may need to display 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: ```text // GET https://your-api.com/cards/:id { "card": { "number": "ev:debug:Tk9D:number:mqrANWE1KMapRVCX:A8Gse2iNxLKy8WLnBDkqtkt+TTSaJFNyc+R/toYd2d8n:FUM5vwjOIrHI+3Jk7QnVCUpHVS0aZQC80ih/wpHtR2o=:$", "cvv": "ev:debug:Tk9D:number:YG1KlyImadEc/qJz:A7odbz+iMRub/WHEO9bwLI5tig+nJ12aKCfWHtMU87rJ:/g1rhC8GeaGyWbM1Y0kaT45IKw==:$", "expiry": "09/28" } } } ``` 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. ``` Access-Control-Allow-Methods: POST, GET Access-Control-Allow-Origin: https://ui-components.evervault.com ``` Next, you need to create a new [Relay](/relay) for your endpoint, and configure it to decrypt the card data on response. Reveal only accepts requests made to Evervault Relay domains so you must proxy your request through a Relay. ![Reveal Relay Configuration]() > **Enforce authentication and authorization** > > After Relay decrypts the response, your endpoint returns the plaintext card number to the client that made the request. Evervault has no context for which of your customers can access a given card. Your backend must authenticate the request and verify that the caller is authorized to view the card before responding. Treat this endpoint with the same controls you'd apply to any other source of sensitive data. ### 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. #### Browser Our [JavaScript SDK](/sdks/javascript) is distributed from our CDN, and can be installed by placing this script tag in the head of your HTML file. The SDK must be loaded directly from our CDN and cannot be bundled with your application or self hosted. ```html ``` Once the SDK is installed, initialize it using your Team ID and App ID. You can find these in the [Evervault Dashboard](https://app.evervault.com). ```javascript const evervault = new Evervault("", ""); ``` You can also install Evervault via the `@evervault/js` package on npm. This package is a light wrapper which handles loading the SDK from our CDN and also provides TypeScript definitions. ```javascript import { loadEvervault } from "@evervault/js"; const evervault = loadEvervault("", ""); ``` #### Frequently Asked Questions ##### Why does the SDK need to be loaded from the CDN? The SDK must be loaded directly from our CDN in order to be PCI Compliant. ##### How do I get my Team ID and App ID? You can find your Team ID and App ID in the [Evervault Dashboard](https://app.evervault.com). ##### Can I load the SDK asynchronously? You can load the SDK asynchronously using the `async` attribute on the script tag to prevent blocking the loading of your page. However, it is important to note that you will need to wait for the SDK to load before making any API calls. ```html ``` #### React Our React SDK is distributed via npm and can be installed using your preferred package manager. Once installed, Initialize the SDK by wrapping your application with the `EvervaultProvider` component. ```jsx import { EvervaultProvider } from "@evervault/react"; export default function App() { return ( ... ); } ``` ### Create a Reveal component #### Browser To create an instance of the Reveal component, you will need to pass in a request to your relay endpoint. ```js // construct a request to your relay endpoint const request = new Request("https://your-relay-domain.com/cards/:id", { method: "GET", headers: { "Content-Type": "application/json", }, }); const reveal = evervault.reveal(request); ``` Once you have created an instance of the Reveal component, you can use the `text` method to display data that is returned from the decrypted response. The `text` method accepts a JSON path to the field inside of the response that you want to display. Once you have created a text instance, you must mount it to the DOM using the `mount` method. This will render an iframe that displays only the field data matching the provided JSON path. ```js // Display text from the decrypted response card.number field const text = reveal.text("$.card.number", { format: {{ regex: /(.{4})/g, replace: '$1 ', }} }) text.mount('.card') ``` Learn more about the Reveal component in the [JavaScript SDK](/sdks/javascript#reveal) documentation. #### React The `Reveal` component accepts a `request` prop, which is a `Request` object that is used to fetch the encrypted card data. You can then use the `Reveal.Text` component to display the decrypted card number. The `Reveal.Text` component accepts a `path` prop, which is a JSON path to the field inside of the response that you want to display. The `Reveal.Text` component will render an iFrame that displays only the field data matching the provided JSON path. ```jsx import { Reveal } from "@evervault/react"; function MyComponent() { const request = useMemo(() => { return new Request("https://your-relay-domain.com/cards/:id", { method: "GET", headers: { "Content-Type": "application/json", }, }); }, []); return (

Card Number:

 ); } ``` Learn more about the Reveal component in the [React SDK](/sdks/react#reveal) documentation. ## 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. ```js const text = reveal.text("$.card.number", { theme: { styles: { ":root": { "color-scheme": "dark", }, body: { fontSize: 14, color: "white", fontFamily: "monospace", }, }, }, }); ``` - [Card Collection](/cards/card-collection): Learn how to use Card Collection to collect cardholder data. - [Network Tokens](/cards/network-tokens): Learn how to use Network Tokens to enhance your payment security.