API documentation

# 4.5 Iframe Integration

The Wallet V3 iframe integration provides the same functionality as the standard integration, but runs inside an isolated iframe. All methods and events work identically unless noted otherwise in this document.

# 4.5.1 Loading the SDK

Load the SDK script on your page:

Test environment:

<script src="https://wallet-sdk-v3-test.mycheckapp.com/latest/sdk.js"></script>

Sandbox environment:

<script src="https://wallet-sdk-v3-sandbox.mycheckapp.com/latest/sdk.js"></script>

Production environment:

<script src="https://wallet-sdk-v3.mycheckapp.com/latest/sdk.js"></script>

TIP

Unlike the standard integration, the iframe SDK requires only a single script tag. No CSS file is needed, styles are bundled within the iframe.

# 4.5.2 Wallet placeholder

Add a div with the mycheck-wallet-v3 ID where the wallet should appear:

<div id="mycheck-wallet-v3"></div>

The SDK automatically creates the iframe inside this element when mycheck.auth.connect() is called.

# 4.5.3 Integration steps

The full initialization sequence:

// 1. Start listening to events
mycheck.wallet.on("checkoutReady", function (status, paymentDetails) {
    console.log(status, paymentDetails);
});

// 2. Authorize — SDK automatically creates the iframe at this point
mycheck.auth.connect({
    publishableKey: '<Ask Shiji for a publishable key>',
    refreshToken: '<Created using the createRefresh call>'
});

// 3. Initialize
mycheck.wallet.init({
    "settings": {
        "locale": "en",
        "merchant_id": 3877,
        "view": "CHECKOUT"
    },
    "payment_details": {
        "currency": "USD",
        "amount": "10.00"
    }
});

# 4.5.4 Iframe-specific events

In addition to all standard events, the iframe integration provides the following events:

# Resize event

Fired whenever the wallet content height changes. Use this to adjust the iframe container height for a seamless appearance.

mycheck.wallet.on("resize", function (height) {
    var container = document.getElementById('wallet-container');
    var iframe = container.querySelector('iframe');
    iframe.style.height = height + 'px';
});

# 3dsStarted event

Fired when a 3DS challenge modal opens inside the iframe. The iframe will need more vertical space to display the challenge.

mycheck.wallet.on("3dsStarted", function () {
    // Expand container or show overlay
});

# 3dsEnded event

Fired when the 3DS challenge modal closes.

mycheck.wallet.on("3dsEnded", function () {
    // Restore normal layout
});

# 4.5.5 Supported methods

The iframe integration is API-compatible with the standard integration — no additional methods are required.

All methods work identically — see 4.4 Supported Methods for the full list.

# 4.5.6 Supported events

The iframe integration adds the following events:

Event Description
resize Wallet content height changed
3dsStarted 3DS challenge modal opened
3dsEnded 3DS challenge modal closed

All other events work identically — see 4.3 Supported Events for the full list.

# 4.5.7 General guidelines

The following sections from the standard integration apply equally to the iframe integration:

← Important Note →