Skip to main content

Card Number UI Component

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

info

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

1 Get the Tokenised Card 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 Card 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 number is to be shown -->
Card Number: <span id="cardNumber" />

<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 card number component
      // Replace the {{cardnumber_token}} with the tokenised card number received using
      // the server-side API call
      var span = window.OpcUxSecureClient.span(
        "cardNumber",
        "{{cardnumber_token}}"
      );

      // Embed the card number component in the HTML element where you want
      // the card number to be shown
      span.mount(document.getElementById("cardNumber"));
    },

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