Web Widget (MeaWallet)

Introduction to the Web Widget

Part of our embedded scope is the access to sensitive card data. To access such card data, like PAN and CVV, it is mandatory to use a web widget. The reason being that this type of card data needs special protection according to PCI-DSS guidelines. If you are yourself PCI-DSS certified, you may also use the API to access sensitive card data.

There are several options to adjust the web widget to you UI/UX needs.

How to Show Sensitive Card Data via Web Widget

As mentioned before, a special web widget is needed. It renders the card data as shown in the following example.

The web widget can be embedded into your frontend via an iframe, which shows the card data for about 60 seconds. After that, the card details are hidden again.

<iframe 
  src="https://public.test.meawallet.com/easylaunch?var=<RANDOM>&data=<DATA>" 
  title="Pliant Credit Card" 
  width="400px" 
  height="225px" 
  frameBorder="0" 
/>

Completed with data, the iframe might look like this:

<iframe 
  src="https://public.test.meawallet.com/easylaunch?var=658647&data=eyJhcGlLZXlJZCI6IkFQSV9LRVlfSUQiLCJhcGlLZXkiOiJBUElfS0VZIiwiY2FyZElkIjoiMTIzNDU2Nzg5Iiwic2VjcmV0IjoiMDAxIzEyMzQ1Njc4IiwiZGVzdGluYXRpb24iOiJJU1NVRVIiLCJzdHlsZVVybCI6IiIsImZpZWxkTmFtZXMiOiJ7XCJwYW5cIjogXCJQQU46XCIsIFwiZW1ib3NzXCI6IFwiQ2FyZGhvbGRlcjpcIiwgXCJleHBcIjogXCJFeHBpcnk6XCIsIFwiY3Z2XCI6IFwiQ1ZWOlwifSIsImxvYWRlciI6ImRvdHMifQ==" 
  title="Pliant Credit Card" 
  width="400px" 
  height="225px" 
  frameBorder="0" 
/>

Random Data

The random number value should be passed to the var variable to avoid browsers caching card data values or styles.

const random = Math.floor(Math.random() * 1000000);

Data Payload

The actual data payload which is needed to show the specific sensitive card details is transmitted via the data variable. It is a base64 encoded JSON payload.

{
  "apiKeyId": "API_KEY_ID",
  "apiKey": "API_KEY",
  "cardId": "123456789",
  "uniqueToken": "001#12345678",
  "styleUrl": "",
  "fieldNames": "{\"pan\": \"PAN:\", \"emboss\": \"Cardholder:\", \"exp\": \"Expiry:\", \"cvv\": \"CVV:\"}",
  "loader": "dots"
}

Which will then be attached to the URL as an base64 encoded string:

ewogICJhcGlLZXlJZCI6ICJBUElfS0VZX0lEIiwKICAiYXBpS2V5IjogIkFQSV9LRVkiLAogICJjYXJkSWQiOiAiMTIzNDU2Nzg5IiwKICAidW5pcXVlVG9rZW4iOiAiMDAxIzEyMzQ1Njc4IiwKICAiZGVzdGluYXRpb24iOiAiSVNTVUVSIiwKICAic3R5bGVVcmwiOiAiIiwKICAiZmllbGROYW1lcyI6ICJ7XCJwYW5cIjogXCJQQU46XCIsIFwiZW1ib3NzXCI6IFwiQ2FyZGhvbGRlcjpcIiwgXCJleHBcIjogXCJFeHBpcnk6XCIsIFwiY3Z2XCI6IFwiQ1ZWOlwifSIsCiAgImxvYWRlciI6ICJkb3RzIgp9

Data Parameters

