Examples for PCI Widget Web Usage

The listed examples here show you the range of options you can configure in the iFrame widget config.

All Fields with Default Config

{ 
  "token": "${OTP}",
  "cardId": "${cardId}" 
}

Only PAN and CVV

Will display everything with the default settings except cardholder name and expiry date. Cardholder name and expiry date blocks will be present neither in the encoded response nor in the HTML structure.

{
  "expiryDate": {
    "display": false
  },
  "cardholderName": {
    "display": false
  },
  "cardId": "${cardId}",
  "token": "${OTP}"
}

Fields without Copy Button

{
  "cvv": {
    "clickToCopy": false
  },
  "pan": {
    "clickToCopy": false
  },
  "expiryDate": {
    "clickToCopy": false
  },
  "cardholderName": {
    "clickToCopy": false
  },
  "cardId": "${cardId}",
  "token": "${OTP}"
}

Vertical Card Design

{
  "styleUrl": "${yourCssUrl}",
  "cardId": "${cardId}",
  "token": "${OTP}"
}

.wrapper {
    width: 200px;
    height: 316px;
    background: rgb(34,193,195);
    background: linear-gradient(180deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}

.pliant-pci-widget {
    background: none;
}

.pliant-preloaded-data-overlay {
    background: none;
}