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>