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 components:

Set Up the 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);
      });
  }