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.

More info about redirect URL
stylesCustom styles
disableFocusboolSend 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.
shippingOptionChangedCallbackfunctionOptional callback – shipping option callback feature

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>

Redirect Url

Redirect Url is used for following scenarios:

  • User cancels an external payment (Card payment, Direct Bank payment, …),
  • External payment was not successful,
  • External payment was successful
  • User cancels external identification (tupas,…)
  • External identification was not successful
  • External identification was successful

Handling all cases is straightforward, make sure you are able to get back to the Checkout Form.
Checkout is able to handle error/not successful scenarios by letting the user continue where he left off – changing his information, switching payment method, etc.
Checkout is able to handle successful scenarios by displaying Complete step page. This page shows “Thank you” message and triggers mandatory completedPurchaseCallback allowing the merchant to process completion.

Direct link to unique cart

https://myshop.test.eu/cart/123456789/checkout

If you are able to match your cart / order with purchaseId, you can directly link to it. On load you should either use stored purchaseJwt to load the Checkout or use your purchaseId to reclaim purchaseJwt and display the checkout form.

Creating new url for handling redirects

https://myshop.test.eu/redirected/ABC123
https://myshop.test.eu/redirected?purchaseId=ABC123

Create specific url that is used for handling redirects, use purchaseId in the URL, match the purchaseId with your internal cart/order and redirect your user back to the page with Checkout Form.
Use stored purchaseJwt to load the Checkout or use your purchaseId to reclaim purchaseJwt and display the Checkout Form.

Reclaiming purchaseJwt

In order to display the checkout, you need purchaseJwt token received from Init payment response. purchaseJwt can either be stored and re-used for the same purchase session or in case you decide not to store it / or lose it somehow – you are able to reclaim the token by calling /api/partner/payments/{purchaseId}/token endpoint.

#Reclaim purchaseJwt token for a specific purchaseId (session)
GET /api/partner/payments/{purchaseId}/token
Authorization: Bearer {partner_access_token}
{  "jwt": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6InBpVmxsb1FEU01..."  }

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