Skip to main content

Show Card PIN UI Component

Physical cards have an associated PIN. Cardholders use the PIN for in-person purchases at a point of sale and they use the CVV for online purchases. The card’s PIN is considered PCI-sensitive data and therefore you must display it to the user using the Show card PIN UI component.

tip

You need to use this component only if you are issuing physical cards.

1 Get the Tokenised PIN Number​

caution

You must perform this step on the server side of your application.

warning

Due to requirements related to strong customer authentication, your authentication token is required to be stepped-up before calling this UI component.

GET/managed_cards/{id}Try it

The tokenised PIN is returned in the response as pin.

2 Display the PIN Number​

tip

To use Weavr UI components, you must first set up the Weavr UI library in your application.

<!-- Define an HTML container where the card PIN is to be shown -->
Card PIN: <span id="pin"></span>

<script type="text/javascript">
  // Initialise the UI library using your ui_key. Replace {{ui_key}} with your own UI key.
  window.OpcUxSecureClient.init('{{ui_key}}');
  
  // Set the user’s authentication token
  window.OpcUxSecureClient.associate('Bearer {{user_authentication_token}}', 
    function() { 
      console.log('associate success'); 
      
      // Create an instance of a Show card PIN UI component
      // Replace the {{pin_token}} with the tokenised PIN received using the server-side API call
      var span = window.OpcUxSecureClient.span("cardPin", "{{pin_token}}");
      
      // Embed the Show card PIN component in the HTML element where you want
      // the PIN to be shown
      span.mount(document.getElementById('pin'));
    },

    // Handle errors
    function(e) { 
      console.error('associate failed ' + e); 
    }
  );
</script>