Skip to main content

CVV UI Component

When you retrieve your customers’ card details, Weavr gives you tokenised CVV numbers. You need to use the CVV UI component to de-tokenise the CVV number and show it to your customer.

info

Learn how Weavr’s security model works in the tokenisation guide.

1 Get the Tokenised CVV 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

2 Display the CVV 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 CVV is to be shown -->
Card CVV: <span id="cvv" />

<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 CVV UI component
      // Replace the {{cvv_token}} with the tokenised CVV received using the server-side API call
      var span = window.OpcUxSecureClient.span("cvv", "{{cvv_token}}");
      
      // Embed the CVV component in the HTML element where you want
      // the CVV to be shown
      span.mount(document.getElementById('cvv'));
    },

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