Displaying Sensitive Card Data

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

Suggestion

Displaying card number and CVV2 for physical debit cards is disabled by default for security reasons.

This functionality can be enabled on Unit dashboard at: Settings -> Org Settings -> General -> Show sensitive data for physical cards.

Note

Displaying and setting of sensitive card data is only available for active cards.

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.

Integration steps

Import the VGS Show library:

<script type="text/javascript" src="https://js.verygoodvault.com/vgs-show/1.5/ACh8JJTM42LYxwe2wfGQxwj5.js"></script>

Initialize the component:

const show = VGSShow.create('tntazhyknp1');

Vault ID:

Environment	Vault Id
Sandbox	tntazhyknp1
Live	tnt8w6nrmbu

Provide a valid customer token:

const customerToken = "<CUSTOMER TOKEN>"

For instructions, see Create Customer Token.

Important Info

The customer token is required to include the cards-sensitive scope.

Unit recommends avoiding adding additional scopes to the token.

Provide a valid card identifier

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

• Note: Timeout for this API is 120 seconds

Example of creating a Customer Token for sensitive data:

curl -X POST 'https://api.s.unit.sh/customers/8/token'
-H 'Content-Type: application/vnd.api+json'
-H 'Authorization: Bearer ${TOKEN}'
--data-raw '{
  "data": {
    "type": "customerToken",
    "attributes": {
      "scope": "cards-sensitive",
      "verificationToken": "i8FWKLBjXEg3TdeK93G3K9PKLzhbT6CRhn/VKkTsm....",
      "verificationCode": "203130"
    }
  }
}'

Additional resources

SDKs for iOS and Android and additional code examples can be found here.

Example of displaying card number and 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>

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

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

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