ServerError container

The ServerError container is designed to handle and display server error messages during the checkout process. You can configure it to display an error message and handle click events.

ServerError configurations

The ServerError container provides the following configuration options:

Option	Type	Req?	Description
autoScroll	boolean	No	Scrolls the element`s ancestor containers such that the error message is visible to the user.
onRetry	function	No	A function to handle retry actions.
onServerError	function	No	A function to handle when there are server errors.

These configuration options are implementing the ServerErrorProps interface:

ServerErrorProps interface

The ServerError container receives an object as parameter which implements the ServerErrorProps interface with the following properties:

export interface ServerErrorProps {
  autoScroll?: boolean;
  onRetry?: () => void;
  onServerError?: (error: string) => void;
}

The autoScroll property is a boolean to indicate if the page should scroll to the element containing the error message and put the focus on it to be visible to the user.

The onRetry property is a handler used to perform actions called when the retry button is clicked.

The onServerError property is a handler used to perform actions called when there is a new error message.

Example

The following example renders the ServerError container on a checkout page. It provides functionality to handle retry actions by removing an error class from the content element and to handle server errors by adding an error class to the content element. The page will scroll to the element containing the error message focusing on it.

import ServerError from '@dropins/storefront-checkout/containers/ServerError.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $serverError = checkoutFragment.querySelector(
  '.checkout__server-error'
);

CheckoutProvider.render(ServerError, {
  autoScroll: true,
  onRetry: () => {
    $content.classList.remove('checkout__content--error');
  },
  onServerError: () => {
    $content.classList.add('checkout__content--error');
  },
})($serverError),