Checkout 3.0
Embed Checkout Form

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

Environment-specific URLs for Javascript:

Stage/Test: https://stage.checkout-cdn.avarda.com/cdn/static/js/main.js (opens in a new tab)

Production: https://checkout-cdn.avarda.com/cdn/static/js/main.js (opens in a new tab)

Showing the Checkout form

The 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 Checkout 3.0 in your source code.

<script>
  // For integration with production environment change this property 'CHECKOUT3_JS_BUNDLE' to this new value:
  // 'https://checkout-cdn.avarda.com/cdn/static/js/main.js';
  var CHECKOUT3_JS_BUNDLE =
    'https://stage.checkout-cdn.avarda.com/cdn/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 the 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
paymentMethodChangedCallbackfunctionOptional callback – payment method callback feature
includePaymentFeeInTotalPriceboolOptional flag includePaymentFeeInTotalPrice allows merchant to show an additional “invoice fee” or “payment fee” in the Checkout 3 form total price – Include additional fees in total price
modeChangedCallbackfunctionOptional callback – modeChangedCallback
hideAvardaLogoboolOptional flag
Send true, if you want to hide the “Powered By Avarda Logo” in the Checkout Form Footer, false to have it displayed. If this parameter is not provided, false is used as default.
extrasobjectOptional flag
Extras flag
<?php
// Get "Purchase JWT token" `$api_url//api/partner/payments`
// See more info here: <https://docs.avarda.com/checkout-3/getting-started/#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://stage.checkout-cdn.avarda.com/cdn/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>

Checkout Instance

Checkout instance is a javascript object created after calling window.avardaCheckoutInit(), it is returned as a return value from the init function and also attached to the window as avardaCheckout. Checkout instance contains various functions for interacting with Checkout 3 Form such as refreshing the form to get the latest data or removing the form from the page. For more detailed information check the “Handling Avarda Checkout instance” article.

Redirect Url

Redirect Url is used for the 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 the step page. This page shows a “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 a 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 (opens in a new tab)