Parameter	Description	Required
`cardId`	The `token` value from the card details endpoint for the specific card you want to show.	X
`uniqueToken`	Represents a `TOTP token` which is valid for this one call. See details below for generation of such a key. The token consists of three parts: 1. Key ID (3 digits) - Used to select the correct secret key. 2. Separator (1 symbol) - Separator of key ID and TOTP. 3. TOTP (8 digits) - Time-based One Time Password.	X
`apiKeyId`	The public key fingerprint. Shared with you during onboarding to this API feature.	X
`apiKey`	The public key. Shared with you during onboarding to this API feature.	X
`fieldNames`	This string-escaped JSON allows to customize card value field names. Empty (no field names) by default.
`loader`	The style of the loader. Available values - `bars`, `dots`, `spinner`. `dots` by default.
`styleUrl`	A URL to custom style CSS.

Generation of the `uniqueToken`

The uniqueToken that is needed to make the web widget show the correct card data is a TOTP, or time-based one-time password (see Wikipedia for details).

The generation of such token can be either implemented by the Partner themselves or the provided library is used, see the following guide for implementation details.

URLs

Environment	URL
Test	`https://public.test.meawallet.com/easylaunch`
Production	`https://mcd.meawallet.com/easylaunch`

Styling of the Web Widget

A custom appearance of the card view can be achieved by passing styleUrl to custom CSS hosted on a partners server. Everything is allowed to be customized! You can even change the order of the shown attributes via CSS and for instance show the card in a vertical layout instead of a horizontal layout. Design-wise you are 100% to style the card appearance.

The HTML of the card web widget is structured as follows. Which can then be styled according to the different CSS classes used in the HTML.

<div id="app" class="mea-easy-launch-app">
  <div class="mea-easy-launch-container">
    <div class="mea-data mea-pan-result">
      <div class="mea-field-name mea-field-pan-name">PAN:</div>
      <span class="mea-field-value mea-field-pan-value">1234 5678 1234 5678</span>
    </div>
    <div class="mea-data mea-cardholder-result">
      <div class="mea-field-name mea-field-cardholder-name">Cardholder:</div>
      <span class="mea-field-value mea-field-cardholder-value">Jane Hopkins</span>
    </div>
    <div class="mea-data mea-expiry-result">
      <div class="mea-field-name mea-field-expiry-name">Expiry:</div>
      <span class="mea-field-value mea-field-expiry-value">07/27</span>
    </div>
    <div class="mea-data mea-cvv-result">
      <div class="mea-field-name mea-field-cvv-name">CVV:</div>
      <span class="mea-field-value mea-field-cvv-value">123</span>
    </div>
  </div>
</div>

The default style that applies:

.mea-easy-launch-app .vld-overlay .vld-icon svg {
  fill: white;
}

.mea-easy-launch-app {
  background: linear-gradient(30deg, rgba(1, 143, 219, 1) 0%, rgba(249, 95, 3, 1) 95%);
  border-radius: 15px;
  color: white;
  font-family: Helvetica, sans-serif !important;
  height: 100%;
  position: absolute;
  width: 100%;
}

.mea-easy-launch-container {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  height: 100%;
}

.mea-easy-launch-container .mea-data:nth-child(1) { order: 2; }
.mea-easy-launch-container .mea-data:nth-child(2) { order: 4; }
.mea-easy-launch-container .mea-data:nth-child(3) { order: 3; }
.mea-easy-launch-container .mea-data:nth-child(4) { order: 1; }

.mea-cvv-result {
  padding-left: 20px;
  padding-top: 15px;
  text-align: left;
}

.mea-cardholder-result {
  margin-top: auto;
  padding-bottom: 15px;
  padding-left: 20px;
}

.mea-pan-result {
  padding-bottom: 10px;
  padding-top: 45px;
}

.mea-expiry-result,
.mea-pan-result {
  text-align: center;
}

Allowing to copy data from the iFrame

You can use an advanced feature to allow easy copying of credit card data for the end user.

allow="clipboard-write <environment URL>"

So for example like this:

<iframe 
  src="https://mcd.meawallet.com/easylaunch?var=<RANDOM>&data=<DATA>" 
  title="Bank Card" 
  width="400px" 
  height="225px" 
  frameBorder="0" 
  allow="clipboard-write https://mcd.meawallet.com/easylaunch"
/>

Further Information

For more information on this topic contact [email protected]