Sample Code: Embedded Checkout Integration

Quick examples to get you started with myPOS Embedded Checkout!

Option 1: Standard Payment Integration

Best for: One-step checkout where payment happens immediately.

Step 1: Add the Checkout Container Add this div element where you want the payment form to appear:

<div id="myPOSEmbeddedCheckout"></div>

Step 2: Import the SDK

Choose your preferred method:

// JavaScript/ES6
import * as MyPOSEmbedded from 'mypos-embedded-checkout';

Step 3: Configure Payment Details

Set up your payment parameters:

var paymentParams = {
    sid: '000000000000010',
    ipcLanguage: 'en',
    walletNumber: '61938166610',
    amount: 23.45,
    currency: 'EUR',
    orderID: Math.random().toString(36).substr(2, 9),
    urlNotify: 'https://yoursite.com/payment-notify', // Replace with your URL!
    urlOk: window.location.href,
    urlCancel: window.location.href,
    keyIndex: 1,
    cartItems: [
        {
            article: 'HP ProBook 6360b sticker',
            quantity: 2,
            price: 10,
            currency: 'EUR',
        },
        {
            article: 'Delivery',
            quantity: 1,
            price: 3.45,
            currency: 'EUR'
        }
    ]
};

Important: Replace urlNotify with your own server endpoint to verify payments!

Step 4: Set Up Callbacks

Handle the payment response:

var callbackParams = {
    isSandbox: true,
    onSuccess: function (data) {
        console.log('Payment successful!', data);
    },
    onError: function () {
        console.log('Payment failed');
    }
};

Step 5: Initialize the Payment

MyPOSEmbedded.createPayment(
    'myPOSEmbeddedCheckout',
    paymentParams,
    callbackParams
);

Complete Example

import * as MyPOSEmbedded from 'mypos-embedded-checkout';

var paymentParams = {
    sid: '000000000000010',
    ipcLanguage: 'en',
    walletNumber: '61938166610',
    amount: 23.45,
    currency: 'EUR',
    orderID: Math.random().toString(36).substr(2, 9),
    urlNotify: 'https://yoursite.com/payment-notify',
    urlOk: window.location.href,
    urlCancel: window.location.href,
    keyIndex: 1,
    cartItems: [
        {
            article: 'HP ProBook 6360b sticker',
            quantity: 2,
            price: 10,
            currency: 'EUR',
        },
        {
            article: 'Delivery',
            quantity: 1,
            price: 3.45,
            currency: 'EUR'
        }
    ]
};

var callbackParams = {
    isSandbox: true,
    onSuccess: function (data) {
        console.log('Payment successful!', data);
    },
    onError: function () {
        console.log('Payment failed');
    }
};

MyPOSEmbedded.createPayment(
    'myPOSEmbeddedCheckout',
    paymentParams,
    callbackParams
);

Option 2: Deferred Payment Integration

Best for: Multi-step checkout where you show the form early and trigger payment later.

import * as MyPOSEmbedded from 'mypos-embedded-checkout';

var paymentParams = {
    sid: '000000000000010',
    ipcLanguage: 'en',
    walletNumber: '61938166610',
    amount: 23.45,
    currency: 'EUR',
    orderID: Math.random().toString(36).substr(2, 9),
    urlNotify: 'https://yoursite.com/payment-notify',
    urlOk: window.location.href,
    urlCancel: window.location.href,
    keyIndex: 1,
    cartItems: [
        {
            article: 'HP ProBook 6360b sticker',
            quantity: 2,
            price: 10,
            currency: 'EUR',
        },
        {
            article: 'Delivery',
            quantity: 1,
            price: 3.45,
            currency: 'EUR'
        }
    ]
};

var callbackParams = {
    isSandbox: true,
    onMessageReceived: function (messages) {
        console.log('Messages:', messages);
    },
    onSuccess: function (data) {
        console.log('Payment successful!', data);
    },
    onError: function () {
        console.log('Payment failed');
    }
};

MyPOSEmbedded.createPaymentForm(
    'myPOSEmbeddedCheckout',
    paymentParams,
    callbackParams
).then(function (payment) {
    var button = document.getElementById('btn-pay');
    button.disabled = false;
    button.addEventListener("click", function () {
        payment.processPayment();
    });
});

Going Live? Remember to set isSandbox: false in production!