checkout.md

📣 Announcement: New documentation location

The documentation for WooCommerce Blocks has moved to the WooCommerce monorepo.

Please refer to the documentation in the new location as the files in this repository will no longer be updated and the repository will be archived.

---

Checkout Store (wc/store/checkout)

💡 What's the difference between the Cart Store and the Checkout Store?

The Cart Store (wc/store/cart) manages and retrieves data about the shopping cart, including items, customer data, and interactions like coupons.

The Checkout Store (wc/store/checkout) manages and retrieves data related to the checkout process, customer IDs, order IDs, and checkout status.

Table of Contents

• Overview
• Usage
• Selectors
  • getCustomerId
  • getOrderId
  • getOrderNotes
  • getRedirectUrl
  • getExtensionData
  • getCheckoutStatus
  • getShouldCreateAccount
  • getUseShippingAsBilling
  • hasError
  • hasOrder
  • isIdle
  • isBeforeProcessing
  • isProcessing
  • isAfterProcessing
  • isComplete
  • isCalculating
  • prefersCollection
• Actions
  • setPrefersCollection

Overview

The Checkout Store provides a collection of selectors to access and manage data during the checkout process. These selectors enable developers to fetch key details such as customer information, order status, and other checkout-related data.

Usage

To utilize this store you will import the CHECKOUT_STORE_KEY in any module referencing it. Assuming @woocommerce/block-data is registered as an external pointing to wc.wcBlocksData you can import the key via:

const { CHECKOUT_STORE_KEY } = window.wc.wcBlocksData;

Selectors

getCustomerId

Returns the WordPress user ID of the customer whose order is currently processed by the Checkout block.

Returns

• number: The WordPress user ID of the customer.

Example

const store = select( CHECKOUT_STORE_KEY );
const customerId = store.getCustomerId();

getOrderId

Returns the WooCommerce order ID of the order that is currently being processed by the Checkout block.

Returns

• number: The WooCommerce order ID.

Example

const store = select( CHECKOUT_STORE_KEY );
const orderId = store.getOrderId();

getOrderNotes

Returns the order notes.

Returns

• string: The order notes.

Example

const store = select( CHECKOUT_STORE_KEY );
const orderNotes = store.getOrderNotes();

getRedirectUrl

Returns the URL to redirect to after checkout is complete.

Returns

• string: The URL to redirect to.

Example

const store = select( CHECKOUT_STORE_KEY );
const redirectUrl = store.getRedirectUrl();

getExtensionData

Returns the extra data registered by extensions.

Returns

• object: The extra data registered by extensions.

{
    [ extensionNamespace ]: {
        [ key ]: value,
    },
}

Example

const store = select( CHECKOUT_STORE_KEY );
const extensionData = store.getExtensionData();

getCheckoutStatus

Returns the current status of the checkout process.

Returns

• string: The current status of the checkout process. Possible values are: pristine, before-processing, processing, after-processing, complete, idle.

Example

const store = select( CHECKOUT_STORE_KEY );
const checkoutStatus = store.getCheckoutStatus();

getShouldCreateAccount

Returns true if the shopper has opted to create an account with their order.

Returns

• boolean: True if the shopper has opted to create an account with their order.

Example

const store = select( CHECKOUT_STORE_KEY );
const shouldCreateAccount = store.getShouldCreateAccount();

getUseShippingAsBilling

Returns true if the shopper has opted to use their shipping address as their billing address.

Returns

• boolean: True if the shipping address should be used as the billing address.

Example

const store = select( CHECKOUT_STORE_KEY );
const useShippingAsBilling = store.getUseShippingAsBilling();

hasError

Returns true if an error occurred, and false otherwise.

Returns

• boolean: True if an error occurred.

Example

const store = select( CHECKOUT_STORE_KEY );
const hasError = store.hasError();

hasOrder

Returns true if a draft order had been created, and false otherwise.

Returns

• boolean: True if a draft order had been created.

Example

const store = select( CHECKOUT_STORE_KEY );
const hasOrder = store.hasOrder();

isIdle

When the checkout status is IDLE this flag is true. Checkout will be this status after any change to checkout state after the block is loaded. It will also be this status when retrying a purchase is possible after processing happens with an error.

Returns

• boolean: True if the checkout has had some activity, but is currently waiting for user input.

Example

const store = select( CHECKOUT_STORE_KEY );
const isIdle = store.isIdle();

isBeforeProcessing

When the checkout status is BEFORE_PROCESSING this flag is true. Checkout will be this status when the user submits checkout for processing.

Returns

• boolean: True if an order is about to be processed.

Example

const store = select( CHECKOUT_STORE_KEY );
const isBeforeProcessing = store.isBeforeProcessing();

isProcessing

When the checkout status is PROCESSING this flag is true. Checkout will be this status when all the observers on the event emitted with the BEFORE_PROCESSING status are completed without error. It is during this status that the block will be sending a request to the server on the checkout endpoint for processing the order.

Returns

• boolean: True if the checkout is processing.

Example

const store = select( CHECKOUT_STORE_KEY );
const isProcessing = store.isProcessing();

isAfterProcessing

When the checkout status is AFTER_PROCESSING this flag is true. Checkout will have this status after the the block receives the response from the server side processing request.

Returns

• boolean: True if an order had just been processed.

Example

const store = select( CHECKOUT_STORE_KEY );
const isAfterProcessing = store.isAfterProcessing();

isComplete

When the checkout status is COMPLETE this flag is true. Checkout will have this status after all observers on the events emitted during the AFTER_PROCESSING status are completed successfully. When checkout is at this status, the shopper's browser will be redirected to the value of redirectUrl at that point (usually the order-received route).

Returns

• boolean: True if the order is complete.

Example

const store = select( CHECKOUT_STORE_KEY );
const isComplete = store.isComplete();

isCalculating

This is true when the total is being re-calculated for the order. There are numerous things that might trigger a recalculation of the total: coupons being added or removed, shipping rates updated, shipping rate selected etc. This flag consolidates all activity that might be occurring (including requests to the server that potentially affect calculation of totals). So instead of having to check each of those individual states you can reliably just check if this boolean is true (calculating) or false (not calculating).

Returns

• boolean: True if there is an in-flight request to update any values.

Example

const store = select( CHECKOUT_STORE_KEY );
const isCalculating = store.isCalculating();

prefersCollection

Returns true if the customer prefers to collect their order, and false otherwise.

Returns

• prefersCollection boolean: True if the shopper prefers to collect their order.

Example

const store = select( CHECKOUT_STORE_KEY );
const prefersCollection = store.prefersCollection();

Actions

setPrefersCollection

Sets the prefersCollection flag to true or false.

Parameters

• prefersCollection boolean: True if the shopper prefers to collect their order.

Example

const store = dispatch( CHECKOUT_STORE_KEY );
store.setPrefersCollection( true );

---

We're hiring! Come work with us!

🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.