Overview

This component library is designed for the checkout page in your e-commerce flow. Here's how it fits into a typical purchase journey:

  1. Product/Landing Page: Users browse products on your product or landing page. You should provide a button or link that navigates users to the checkout page when they're ready to purchase.
  2. Checkout Page: This is where you integrate this component library. Users can submit their purchase information here.
  3. Finish Page: After successful payment, redirect users to a finish page to confirm their order completion.

Key Features

@clickaroo/checkout-ui provides a complete checkout solution with the following capabilities:

  • Multiple Payment Methods: Support for various payment options including credit cards, express payment buttons (Apple Pay, Google Pay), and more
  • Customer Information Collection: Built-in forms for collecting customer details with validation
  • Address Management: Delivery address collection with optional Google Places API integration for address autocomplete
  • Order Processing: Complete order submission flow with event callbacks for tracking and customization
  • React Integration: Seamlessly integrates with React applications, built with React hooks and context API

Common Use Cases