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
onRetry	Function	No	A function to handle retry actions.
onServerError	Function	No	A function to handle server errors.

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.

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, {
  onRetry: () => {
    $content.classList.remove('checkout__content--error');
  },
  onServerError: () => {
    $content.classList.add('checkout__content--error');
  },
})($serverError),