Embed Checkout

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.

Property	Data type	Description
`purchaseJwt`	string	`Purchase JWT token`obtained from `/api/partner/payments` call
`rootElementId`	string	`id` of `<div>` where Checkout is supposed to be displayed
`handleByMerchantCallback`	function	Optional callback required for handling external payments: Handle external payment callback
`completedPurchaseCallback`	function	Mandatory 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.
`sessionTimedOutCallback`	function	Mandatory 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.
`deliveryAddressChangedCallback`	function	Optional callback – delivery address changed callback feature
`beforeSubmitCallback`	function	Optional callback – client-side validation
`redirectUrl`	string or function	Url 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
`styles`		Custom styles
`disableFocus`	bool	Send `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.
`shippingOptionChangedCallback`	function	Optional callback – shipping option callback feature
`paymentMethodChangedCallback`	function	Optional callback – payment method callback feature
`includePaymentFeeInTotalPrice`	bool	Optional 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
`modeChangedCallback`	function	Optional callback – modeChangedCallback
`emailKnownCallback`	function	Optional callback – emailKnownCallback
`hideAvardaLogo`	bool	Optional 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.
extras	object	Optional 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)

Getting Started Custom Styles