Midaspay Checkout SDK Verification Mode

SDK Overview

Launch available payment channels through Midaspay after order placement to provide seamless checkout experience.

Verification Mode is designed for card verification and binding scenarios with the following features:

• Automatically appends from_midaspay_sdk=1 parameter to the URL
• Overlay popup has a fixed size of 800px × 844px
• Size remains constant regardless of window size changes

Installation

Include the script in your HTML file:

Sandbox Environment:

<script src="https://sandbox-page.centauriglobal.com/frontend/static/midas-checkout-sdk.min.js"></script>

Production Environment:

<script src="https://cdn.harvestsharp.com/frontend/static/midas-checkout-sdk.min.js"></script>

API Reference

Initialization

Initialize the SDK by calling MidasCheckoutSDK.init() with a configuration object:

MidasCheckoutSDK.init({
    url: 'YOUR_VERIFICATION_URL',
    type: 'overlay',
    container: 'midas-mor-checkout',
    verification: true,
    onEvents: (res) => {
        console.log('Event received:', res);
    }
});

Parameters

Parameter	Type	Required	Description
url	string	Yes	The verification URL provided by Midaspay backend. This URL contains authentication token and configuration parameters.
type	string	Yes	Display type of the checkout interface. Use 'overlay' for verification mode to show a modal popup.
container	string	Yes	The container element ID where the SDK will render.
verification	boolean	Yes	Set to true to enable verification mode. This activates fixed-size overlay (800px × 844px) and adds SDK identification parameter to the URL.
onEvents	function	Yes	Callback function to handle SDK events. Receives an event object with action status and order information.

Events

The onEvents callback receives event objects with the following structure.

Note: All event field values (action, status, result_code) are guaranteed to be lowercase. The SDK normalizes these fields automatically.

Event Action	Description	Example Response
init_sdk	SDK initialization started	{ action: 'init_sdk' }
init_sdk_success	SDK initialized successfully	{ action: 'init_sdk_success' }
init_sdk_failed	SDK initialization failed	{ action: 'init_sdk_failed' }
success	Verification completed successfully	{ order_id: '1234567', action: 'success' }
failed	Verification failed	{ order_id: '1234567', action: 'failed' }
processing	Verification status is unknown; polling required	{ order_id: '1234567', action: 'processing' }
close_overlay	Overlay closed by user	{ action: 'close_overlay' }

Event Handling Example:

onEvents: (res) => {
    switch (res.action) {
        case 'init_sdk':
            console.log('SDK initializing...');
            break;
        case 'init_sdk_success':
            console.log('SDK ready');
            break;
        case 'init_sdk_failed':
            console.error('SDK initialization failed');
            break;
        case 'success':
            console.log('Verification successful, order:', res.order_id);
            // Handle successful verification
            break;
        case 'failed':
            console.error('Verification failed, order:', res.order_id);
            // Handle failed verification
            break;
        case 'processing':
            console.log('Verification processing, order:', res.order_id);
            // Poll order status from your backend
            break;
        case 'close_overlay':
            console.log('Overlay closed');
            // Handle overlay close event
            break;
    }
}

Methods

MidasCheckoutSDK.init(config)

Initializes the SDK with the provided configuration. Must be called before any other SDK methods.

Parameters:

• config (Object): Configuration object containing initialization parameters.

Returns: void

---

MidasCheckoutSDK.checkout()

Opens the verification overlay popup. Call this method when the user initiates the verification process (e.g., clicking a button).

Parameters: None

Returns: void

Usage:

// Trigger checkout on button click
document.getElementById('verify-btn').addEventListener('click', () => {
    MidasCheckoutSDK.checkout();
});

Usage Guide

Step 1: Include the SDK

Add the SDK script to your HTML file before your application code.

Step 2: Initialize the SDK

Call MidasCheckoutSDK.init() with your configuration after the page loads.

Step 3: Trigger Verification

Call MidasCheckoutSDK.checkout() when the user is ready to start the verification process.

Step 4: Handle Events

Implement the onEvents callback to handle verification results and update your UI accordingly.

Note: When receiving a processing event, you should poll your backend to check the final verification status, as the result may not be immediately available.

Verification Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midas MoR SDK Demo - Verification Mode</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        html {
            background: #eeeeee;
            background-size: cover;
        }
        h1 {
            text-align: center;
            color: black;
            margin: 0.5em 0;
        }
        .description {
            text-align: center;
            color: #666;
            margin: 1em 0;
            font-size: 14px;
        }
        .btn-group {
            text-align: center;
            margin-top: 3em;
        }
        button {
            padding: 0.5em 1em;
            font-size: 18px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            background: #007bff;
            color: white;
        }
        button:hover {
            background: #0056b3;
        }
    </style>
    <!-- Local development uses locally built SDK -->
    <script src="../dist/midas-checkout-sdk.min.js"></script>
    <!-- Production environment can use CDN -->
    <!--<script src="https://cdn.harvestsharp.com/frontend/static/midas-checkout-sdk.min.js"></script>-->
    <script>
        /**
         * Verification Mode Demo
         */
        MidasCheckoutSDK.init({
            url: 'xxx.xxx.xxx',
            type: 'overlay',
            container: 'midas-mor-checkout',
            verification: true,
            onEvents: (res) => {
                console.log('onEvents: ', res);
                // example:

                // {action: 'init_sdk'}

                // {action: 'init_sdk_success'}

                // {action: 'init_sdk_failed'}

				// success
                // { order_id: '1234567', action: 'success' }

				// failed
                // { order_id: '1234567', action: 'failed' }

				// The status is unknown; in this case, it is necessary to poll the order status.
				// { order_id: '1234567', action: 'processing' }

                // Overlay closed
                // { action: 'close_overlay' }
            }
        });

        const checkout = () => {
            MidasCheckoutSDK.checkout();
        };
    </script>
</head>
<body>
    <h1>Midas MoR SDK Demo - Verification Mode</h1>
    <div class="btn-group">
        <button onclick="checkout()">Open Verification Overlay</button>
    </div>
</body>
</html>