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 Secure Proxy.

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

Secure Proxy provides a JavaScript library called Secure Proxy Show which allows easy integration with your UI components. Secure Proxy Show offloads the PCI compliance burden by enabling the encrypted transmission of sensitive card data from Secure Proxy directly to your cardholder.

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

How to Implement

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

EnvironmentScript
Sandbox<script type="text/javascript" src="https://js.securepro.xyz/sudo-show/1.1/ACiWvWF9tYAez4M498DHs.min.js"></script>
Live<script type="text/javascript" src="https://js.securepro.xyz/sudo-show/1.1/ACiWvWF9tYAez4M498DHs.min.js"></script>

Step 2 : Initialize the component

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

Vault ID

EnvironmentID
Sandboxwe0dsa28s
Livevdl2xefo5

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.securepro.xyz/sudo-show/1.1/ACiWvWF9tYAez4M498DHs.min.js"></script>
      <script type="text/javascript">
          const vaultId = "we0dsa28s";
          const cvv2Secret = SecureProxy.create(vaultId);
          const numberSecret = SecureProxy.create(vaultId);
          const pinSecret = SecureProxy.create(vaultId);
          const cardToken = "<CARD TOKEN>";
          const cardId = "<CARD ID>";
          
          const cardNumberIframe = numberSecret.request({
              name: 'pan-text',
              method: 'GET',
              path: '/cards/'+ cardId + '/secure-data/number',
              headers: {
                  "Authorization": "Bearer " + cardToken
              },
              htmlWrapper: 'text',
              jsonPathSelector: 'data.number',
              serializers: [
                  numberSecret.SERIALIZERS.replace(
                  '(\\d{4})(\\d{4})(\\d{4})(\\d{4})',
                  '$1 $2 $3 $4 '
                  ),
              ]
          });
          cardNumberIframe.render('#cardNumber');

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

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