Meo Wallet

Secure Form Fields

Sometimes you may want to host the checkout page on your site or app (via webview). This way you avoid disruptive redirections to another site while retaining the look and feel of your own site.

In case you also want to accept card payments but you aren’t PCI compliant, you can use the secure form fields feature instead of regular input form fields.

This way you can seamlessly build a form hosted on your side that can collect card data in a secure way without breaking PCI rules since no actual plaintext card details will be accesible from your side.

1. Pre requisites

First off, you must contact your MEO Wallet account manager and configure your e-commerce site domain so it can be whiltelisted to use this feature.

You must also take note of the wallet identifiers you want to use.

To obtain them you must log in MEO Wallet backoffice Then under My Business/My wallets choose the one you want to use and click in the edit icon. The displayed page will show the wallet id in the topmost field.

2. Set up your form elements

First you must include the following URL preferably inside the <head></head> block:

<script type="text/javascript" src="https://wallet.pt/external/securefield/js?id=xxx"></script>

Make sure you replace xxx above with the wallet id you have obtained in section 1.

Then, in the place you intend to insert the form fields for the card data use the HTML elements according to the following table:

Card data field	HTML Element
Number (PAN)	`<div id="_altice_pay_card_number"> </div>`
Expiry date	`<div id="_altice_pay_card_expdate"> </div>`
CVV/CVC	`<div id="_altice_pay_card_cvv"> </div>`
Holder Name	`<div id="_altice_pay_card_holder"> </div>`

These elements will render as input text boxes hosted at the MEO Wallet site, but that will be transparent to you and the end user.

3. Collect Card Data

To actually collect the card details the user has entered you need to call the function AlticePay.collectCardDataProWS exported by the script you’ve set up in section 2.

The function is asynchronous so make sure you “await” for its reponse value.

let response = await AlticePay.collectCardDataProWS();

Upon success, the response is an object with the following JSON format:

{
  result: "OK",
  card: {
    number: "xxx", // encrypted card number (PAN)
    valdate: "yyy", // encrypted expiry date
    vcode: "zzz", // encrypted CVV
    name: "aaa", // encrypted card holder name
  }
}

If an error occurs the response is as follows:

{ 
  result: "FAIL",
  error: "error message"
}

In case of success, you can then feed the above card structure to the ProWS CC API in order to either:

store the card to generate a token
make a payment

4. Customising the fields

You can customise the look of the elements referred in section 2 by passing the special attributes:

data-style
data-style-error

Both attributes take a string of inline CSS attributes. data-style is used to style the element under normal circunstances whereas data-style-error will be used when the input to the field is invalid (for instance an invalid card number).

Please note that data-style-error inherits from data-style so that the latter is always applied by default.

5. Example

The following example will create a rudimentar form. Upon clicking on the “submit” button the encrypted fields will be displayed. You can host it in your site and try it for yourself.

Please take note that it will only work in the sandbox environment without the need for your domain to be whitelisted.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <style>
      * {
          border: none;
      }
      </style>
  
      <!-- replace WALLET_ID with your own -->
      <script type="text/javascript" src="https://sandbox.meowallet.pt/external/securefield/js?id=WALLET_ID"></script>
  
  </head>
  
  <body>
  
    <!-- you can tweak the data-style atributes to meet your UI needs -->
    
    <div id="_altice_pay_card_number" data-style="border-radius: 8px; border: 2px solid #17AA36;" data-style-error="color: red"></div>
    
    <div id="_altice_pay_card_expdate" data-style="border-radius: 8px; border: 2px solid #17AA36;" data-style-error="color: red"></div>
    
    <div id="_altice_pay_card_cvv" data-style="border-radius: 8px; border: 2px solid #17AA36;"></div>
    
    <div id="_altice_pay_card_holder" data-style="border-radius: 8px; border: 2px solid #17AA36;"></div>
    
    <button id="button_test" type="button">submit</button>
    
    <div id="result"> </div>
    
    <script>
    
        document.getElementById('button_test').addEventListener("click", async function(e) {
            let rv = await AlticePay.collectCardDataProWS();
            console.log("button click: " + JSON.stringify(rv));
            if (rv.result == "OK") {
                let div = document.getElementById('result');
                div.innerHTML = '';
                Object.entries(rv.card).forEach(([k,v]) => {
                    let p = document.createElement("p");
                    p.innerText = k + ": " + v;
                    div.appendChild(p);
                });
            else {
                alert(rv.error);
            }
        });
    
    </script>
  
  </body>
</html>