Skip to main content
Version: multi-v3

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.


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

1 Get the Tokenised Card Number


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


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

2 Display the Card Number


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.

// 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

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