Created with Sketch.
Created with Sketch.

Embed Checkout

On this page you will find all necessary information about How to embed the Checkout form.


Showing the Checkout form

Checkout form will be displayed in a <div> element with a custom unique ID, this ID is passed into the Checkout 3.0 application on initialisation.

<div id="checkout-form"></div>

Include one script with all necessary JS code for the Checkout 3.0 in your source code.

<script>
(function(e,t,n,a,s,c,o,i,r){e[a]=e[a]||function(){(e[a].q=e[a].q||[
]).push(arguments)};e[a].i=s;i=t.createElement(n);i.async=1
;i.src=o+"?v="+c+"&ts="+1*new Date;r=t.getElementsByTagName(n)[0]
;r.parentNode.insertBefore(i,r)})(window,document,"script",
"avardaCheckoutInit","avardaCheckout","1.0.0",
"https://avdonl0s0checkout0fe.blob.core.windows.net/frontend/static/js/main.js"
);

window.avardaCheckoutInit({
  "accessToken": "e8unvqeivnihvew8",
  "rootElementId": "checkout-form",
  "redirectUrl": "www.my-eshop.com",
  "styles": {},
  "disableFocus": true,
});
</script>

Initialise the Checkout application. During the initialisation, additional flags can be passed to change appearance or behaviour of the application. See the list of options below.

PropertyData typeDescription
accessTokenstringPurchase JWT tokenobtained from /api/partner/payments call
rootElementIdstringid of <div> where Checkout is supposed to be displayed
handleByMerchantCallbackfunctionHandle external payment callback
completedPurchaseCallbackfunctionCallback, which is called when purchase in Checkout is completed. checkoutInstance is argument and you should call unmount() on it to remove Checkout from page and complete purchase in e-shop.
deliveryAddressChangedCallbackfunctionOptional callback – delivery address changed callback feature
personalInfoLoadedCallbackfunctionOptional callback – personal info loaded callback feature
redirectUrlstring or functionUrl where to redirect the user after finishing the action on 3rd parties websites (for example card payment).

You can pass string, which will be used directly or you can pass function, which returns string and will be called from Checkout3 before every request. So you can store additional data, which you want to get after redirect, etc.
stylesCustom styles
disableFocus`boolSend true if you want to set focus for any other element, false if it should be set for first Checkout input. If this parameter won’t be sent, false will be used as default.

Example

<?php
// Get "Purchase JWT token" `$api_url//api/partner/payments`
// See more info here: <https://docs.avarda.com/?post_type=checkout30&p=1552#initialize-payment>
$purchase_JWT_token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJDaGVja291dCIsImp0aSI6IjljZGRhZWI4LWU1N2UtNGIwNC04ZDdjLTBjODc0YTA1MDY2MyIsIlB1cmNoYXNlSWQiOiJBVlQzZ24iLCJleHAiOjE1Nzg5MTE0OTh9.HMRidZgeOQtOQtXyHwanmfS0KwYXb73m5lkTeQ449co";
?>

<html>

<head>
</head>

<body>
    <div id="checkout-form"></div>
    <script>
        (function(e,t,n,a,s,c,o,i,r){e[a]=e[a]||function(){(e[a].q=e[a].q||[
        ]).push(arguments)};e[a].i=s;i=t.createElement(n);i.async=1
        ;i.src=o+"?v="+c+"&ts="+1*new Date;r=t.getElementsByTagName(n)[0]
        ;r.parentNode.insertBefore(i,r)})(window,document,"script",
        "avardaCheckoutInit","avardaCheckout","1.0.0",
        "https://avdonl0s0checkout0fe.blob.core.windows.net/frontend/static/js/main.js"
        );

        window.avardaCheckoutInit({
            "accessToken": "<?php echo (string) $purchase_JWT_token; ?>",
            "rootElementId": "checkout-form",
            "redirectUrl": "www.my-eshop.com",
            "styles": {},
            "disableFocus": true,
        });
    </script>
</body>

</html>

PHP integration example

Check the PHP demo example of Checkout 3.0 integration in our public repository on Github: https://github.com/avarda-ab/checkout3-phpdemo