Introduction

Besides the PCI widget for web, we also offer a mobile version of the same widget.

Implementation guide

The PCI widget is embedded into your app via an iframe + WebView, which shows the card data for about 45 seconds. After that, the card details are hidden again automatically for security reasons.

The two needed parameters traceId and widgetConfig are:

traceId: a random UUIDv4, generated by you when making the request. It is used for overall tracing of the request in all related systems. It has to be the same throughout one PCI widget request. I.e. the same in the iFrame URL as in the request of the OTP (see endpoint).
widgetConfig: the overall configuration of the widget, containing for instance the cardId and design parameters to display. The cardId is the Pliant identifier of the individual card you want to display. The details of the widget config can be found here.

Base information

Styling via CSS File

CSS file creation and testing essentials

For this step you just need to create new <file_name>.css file. Then create alongside test.html with content copied from here. It will allow you to play around with CSS and try to achieve desirable presentation of data.

Static CSS file (<link crossorigin="" href="./widget/static/pci-widget.css" rel="stylesheet" type="text/css">) can be found here.

Example CSS file content:

@font-face {
  font-family: 'MaisonNeue';
  src: url('https://example.com/fonts/MaisonNeue-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

html,
body {
  height: 100vh;
  width: 100vw;
  background-color: transparent;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  background: transparent;
}

.pliant-pci-widget {
  width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
  padding-left: 12vw;
  background: transparent;
}
.pliant-pci-widget-container {
  row-gap: 0;
}

.pliant-expiry-cvv-result {
  margin-top: 3.797vh;
}

.pliant-cvv-result,
.pliant-expiry-result {
  width: 50%;
}

.pliant-cardholder-result {
  display: none;
}

.pliant-copy-btn {
  display: none;
}

/**
* Card number: mono font is default for it
*/
.mono {
  font-family: 'MaisonNeue', sans-serif;
}

.pliant-field-value {
  font: 400 5vh/5vh 'MaisonNeue', sans-serif;
  letter-spacing: 0.25px;
}

.pliant-field-name {
  font: 400 3.79vh/3.8vh 'MaisonNeue', sans-serif;
  letter-spacing: 0.5px;
}

/**
* Physical Card
*/

.physical-card .pliant-pan-result {
  margin-top: 50.949vh;
}

.physical-card .pliant-field-value {
  color: rgba(255, 255, 255, 1);
}

.physical-card .pliant-field-name {
  color: rgba(255, 255, 255, 1);
}

/**
* Virtual Card
*/

.virtual-card .pliant-pan-result {
  margin-top: 63.924vh;
}

.virtual-card .pliant-field-value {
  color: rgba(0, 0, 0, 0.87);
}

.virtual-card .pliant-field-name {
  color: rgba(0, 0, 0, 0.87);
}

Take a look on .physical-card and .virtual-card values. It is used as cssClass for Widget Config.
This helps to customize the CSS on a more refined level. For example, if you have multiple styles for cards, you can have two (or more) styles defined.

Example:

.physical-card .pliant-field-value {color: #AAAAAA}
.virtual-card .pliant-field-value {color: #BBBBBB}

If you pass cssClass=virtual-card the second CSS block will be applied.

Host CSS file

You just need to host the ready to use file via a public link and then use this link for the iframe configuration. Check styleUrl of Widget Config

Get OTP for PCI Widget

Check this documentation

Platform specific implementation