useCartCheckout

Checkout a cart via Shopify multi-pass (if customer is logged in) or regular if not logged in.

import { useCartCheckout } from '@backpackjs/storefront';

const CartCheckoutButton = () => {
  const { cartCheckout } = useCartCheckout();
  
  return (
    <Button
      className='CartCheckoutButton'
      onClick={{async (event) => {
        event.preventDefault();

        // redirects a cart to checkout
        await cartCheckout()
      }}
    >
      Checkout
    </Button>
  )
}

Checkout Function Options

The cartCheckout function that is returned from the useCartCheckout hook takes in an optional object as an argument.

Key	Value	Description
redirect	Boolean	Will stop the the automatic redirect and return you an object with the checkout url.

Example of manually getting Cart URL

// storefront project code
const { cartCheckout } = useCartCheckout();

const manuallyGoToCheckout = async (cartId) => {
  const checkoutUrlData = await cartCheckout({ redirect: false });

  window.location.href = checkoutUrlData.url;
};

<button type="button" onClick={manuallyGoToCheckout>
    Checkout
</button>