Created with Sketch.
Created with Sketch.
Checkout 3.0

Embed Checkout

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

Environment specific urls for Javascript:

Stage/Test: https://avdonl0s0checkout0fe.blob.core.windows.net/frontend/static/js/main.js

Production: https://avdonl0p0checkout0fe.blob.core.windows.net/frontend/static/js/main.js

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 initialization.

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

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

<script>
// For integration with production environment change this property 'CHECKOUT3_JS_BUNDLE' to this new value:
// 'https://avdonl0p0checkout0fe.blob.core.windows.net/frontend/static/js/main.js'
var CHECKOUT3_JS_BUNDLE =
  'https://avdonl0s0checkout0fe.blob.core.windows.net/frontend/static/js/main.js';

(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",
CHECKOUT3_JS_BUNDLE
);

var sessionTimedOutCallback = function(avardaCheckoutInstance) {
  console.log("Session Timed Out - Handle here!")
};

var completedPurchaseCallback = function(avardaCheckoutInstance) {
  console.log("Purchase Completed Successfully - Handle here!")
};

window.avardaCheckoutInit({
  "purchaseJwt": "e8unvqeivnihvew8",
  "rootElementId": "checkout-form",
  "redirectUrl": "www.my-eshop.com",
  "styles": {},
  "disableFocus": true,
  "completedPurchaseCallback": completedPurchaseCallback,
  "sessionTimedOutCallback": sessionTimedOutCallback,
});
</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
purchaseJwtstringPurchase JWT tokenobtained from /api/partner/payments call
rootElementIdstringid of <div> where Checkout is supposed to be displayed
handleByMerchantCallbackfunctionOptional callback required for handling external payments: Handle external payment callback
completedPurchaseCallbackfunctionMandatory callback, 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.
sessionTimedOutCallbackfunctionMandatory callback – is called after purchase session expires and purchase state is “TimedOut”. Allows partner to recover from timed-out session e.g. by initializing a new purchase with the same data.
deliveryAddressChangedCallbackfunctionOptional callback – delivery address changed callback feature
beforeSubmitCallbackfunctionOptional callback – client-side validation
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"
        );

        var sessionTimedOutCallback = function(avardaCheckoutInstance) {
            console.log("Session Timed Out - Handle here!")
        };

        var completedPurchaseCallback = function(avardaCheckoutInstance) {
            console.log("Purchase Completed Successfully - Handle here!")
        };
        
        window.avardaCheckoutInit({
            "purchaseJwt": "<?php echo (string) $purchase_JWT_token; ?>",
            "rootElementId": "checkout-form",
            "redirectUrl": "www.my-eshop.com",
            "styles": {},
            "disableFocus": true,
            "completedPurchaseCallback": completedPurchaseCallback,
            "sessionTimedOutCallback": sessionTimedOutCallback,
        });
    </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