Extras flag

The extras object allows you to pass additional options and data to the Checkout form. Currently, the following options are supported:

extraTermsAndConditions

Allows the customer to provide a stringified HTML snippet containing additional terms and conditions that will be displayed under the newsletter subscription checkboxes.

Example

const extras = {
  extraTermsAndConditions:
    '<p>Our newsletters use cookies and similar technologies to measure the opening rate and our customers\' interests in our offers, to provide personalized advertisements and content marketing, and for statistical purposes. Read more about how we use and protect your personal data and cookies in our <a href="https://www.avarda.com/">Privacy Policy</a> and <a href="https://www.avarda.com/">Cookie Policy</a>. You can revoke your consent to the processing of personal data and cookies at any time by unsubscribing from the newsletter.</p>',
};
 
window.avardaCheckoutInit({
  //...additional checkout configuration
  extras: extras,
});

Styling the extra terms and conditions

The provided markup is styled by default to match the styling of the Checkout footer. Overriding of the default styling is possible by using inline styling inside the HTML markup.

Example of default styling

autoLoadShippingScript

The loading behaviour of the necessary shipping module bundle can be controlled using a boolean flag.

• When this flag is set to true, the Checkout application will make an attempt to autonomously load all the prerequisites and insert the required script tags. This is the default behaviour.

• In scenarios where the website’s technology stack employs alternative methods for loading third-party scripts, we offer the option to deactivate automatic loading by setting the flag to false.

const extras = {
  autoLoadShippingScript: false,
};
 
window.avardaCheckoutInit({
  //...additional checkout configuration
  extras: extras,
});

If the automatic loading of the shipping script is disabled, the responsibility for incorporating the script falls upon the developer. In such cases, the developer is required to ensure that the script is loaded prior to the Checkout bundle.

Details of how to include the required script can be found at Avarda NShift integration guide.

iframes (coming soon)

This field allows you to pass an array of iframe objects, each specifying details of the iframe placement and behavior.

ExtraIframe object type

You can specify one or more iframe objects in the iframes array. Each iframe object should follow the structure defined by the ExtraIframe type:

type ExtraIframe = {
  placement: 'abovePaymentMethodSection' | 'topOfCheckout' | 'bottomOfCheckout';
  iframeUrl: string;
  header?: string;
  fallbackMessage?: string;
  initialIframeHeight?: number;
};

• iframeUrl: the URL of the iframe to be embedded in Checkout

• placement: defines where the iframe should be placed in Checkout

  ⚠️

  Only one iframe is allowed per placement
  • abovePaymentMethodSection: places the iframe above the payment method section
  • topOfCheckout: places the iframe at the top of the checkout page - above the Your information section
  • bottomOfCheckout: places the iframe at the bottom of the checkout page - under the Complete payment button

• header (Optional): <h2> header to display above the iframe, if provided (if iframes fails to load and no fallbackMessage is specified, the header won't be displayed)

• fallbackMessage (Optional): fallback message to display in case the iframe fails to load

• initialIframeHeight (Optional): the initial height of the iframe, specified as a number in pixels

Handling iframe loading

Checkout provides a 5-second window to receive a message confirming that the iframe has loaded successfully. If the iframe does not send this message in time, the fallbackMessage (if provided) will be displayed instead.

To notify Checkout that the iframe has successfully loaded, send a extra-iframe-loaded message from the iframe:

window.parent.postMessage({ type: 'extra-iframe-loaded' }, '*');

Adjusting iframe height

Checkout can't predict iframe's height so it's up to you to inform it about your application's height changes. In case you need to dynamically adjust the iframe's height after it has been loaded, you can send a extra-iframe-height-changed message from the iframe. This message should contain the new height of the iframe.

window.parent.postMessage(
  {
    type: 'extra-iframe-height-changed',
    value: document.documentElement.getBoundingClientRect().height,
  },
  '*',
);

Example of passing an iframe to checkout

extras: {
  iframes: [
    {
      placement: 'topOfCheckout',
      iframeUrl: 'https://example.com',
      fallbackMessage: 'Example failed to load. Please try again later.',
      heading: 'Example',
      initialIframeHeight: 500,
    },
  ],
}
 
window.avardaCheckoutInit({
  //...additional checkout configuration
  extras: extras,
});