Checkout containers overview

During the checkout process, some containers need to be rendered or not depending on the use of some conditions, in our case, data extracted from the cart state. This is based on the HOC (High Order Component) concept, where there is a component which provides us with a way to reuse behavior and state logic between components.

A HOC is a Javascript function that receives at least one component as a parameter and returns a new component by injecting the logic that you want to reuse through props. In other words, a HOC is a function that receives a component and returns a new enriched component. The main benefit of HOCs is the reuse of logic.

In our case, we have defined a function called withConditionalRendering() that receives a Container as a parameter and returns a ConditionalContainer. This ConditionalContainer accepts a couple of props (apart from the Container’s own) that will be used by the logic injected into it to decide whether the Checkout drop-in should render the container or not.

ConditionalContainer configurations

The ConditionalContainer container provides the following configuration options:

The structure of the withConditionalRendering() function is defined as following:

export interface ConditionalProps {
  hideOnEmptyCart?: boolean;
  hideOnVirtualCart?: boolean;
}

export const withConditionalRendering = <P extends object>(
  WrappedContainer: Container<P>
) => {
  const ConditionalContainer = ({
    hideOnEmptyCart = true,
    hideOnVirtualCart = false,
    ...props
  }: ConditionalProps & P) => {
    // Logic to hide the container goes here
  };

  return ConditionalContainer;
};