Purchase with payment card

 

1. Create a "div" element.

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



2. Include the embeded SDK library in your .html or .js file.

import * as MyPOSEmbedded from 'mypos-embedded-checkout';
<script src="https://developers.mypos.com/repository/mypos-embedded-sdk.js" type="text/javascript"></script>

 

3. Generate a payment parameters object for the purchase:

var paymentParams = {
    sid: '000000000000010',
    ipcLanguage: 'en', //Checkout page language (ISO 2 format).
    walletNumber: '61938166610',
    amount: 23.45,
    currency: 'EUR',
    orderID: Math.random().toString(36).substr(2, 9),
    urlNotify: MyPOSEmbedded.IPC_URL + '/client/ipcNotify', // Warning: use your own url to verify your payment!
    urlOk: window.location.href, // Optional - required only for iDeal
    urlCancel: window.location.href, // Optional - required only for iDeal
    keyIndex: 1,
    cartItems: [
        {
            article: 'HP ProBook 6360b sticker',
            quantity: 2,
            price: 10,
            currency: 'EUR',
        },
        {
            article: 'Delivery',
            quantity: 1,
            price: 3.45,
            currency: 'EUR'
        }
    ]
};

Note: the above parameters are from the Test Data available here. For more information about the parameters themselves, please refer to the IPCPurchase method documentation.

 

4. Generate a callback object for the purchase:

var callbackParams = {
    isSandbox: true,
    onSuccess: function (data) {
        console.log('success callback');
        console.log(data);
    },
    onError: function () {
        console.log('error');
    }
};

Note: the above parameters are from the Test Data available here. 

 

5. Call the "createPayment" method from the MyPOSEmbedded object and pass the "id" of the <div> HTML element from step 1. as well as the configuration objects from steps 2. and 3.

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

 

Summary of the full code:

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

var paymentParams = {
    sid: '000000000000010',
    ipcLanguage: 'en', //Checkout page language (ISO 2 format).
    walletNumber: '61938166610',
    amount: 23.45,
    currency: 'EUR',
    orderID: Math.random().toString(36).substr(2, 9),
    urlNotify: MyPOSEmbedded.IPC_URL + '/client/ipcNotify', // Warning: use your own url to verify your payment!
    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('success callback');
        console.log(data);
    },

    onError: function () {
        console.log('error');
    }
};

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

<div id="myPOSEmbeddedCheckout"></div>
<script src="https://developers.mypos.com/repository/mypos-embedded-sdk.js" type="text/javascript"></script>
<script>
    var paymentParams = {
        sid: '000000000000010',
        ipcLanguage: 'en', //Checkout page language (ISO 2 format).
        walletNumber: '61938166610',
        amount: 23.45,
        currency: 'EUR',
        orderID: Math.random().toString(36).substr(2, 9),
        urlNotify: MyPOSEmbedded.IPC_URL + '/client/ipcNotify', // Warning: use your own url to verify your payment!
        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('success callback');
            console.log(data);
        },

        onError: function () {
            console.log('error');
        }
    };

    MyPOSEmbedded.createPayment(
        'embeddedCheckout',
        paymentParams,
        callbackParams
    );
</script>
 

 

Purchase with payment card (Form method)

If you have a step by step flow in your website and if you want to use the checkout form at an earlier step but initiate the actual payment later during the checkout, then you can use the createPaymentForm method. This will exclude our "Pay" button from the form and disable our error message interface:

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

var paymentParams = {
	sid: '000000000000010',
        ipcLanguage: 'en', //Checkout page language (ISO 2 format).
	walletNumber: '61938166610',
	amount: 23.45,
	currency: 'EUR',
	orderID: Math.random().toString(36).substr(2, 9),
	urlNotify: MyPOSEmbedded.IPC_URL + '/client/ipcNotify', // Warning: use your own url to verify your payment!
	urlOk: window.location.href, // Optional - required only for iDeal
	urlCancel: window.location.href, // Optional - required only for iDeal
	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) {
		//Error and info messages.
		console.log(messages)
	},

	onSuccess: function (data) {
		console.log('success callback');
		console.log(data);
	},

	onError: function () {
		console.log('error');
	}
};

MyPOSEmbedded.createPaymentForm(
	'embeddedCheckout',
	paymentParams,
	callbackParams
).then (function (payment) {
	var button = document.getElementById('btn-pay');
	button.disabled = false;
	button.addEventListener("click", function () {
		payment.processPayment();
	}, false);
});
<div id="embeddedCheckout"></div>
<button class="btn btn-primary" id="btn-pay" name="pay" disabled>Pay</button>

<script src="mypos-embedded-sdk.js"></script>
<script>

    var paymentParams = {
        sid: '000000000000010',
        ipcLanguage: 'en', //Checkout page language (ISO 2 format).
        walletNumber: '61938166610',
        amount: 23.45,
        currency: 'EUR',
        orderID: Math.random().toString(36).substr(2, 9),
        urlNotify: MyPOSEmbedded.IPC_URL + '/client/ipcNotify', // Warning: use your own url to verify your payment!
        urlOk: window.location.href, // Optional - required only for iDeal
        urlCancel: window.location.href, // Optional - required only for iDeal
        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) {
            //Error and info messages.
            console.log(messages)
        },

        onSuccess: function (data) {
            console.log('success callback');
            console.log(data);
        },

        onError: function () {
            console.log('error');
        }
    };

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

</script>
 

Note:

If you are ready to deploy on production environment, please set "isSandbox" parameter to "false".