React Hooks
Attributes
Buyer Identity
use
Returns the current Customer. The value is undefined if the buyer isn't a known customer for this shop or if they haven't logged in yet.
use
Returns the email address of the buyer that is interacting with the cart.
The value is undefined if the app does not have access to customer data.
use
Returns the phone number of the buyer that is interacting with the cart.
The value is undefined if the app does not have access to customer data.
use
Returns the proposed applied to the checkout.
Buyer Journey
use
Returns the details on buyer progression in checkout.
use
Returns true if the buyer completed submitting their order. For example, when viewing the order status page after submitting payment, the buyer will have completed their order.
use
Installs a function for intercepting and preventing progress on checkout. To block checkout progress, you must set the block_progress capability in your extension's configuration. If you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension.
Cart
use
Returns a function to mutate the lines property of checkout.
use
Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated.
use
Returns the cart line the extension is attached to. This is only applicable to the extension point.
use
Returns a Money value representing the minimum a buyer can expect to pay at the current
step of checkout. This value excludes amounts yet to be negotiated. For example,
the information step might not have delivery costs calculated.
Localization
use
Returns the currency of the checkout, and automatically re-renders your component if the currency changes.
use
Returns the buyer's language, as supported by the extension.
use
Returns the current language of the checkout, and automatically re-renders your component if the language changes.
use
Returns the country of the checkout, and automatically re-renders your component if the country changes.
use
Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes.
use
Returns the interface used to translate strings.
Metadata
use
Returns a list of an extension's granted capabilities.
use
Returns whether or not a given capability of an extension is granted.
use
Returns the metadata about the extension.
use
Returns information about the editor where the extension is being rendered.
use
Returns the Shop where the checkout is taking place.
Metafields
use
Returns a function to mutate the metafields property of the checkout.
use
Returns the metafields configured with shopify.ui.extension.toml.
use
Returns a single filtered Metafield or undefined.
use
Returns the current array of metafields applied to the checkout.
You can optionally filter the list.
Notes
Payments
Reductions
use
Returns the current gift cards applied to the cart, and automatically re-renders your component if gift cards are added or removed.
use
Returns a function to add or remove discount codes.
use
Returns a function to add or remove gift cards.
use
Returns the current discount allocations applied to the cart, and automatically re-renders your component if discount allocations changed.
use
Returns the current discount codes applied to the cart, and automatically re-renders your component if discount codes are added or removed.
Storage
Utilities
use
Returns the full API object that was passed in to your extension when it was created.
Depending on the extension point, this object can contain different properties. For example, the extension point will return the CartLineDetailsApi object.
Whereas others return the StandardApi object. For reference, see ExtensionPoints to determine what API object will be returned by your extension point.
use
Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout.