Displaying Sensitive Card Data

In order to display sensitive card data (card number, CVV2 and default PIN) to a customer, without any of it passing through your systems (which would subject you to PCI compliance requirements), Sudo utilizes a 3rd party service called Very Good Security or VGS for short.

📘
By default, sensitive card data are redacted in the response sent back from the card endpoints

VGS provides a JavaScript library (as well as iOS and Android SDKs) called VGS Show which allows easy integration with your UI components. VGS Show offloads the PCI compliance burden by enabling the encrypted transmission of sensitive card data from VGS directly to your cardholder.

The VGS Show JavaScript library enables you to securely display sensitive data in a webpage while safely isolating that sensitive data from your systems. VGS Show JavaScript library injects a secure iframe into your HTML. VGS hosts both the iframe, and the data on secure, compliant servers.

How to Implement

Step 1 : Import the VGS Show Library using the scripts below according to your environment.

Environment	Script
Sandbox	`<script type="text/javascript" src="https://js.verygoodvault.com/vgs-show/1.5/ACiWvWF9tYAez4BitGpSE68f.js"></script>`
Live	`<script type="text/javascript" src="https://js.verygoodvault.com/vgs-show/1.5/ACcHSbXEBmKzyoAT5fzzyLTu.js"></script>`

Step 2 : Initialize the component

const show = VGSShow.create(<VAULT ID>);

Vault ID

Environment	ID
Sandbox	`tntbuyt0v9u`
Live	`tntpaxvvvet`

Step 3 : Create Card Token. You can do that here: Generate Card Token .

📘
The card token is required in the authorization header of the show js request.

Step 4: Provide a valid card identifier

path: '/cards/<CARD ID>/secure-data/cvv2'

<!DOCTYPE html>
<html>
<head>
    <meta charSet="utf-8">
    <title></title>
    <style>
        iframe {
            height: 20px;
        }
    </style>
</head>
<body>
<h2>Sensitive Data example</h2>
  
<label>Card Number:</label>
<div id="cardNumber"></div>
  
<label>CVV2:</label>
<div id="cvv2"></div>
  
 <label>Default PIN:</label>
<div id="pin"></div>

<script type="text/javascript" src="https://js.verygoodvault.com/vgs-show/1.5/ACiWvWF9tYAez4BitGpSE68f.js"></script>
<script type="text/javascript">
    const show = VGSShow.create('tntbuyt0v9u');
    const cardToken = "<CARD TOKEN>";
    const cardId = "<CARD ID>";

    const cvv2iframe = show.request({
            name: 'cvv-text',
            method: 'GET',
            path: '/cards/' + cardId + '/secure-data/cvv2',
            headers: {
                "Authorization": "Bearer " + cardToken
            },
            htmlWrapper: 'text',
            jsonPathSelector: 'data.cvv2'
        });
    cvv2iframe.render('#cvv2');

  
    const cardNumberIframe = show.request({
            name: 'pan-text',
            method: 'GET',
            path: '/cards/' cardId + '/secure-data/number',
            headers: {
                "Authorization": "Bearer " + cardToken
            },
            htmlWrapper: 'text',
            jsonPathSelector: 'data.number'
        });
    cardNumberIframe.render('#cardNumber');
  
  const pinIframe = show.request({
            name: 'pin-text',
            method: 'GET',
            path: '/cards/' cardId + '/secure-data/defaultPin',
            headers: {
                "Authorization": "Bearer " + cardToken
            },
            htmlWrapper: 'text',
            jsonPathSelector: 'data.defaultPin'
        });
    pinIframe.render('#pin');
</script>
</body>
</html>

📘
For steps on how to implement on iOS and Android, you can check the VGS Documentation.