DeliveryAddress

A customizable delivery address component that collects and validates delivery address information including country, address, city, state, and zip code. This component uses useCheckoutContext to manage delivery address state and provides built-in validation with dynamic field rendering based on country selection.

• Must be used inside CheckoutProvider.
• Supports Google Places API integration for address autocomplete.
• Dynamically renders address fields based on selected country configuration.
• Supports custom styling and layout configuration.

Props

showTitle

Whether to display the "Delivery Address" title.

showTitle?: boolean = true

showLabel

Whether to display labels for input fields.

showLabel?: boolean = true

googleApiKey

Google Places API Key for enabling address autocomplete functionality. When provided, the address input field will support Google Places suggestions.

googleApiKey?: string

The API key must meet the Google Places API requirements.

styles

Custom CSS styles for the component. Supports nested style objects for different parts of the component.

styles?: {
  root?: React.CSSProperties;
  container?: React.CSSProperties;
  input?: React.CSSProperties;
}

Usage Examples

import { DeliveryAddress } from '@clickaroo/checkout-ui';
 
function CustomCheckout() {
  return (
    <DeliveryAddress
      googleApiKey={YOUR_GOOGLE_API_KEY}
      styles={{
        root: {
          marginBottom: '20px',
        },
        container: {
          padding: '24px',
          borderRadius: '8px',
        },
        input: {
          fontSize: '16px',
        },
      }}
    />
  );
}