useCheckoutMutation

The useCheckoutMutation hook is a specialized wrapper around useMutation that provides methods for the multi-step checkout process. It coordinates between cart data and account-level data (like saved addresses) to ensure that the checkout flow remains synchronized.

import { useCheckoutMutation } from 'shop/client/features/cart/hooks/useCheckoutMutation';

const { setDeliveryMode, createDeliveryAddress, isCheckoutLoading } = useCheckoutMutation(options);

Parameters

Name	Type	Required	Description
options	MutateOptions		Standard options for the useMutation hook.

options

Standard mutation options. See MutateOptions for more information.

Return value

Property	Type	Description
createDeliveryAddress	(address: DeliveryAddress) => Promise<void>	Creates a new delivery address for the cart.
setDeliveryMode	(mode: string) => Promise<void>	Sets the shipping/delivery method.
setPaymentMode	(data: PaymentData) => Promise<void>	Sets the payment method.
isCheckoutLoading	boolean	True if a checkout step is in progress.
isCheckoutError	boolean	True if a checkout step failed.
resetCheckoutError	Function	Clears the error state.

Example

import { useCheckoutMutation } from 'shop/client/features/cart/hooks/useCheckoutMutation';

function ShippingMethods({ modes }) {
    const { setDeliveryMode, isCheckoutLoading } = useCheckoutMutation();

    const handleSelect = async (mode) => {
        await setDeliveryMode(mode.code);
    };

    return (
        <div>
            {modes.map(mode => (
                <button 
                    key={mode.code} 
                    onClick={() => handleSelect(mode)}
                    disabled={isCheckoutLoading}
                >
                    {mode.name}
                </button>
            ))}
        </div>
    );
}