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.

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 checkoutStore StoreDescriptor in any module referencing it. Assuming @woocommerce/block-data is registered as an external pointing to wc.wcBlocksData you can import the StoreDescriptor via:

const { checkoutStore } = '@woocommerce/block-data'

If it is not you can import it via:

const { checkoutStore } = 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( checkoutStore );
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( checkoutStore );
const orderId = store.getOrderId();

getOrderNotes

Returns the order notes.

Returns

• string: The order notes.

Example

const store = select( checkoutStore );
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( checkoutStore );
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( checkoutStore );
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( checkoutStore );
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( checkoutStore );
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( checkoutStore );
const useShippingAsBilling = store.getUseShippingAsBilling();

getEditingBillingAddress

Returns true if the billing address is being edited.

Returns

• boolean: True if the billing address is being edited.

Example

const store = select( checkoutStore );
const editingBillingAddress = store.getEditingBillingAddress();

getEditingShippingAddress

Returns true if the shipping address is being edited.

Returns

• boolean: True if the shipping address is being edited.

Example

const store = select( checkoutStore );
const editingShippingAddress = store.getEditingShippingAddress();

hasError

Returns true if an error occurred, and false otherwise.

Returns

• boolean: True if an error occurred.

Example

const store = select( checkoutStore );
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( checkoutStore );
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( checkoutStore );
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( checkoutStore );
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( checkoutStore );
const isProcessing = store.isProcessing();

isAfterProcessing

When the checkout status is AFTER_PROCESSING this flag is true. Checkout will have this status after 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( checkoutStore );
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( checkoutStore );
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( checkoutStore );
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( checkoutStore );
const prefersCollection = store.prefersCollection();

getRegisteredAutocompleteProviders

Returns a list of registered address autocomplete provider IDs.

Returns

• addressAutocompleteProviders string[]: A list of registered address autocomplete provider IDs.

Example

const store = select( checkoutStore );
const addressAutocompleteProviders = store.getRegisteredAutocompleteProviders();

getActiveAutocompleteProvider

Returns the active address autocomplete provider for a given address type.

Parameters

• type 'billing' | 'shipping': The address type.

Returns

• activeAddressAutocompleteProvider string: The currently active address autocomplete provider for the passed address type.

Example

const store = select( checkoutStore );
const activeBillingProvider = store.getActiveAutocompleteProvider( 'billing' );

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( checkoutStore );
store.setPrefersCollection( true );

setEditingBillingAddress

Set the billing address to editing state or collapsed state. Note that if the address has invalid fields, it will not be set to collapsed state.

Parameters

• isEditing boolean: True to set the billing address to editing state, false to set it to collapsed state.

Example

const store = dispatch( checkoutStore );
store.setEditingBillingAddress( true );

setEditingShippingAddress

Set the shipping address to editing state or collapsed state. Note that if the address has invalid fields, it will not be set to collapsed state.

Parameters

• isEditing boolean: True to set the shipping address to editing state, false to set it to collapsed state.

Example

const store = dispatch( checkoutStore );
store.setEditingShippingAddress( true );

addAddressAutocompleteProvider

Adds an address autocomplete provider

Parameters

• providerId string: The provider's name. Note, providers should be registered with wc.addressAutocomplete.registerAddressAutocompleteProvider.

Example

const store = dispatch( checkoutStore );
store.addAddressAutocompleteProvider( 'my-address-provider' );

setActiveAddressAutocompleteProvider

Adds an address autocomplete provider

Parameters

• providerId string: Sets the active autocomplete provider's id. Note, providers should be registered with wc.addressAutocomplete.registerAddressAutocompleteProvider.
• addressType 'billing' | 'shipping': Which address type this is the active provider for. Since billing and shipping can be in different countries, there may be a different provider for each country.

Example

const store = dispatch( checkoutStore );
store.setActiveAddressAutocompleteProvider( 'my-address-provider', 'billing' );