Checkout 3.0
Troubleshooting

Debug Logging in Avarda Checkout

When investigating issues in production, Avarda Checkout provides a way to enable additional debug logging information.

To enable debug logging, you need to store a specific key-value pair in localStorage. You can do this via the browser Console. In Avarda's Stage/Test environment the debug logging is automatically enabled, the logs should be automatically visible in the browser's console.

Steps to Enable Logging

  1. Open your browser's Developer Tools (F12 or right-click and select Inspect).

  2. Navigate to the Console tab.

  3. Enter the following JavaScript command and press Enter:

    localStorage.setItem('__avarda-checkout--log-callbacks__', 'true');

  4. Refresh the page for the changes to take effect.

Example output

Once enabled, you should see additional logs in the Console when Checkout related events occur. Example logs might include:

-- After calling window.avardaCheckoutInit()
[Avarda checkout] Checkout flags:  {purchaseJwt: '...'}

-- After deliveryAddressChangedCallback was triggered and merchant confirmed the processing with deliveryAddressChangedContinue
[Avarda checkout] Called deliveryAddressChangedCallback merchant callback.
[Avarda checkout] With payload: {zip: '30593', country: 'SE'} {unmount: ƒ, refreshForm: ƒ, beforeSubmitAbort: ƒ, beforeSubmitContinue: ƒ, deliveryAddressChangedContinue: ƒ, …}
Merchant called deliveryAddressChangedContinue checkoutInstance method.
-- After calling avardaCheckout.unmount()
[Avarda checkout] Merchant called unmount checkoutInstance method.

Disabling Debug Logging

If you want to disable debug logging, you can remove the key from localStorage by running:

localStorage.removeItem('__avarda-checkout--log-callbacks__');

Then, refresh the page to stop logging extra debug information.

Incompatibility with sentry.io Session Replay

Recently we have discovered an incompatibility with sentry.io Session Replay feature. Issue has been found when using nuxt framework with sentry.io and replayIntegration enabled, when Checkout form is initialized - Checkout gets stuck in infinite loading and page becomes unresponsive. We are currently in a process of an investigation and we are preparing a bug report with reproducible code examples for sentry.io to get additional feedback and potential resolution of the issues. In the meantime make sure you follow these additional steps for your setup. In case you are not using nuxt but still encounter infinite loading when using sentry.io try disabling it first before other troubleshooting steps.

Workaround for Session Replay Incompatibility

  1. Locate your initialization script for sentry.ioin your codebase.
import * as Sentry from '@sentry/nuxt';
 
Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [Sentry.replayIntegration()],
});
  1. Extend replayIntegration configuration with a block section and add a selector for checkout root element. Use the same checkout rootElementId that was set in avardaCheckoutInit().
import * as Sentry from '@sentry/nuxt';
 
Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [Sentry.replayIntegration({ block: ['#checkout-root'] })],
});

Additional information about blocking elements can be found in the official sentry.io documentation: Blocking Elements (opens in a new tab).

  1. Make sure to test your integration after making these changes to ensure that the issue is resolved.

For more information about sentry.io and their features, please refer to their official documentation: Sentry Documentation (opens in a new tab).

Checkout stuck in loading state after avardaCheckoutInit() or after user interaction

When you encounter a situation where the Checkout is stuck in a loading state, it can be due to several reasons. Here are some common causes and troubleshooting steps:

Mismatch of credentials and checkout frontend bundle url

When integrating with Avarda Checkout, you will receive a set of credentials (clientId, clientSecret) that you use to Obtain Partner access token which is used for authentication towards our APIs. These credentials are environment-specific, meaning that they are tied to a specific environment (e.g., Stage/Test or Production).

In addition to this, when a payment is initialized for Stage/Test environment, it can only be loaded using Checkout form Stage/Test JavaScript bundle. Similarly, when a payment is initialized on Production environment it can only be loaded using Checkout form Production JavaScript bundle. If you try to load a payment using the wrong environment (e.g., payment initialized for Production with Stage/Test JavaScript bundle), the Checkout will appear to be stuck in a loading state - you should be able to see unauthorized errors in the Network tab of the browser's Development tools. Double-check your settings and make sure that you are using the correct credentials, backend API URLs and JavaScript bundle for the environment you are working with.

Correct Checkout base API URLs can be found in Getting Started - Base URLs article. Correct Checkout form JavaScript bundle can be found in Embed Checkout Form (opens in a new tab) article.

Not responding to callback that requires merchant confirmation

When using Avarda Checkout, there are certain callbacks that require the merchant to confirm the processing of the callback. If you do not respond to these callbacks, the Checkout may appear to be stuck in a loading state.

Example of such callbacks include:

1. deliveryAddressChangedCallback

This optional callback is triggered when the delivery address is changed. You need to confirm the processing of this callback by calling deliveryAddressChangedContinue() method on the Checkout instance. More information and code examples for the callback can be found in the Delivery Address Changed Callback article.

In case you do not wish to use this callback, you can disable it by setting deliveryAddressChangedCallback to null in the avardaCheckoutInit() method or not sending it at all.

Example of avardaCheckoutInit() without deliveryAddressChangedCallback:

window.avardaCheckoutInit({
  purchaseJwt: 'ey....',
  rootElementId: 'checkout-form',
  redirectUrl: 'www.acme.com',
  styles: {},
  completedPurchaseCallback: completedPurchaseCallback,
  sessionTimedOutCallback: sessionTimedOutCallback,
});

Make sure you are not sending empty function as a callback, as this will still trigger the callback and require confirmation.

2. beforeSubmitCallback - client-side validation

This optional callback is triggered when the user clicks on the Pay button. You need to confirm the processing of this callback by calling beforeSubmitContinue() method on the Checkout instance or by calling beforeSubmitAbort() method to abort the payment process. More information and code examples for the callback can be found in the Client-side validation article.

In case you do not wish to use this callback, you can disable it by setting beforeSubmitCallback to null in the avardaCheckoutInit() method or not sending it at all.

Example of avardaCheckoutInit() without beforeSubmitCallback:

window.avardaCheckoutInit({
  purchaseJwt: 'ey....',
  rootElementId: 'checkout-form',
  redirectUrl: 'www.acme.com',
  styles: {},
  completedPurchaseCallback: completedPurchaseCallback,
  sessionTimedOutCallback: sessionTimedOutCallback,
});

Make sure you are not sending empty function as a callback, as this will still trigger the callback and require confirmation.

Shipping module not loaded properly

When using Avarda Checkout with shipping module enabled, make sure the shipping module is available and can be loaded properly in the Checkout form. If the Checkout Form cannot load the shipping module, it may appear to be stuck in a loading state.

1. nShift shipping module

By default, Checkout frontend loads and displays the shipping module automatically. Make sure window.UnifaunCheckout is available in the global scope so the shipping module can be loaded properly. For compatibility reasons we allow a merchant to disable the auto-loading functionality by extending the avardaCheckoutInit(). In case you need to disable the auto-loading functionality or want to load the necessary nShift libraries yourself check additional information about this in the nShift integration guide article and Embed Checkout - Extras flag article.

2. Custom Partner Shipping widget

When using Partner Shipping, make sure window.avardaShipping interface is available in the global scope before initializing the Checkout form. If the window.avardaShipping interface is not available, the Checkout form will not be able to load the shipping module and may appear to be stuck in a loading state. For more information about Partner Shipping integration, please refer to the Partner Shipping - Custom solution article.

Testing