Checkout

The checkout module is provided as a standalone component or as a combination of the components: LiquidDeliveryInfo, LiquidPayment and LiquidOrderSummary.

Usage

import { FC } from 'react';
import {
  LiquidDeliveryInfo,
  LiquidOrderSummary,
  LiquidPayment,
  LiquidCheckout
} from '@liquidcloud/modules-react';

export const DefaultCheckout: FC = () => {
  return <LiquidCheckout mode="dialog" />;
};

export const CustomCheckout: FC = () => {
  return (
    <div className="flex col gap-12 w-full my-8 px-8">
      <LiquidDeliveryInfo />
      <LiquidPayment />
      <LiquidOrderSummary
        onPlaceOrder={() => {
          // navigate to the order confirmation page
        }}
      />
    </div>
  );
};

Properties

property	type	default	description
mode	'standard' | 'dialog'	dialog	Indicates if the checkout should be shown as a dialog or a plain div.
onPlaceOrder	func	-	Callback fired when an order is placed.