Skip to main content

Capture Card PIN UI Component

When you upgrade a virtual card to a physical card, you can optionally assign a specific PIN to the physical card. If you do not specify a PIN, the system will assign a random PIN to the physical card. The card PIN is considered PCI-sensitive data and therefore you must use the Capture card PIN component to capture the PIN securely.

tip

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

1 Embed the Capture Card PIN UI Component​

The Capture card PIN UI component lets you collect your customer’s card PIN securely and converts it into a token, which you can safely send to Weavr using the API.

tip

To use Weavr UI components, you must first set up the Weavr UI library in 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.

<!-- Define a form in which you will ask your customer to input their card’s PIN -->
<form onSubmit="onSubmit(); return false;">
  Card Pin:
  <div id="cardpin"></div>
  <br />
  <input type="submit" value="Update Card PIN" />
</form>

<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}}");

  // Create an instance of a secure form
  var form = window.OpcUxSecureClient.form();

  // Set the user’s authentication token
  window.OpcUxSecureClient.associate(
    "Bearer {{user_authentication_token}}",
    function () {
      // Create an instance of a secure Capture card Pin UI component that will collect the card’s pin
      var input = form.input("cardPin", "cardPin");

      // Embed the secure component in the HTML element where you want
      // the input component to the shown on screen
      input.mount(document.getElementById("cardpin"));

      // Define this input so that the 'enter key' would submit the cardPin input
      input.on("submit", () => {
        console.log("submit cardPin input");
      });
    }
  );

  // Define a function that will be executed when the form is submitted by the user
  function onSubmit() {
    // Get the tokenised version of the card pin inputted by your customer
    form.tokenize(function (tokens) {
      console.log(tokens);
    });
  }
</script>

2 Set the Card’s PIN​

Now that you have the tokenised card PIN, you can use the token when you upgrade the virtual card to a physical card using the API endpoint.

caution

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

POST/managed_cards/{id}/physicalTry it
info

Learn more about upgrading your virtual cards to physical cards here