Skip to main content

UI Library overview

You can use Weavr’s UI library to build secure payment flows for your customers.

tip

By transmitting and receiving PCI-sensitive data in tokenised form, you qualify for the lowest level of PCI compliance.

Overview​

Weavr’s JavaScript UI library lets you capture and show sensitive information using customisable UI components without this information touching your servers. This ensures that you qualify for the lowest level of PCI compliance.

The UI library offers the following UI components:

  • Password to collect your customers’ passwords to access their financial data
  • Confirm Password validates that the password collected in the password UI component is a match
  • Passcode to collect your customers’ passcodes to access their financial data
  • Confirm Passcode validates that the passcode collected in the passcode UI component is a match
  • Card number to show the full 16-digit card number to your customers
  • CVV to show the 3-digit number that is needed to make online purchases using cards
  • Show card PIN to show the 4-digit PIN number needed to make in-person purchases using cards
  • Capture card PIN to collect your customers’ defined physical card PINs
  • KYB to collect due diligence information from your corporate customers
  • Director KYC to collect due diligence information from corporate directors/representatives
  • KYC to collect due diligence information from your consumers

Set up the UI library​

If you want to embed a Weavr UI component on a page, you must include the library in the header section of the page.

caution

Choose the right library URL based on the environment that you are integrating with.

<!-- For the Sandbox environment -->
<script src="https://sandbox.weavr.io/app/secure/static/client.1.js"></script>

<!-- For the Live environment -->
<script src="https://secure.weavr.io/app/secure/static/client.1.js"></script>

Next, you must initialise the library by providing your UI key. You can find your UI key on the API Credentials screen in the Multi Portal.

<script type="text/javascript">
  // Replace {ui_key} with your UI key from the Multi Portal > API Credentials screen
  // Remember to change the UI key when moving your application to the Live environment
  window.OpcUxSecureClient.init("{ui_key}");
</script>

In the above, replace {uikey} with the UI key from the Multi Portal > _API Credentials screen.

Customise the look and feel​

You can customise the look and feel of Weavr UI components to match your application.

Fonts​

You can specify the font to be used to show content to your end-customer when initialising the UI library.

window.OpcUxSecureClient.init("{ui_key}", {
  fonts: [
    {
      cssSrc:
        "https://fonts.googleapis.com/css?family=Be+Vietnam:100,100i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i",
    },
  ],
});

Styles​

You can specify your custom styles via the style parameter when initialising a UI component:

window.OpcUxSecureClient.associate(
  "Bearer {{user_authentication_token}}",
  function () {
    console.log("associate success");
    var span = window.OpcUxSecureClient.span(
      "cardNumber",
      "{{cardnumber_token}}",
      {
        style: {
          fontSize: "12px", // SecureElementStyle
        },
      }
    );
    span.mount(document.getElementById("cardNumber"));
  },
  function (e) {
    console.error("associate failed " + e);
  }
);

The Style object supports the following parameters:

  • color
  • fontFamily
  • fontSize
  • fontSmoothing
  • fontStyle
  • fontVariant
  • fontWeight
  • height
  • letterSpacing
  • lineHeight
  • margin
  • padding
  • textAlign
  • textDecoration
  • textIndent
  • textShadow
  • textTransform

States​

You can also define different styles for different states that the component is in. The following are the supported states:

  • base - the default state for all components
  • empty - applicable to input type components, components will transition to this state whenever the input is cleared
  • valid - applicable to input type components, components will transition to this state whenever the user input is valid
  • invalid - applicable to input type components, components will transition to this state whenever the user input is invalid

Pseudo-classes​

You can further customise the look and feel of the UI components using pseudo-classes to represent different actions that are happening on the UI component. The following options are supported:

  • :hover
  • :focus
  • ::placeholder
  • ::selection
  • :-webkit-autofill

The example below shows how you can customise UI components using the different states provided together with pseudo-classes.

  var form = window.OpcUxSecureClient.form();
  var input = form.input(
    'p',
    'password',
    {
      placeholder: 'String',
      maxlength: 20,
      style: {
        base: {':hover': {fontSize: '12px'}}, // SecureElementStyleWithPseudoClasses
        empty: ...,
        valid: ...,
        invalid: ...
      }
    }
  );
  input.mount(document.getElementById('password'));

  function onSubmit() {
      form.tokenize(function(tokens) {
          console.log(tokens);
      });
  }