Sample Code: Embedded Checkout Integration

Quick examples to get you started with myPOS Embedded Checkout!

Test Data for Integration

Sandbox Credentials

Use these test credentials to try the integration. All values are from the official Test Data page.

Store ID (SID)

000000000000010

Wallet Number

61938166610

Key Index

1

Sandbox Mode

isSandbox: true

Choose Your Integration Method

Recommended

Option 1: Standard Payment

One-step checkout where payment happens immediately when user submits the form.

Advanced

Option 2: Deferred Payment

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

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',                          // Store ID
    ipcLanguage: 'en',                               // Checkout page language (ISO 2)
    walletNumber: '61938166610',                     // Wallet number
    amount: 23.45,                                   // Total amount
    currency: 'EUR',                                 // Currency code
    orderID: Math.random().toString(36).substr(2, 9), // Unique order ID
    urlNotify: 'https://yoursite.com/payment-notify', // ⚠️ Replace with your URL!
    urlOk: window.location.href,                     // Optional - required only for iDeal
    urlCancel: window.location.href,                 // Optional - required only for iDeal
    keyIndex: 1,                                     // Key index
    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,                    // Set to false for production!
    onSuccess: function (data) {
        console.log('Payment successful!', data);
    },
    onError: function () {
        console.log('Payment failed');
    }
};

Step 5: Initialize the Payment

MyPOSEmbedded.createPayment(
    'myPOSEmbeddedCheckout',  // ID of your div container
    paymentParams,            // Payment configuration
    callbackParams            // Callback handlers
);

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.

How it works

1Use createPaymentForm instead of createPayment

2This excludes the built-in "Pay" button from the form

3Call payment.processPayment() when you're ready to process

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) {
        // Handle error and info messages
        console.log('Messages:', messages);
    },
    onSuccess: function (data) {
        console.log('Payment successful!', data);
    },
    onError: function () {
        console.log('Payment failed');
    }
};

// Create the form (without built-in Pay button)
MyPOSEmbedded.createPaymentForm(
    'myPOSEmbeddedCheckout',
    paymentParams,
    callbackParams
).then(function (payment) {
    // Enable your custom Pay button
    var button = document.getElementById('btn-pay');
    button.disabled = false;
    
    // Process payment when button is clicked
    button.addEventListener("click", function () {
        payment.processPayment();
    });
});

Going Live Checklist

Ready for Production?

Set isSandbox: false in your callback parameters

Replace test credentials with your production Store ID and Wallet Number

Ensure urlNotify points to your secure server endpoint

Test thoroughly with real credentials in a controlled environment

Test Data & Sandbox

Test credentials & card numbers

Customization

Style the checkout form