IFrame Checkout

MEO Wallet provides an alternative way to handle checkouts via an iframe embedded in your website.

First, you must create a checkout via API as documented in the previous section. After getting a checkout URL, follow these steps in your website:

1. Include two script tags

Add two script tags to your online store page.

<script type="text/javascript" src="resizeIFrame.js"></script>
<script type="text/javascript" id="checkout-handler" data-url="WALLET_URL" data-checkout-id="CHECKOUT_ID" src="WALLET_URL/assets/js/pay/checkout.js"></script>

The first script (resizeIFrame.js) must be located in your website and the source code is below:

window.addEventListener('message', function(e) {
 
    //replace WALLET_URL placeholder according to the environment
    if (e.origin !== "WALLET_URL") {
        return;
    }
 
    var iframe = document.getElementById('checkout-iframe');
    var eventName = e.data[0];
    var data = e.data[1];
 
    switch(eventName) {
        case 'setHeight':
            if (iframe.height < parseFloat(data)) {
                iframe.height = data;
            }
        break;
        case 'reloadIFrame':
            iframe.src = iframe.src;
        break;
 
    }
}, false);

Don’t change the above source code (except for configuration), if you don’t understand what you are doing.

In the second script (checkout.js”), there are three optional data-attributes named: data-width, data-height and data-locale.

data-width and data-heigth attributes are useful for you define a customized size for the content to be loaded in the iframe. We recommend to keep these values unchanged.

data-locale should be used if you want to define a specific language when the checkout is opened by your customers. If this value is omitted, the language is defined based in the browser definitions (first preferred locale defined at the “Accept-Language” HTTP header).

If the preferred locale is unsupported, the checkout is opened in Portuguese. User can change the language to English if this occurs.

Supported values for data-locale attribute are: pt_PT and en_US.

2. Replace placeholders

Replace placeholders with your data (varies according to the environment):

WALLET_URL

Sandbox: https://icheckout.sandbox.meowallet.pt

Production: https://icheckout.wallet.pt

CHECKOUT_ID

Returned on the response of api/v2/checkout service, parameter id.

3. Add a div tag

Add a div tag to your HTML with the id wallet:

<div id="wallet"></div>

4. Store registration

Ask to our technical support the registration of your store.

Provide sandbox and production URL. Must use the https protocol.

5. Test

Try to create and pay a checkout with the desired payment methods.