Checkout Utilities

Utility functions and React hooks for checkout functionality, available from @woocommerce/blocks-checkout.

useValidateCheckout

A hook that validates the checkout form and automatically scrolls to the first validation error if any are found.

This hook is primarily used internally by the PlaceOrderButton component to provide the validate prop to custom place order button components. However, it can also be used directly if needed.

Usage

// Aliased import
import { useValidateCheckout } from '@woocommerce/blocks-checkout';

// Global import
// const { useValidateCheckout } = wc.blocksCheckout;

const MyComponent = () => {
    const validateCheckout = useValidateCheckout();

    const handleClick = async () => {
        const { hasError } = await validateCheckout();

        if ( hasError ) {
            // Validation failed - errors are automatically shown and
            // the page scrolls to the first error
            return;
        }

        // Validation passed - proceed with your logic
    };

    return <button onClick={ handleClick }>Validate</button>;
};

Return Value

The hook returns a function that, when called:

1. Emits the CHECKOUT_VALIDATION event to run all registered validation callbacks
2. Checks the validation store for any field-level validation errors
3. If errors are found:
   • Shows all validation errors
   • Scrolls to and focuses the first error element
4. Returns a promise that resolves to { hasError: boolean }