--- api_version: 2023-07 api_name: checkout-ui-extensions source_url: html: https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks md: https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks.md --- # React Hooks ## Attributes [use​Apply​Attribute​Change](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useapplyattributechange) [Returns a function to mutate the `attributes` property of the checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useapplyattributechange) [use​Attributes](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useattributes) [Returns the proposed `attributes` applied to the checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useattributes) [use​Attribute​Values](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useattributevalues) [Returns the values for the specified `attributes` applied to the checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useattributevalues) ## Buyer Identity [use​Apply​Shipping​Address​Change](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/useapplyshippingaddresschange) [Returns a function to mutate the `shippingAddress` property of checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/useapplyshippingaddresschange) [use​Customer](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/usecustomer) [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.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/usecustomer) [use​Email](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/useemail) [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.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/useemail) [use​Phone](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/usephone) [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.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/usephone) [use​Purchasing​Company](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/usepurchasingcompany) [Provides information about the company and its location that the business customer is purchasing on behalf of during a B2B checkout. It includes details that can be utilized to identify both the company and its corresponding location to which the business customer belongs. The value is `undefined` if a business customer isn't logged in. This function throws an error if the app doesn't have access to customer data.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/usepurchasingcompany) [use​Shipping​Address](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/useshippingaddress) [Returns the proposed `shippingAddress` applied to the checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/useshippingaddress) ## Buyer Journey [use​Buyer​Journey](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-journey/usebuyerjourney) [Returns the `buyerJourney` details on buyer progression in checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-journey/usebuyerjourney) [use​Buyer​Journey​Completed](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-journey/usebuyerjourneycompleted) [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.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-journey/usebuyerjourneycompleted) [use​Buyer​Journey​Intercept](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-journey/usebuyerjourneyintercept) [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.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-journey/usebuyerjourneyintercept) ## Cart [use​Apply​Cart​Lines​Change](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/useapplycartlineschange) [Returns a function to mutate the `lines` property of checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/useapplycartlineschange) [use​Cart​Lines](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usecartlines) [Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usecartlines) [use​Target](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usetarget) [Returns the cart line the extension is attached to. This hook can only be used by extensions in the `purchase.cart-line-item.line-components.render`, `purchase.checkout.cart-line-item.render-after`, `purchase.thank-you.cart-line-item.render-after`, and `customer-account.order-status.cart-line-item.render-after` extension targets. Until version `2023-04`, this hook returned a `PresentmentCartLine` object.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usetarget) [use​Total​Amount](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usetotalamount) [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.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usetotalamount) ## Delivery [use​Delivery​Group](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/delivery/usedeliverygroup) [Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/delivery/usedeliverygroup) [use​Delivery​Groups](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/delivery/usedeliverygroups) [Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/delivery/usedeliverygroups) ## Localization [use​Currency](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/usecurrency) [Returns the currency of the checkout, and automatically re-renders your component if the currency changes.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/usecurrency) [use​Extension​Language](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/useextensionlanguage) [Returns the buyer's language, as supported by the extension.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/useextensionlanguage) [use​Language](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/uselanguage) [Returns the current language of the checkout, and automatically re-renders your component if the language changes.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/uselanguage) [use​Localization​Country](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/uselocalizationcountry) [Returns the country of the checkout, and automatically re-renders your component if the country changes.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/uselocalizationcountry) [use​Timezone](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/usetimezone) [Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/usetimezone) [use​Translate](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/usetranslate) [Returns the `I18nTranslate` interface used to translate strings.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/usetranslate) ## Metadata [use​Checkout​Settings](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/usecheckoutsettings) [Returns the `checkoutSettings` applied to the checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/usecheckoutsettings) [use​Extension](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextension) [Returns the metadata about the extension.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextension) [use​Extension​Capabilities](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensioncapabilities) [Returns a list of an extension's granted capabilities.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensioncapabilities) [use​Extension​Capability](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensioncapability) [Returns whether or not a given capability of an extension is granted.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensioncapability) [use​Extension​Data](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensiondata) [Returns the metadata about the extension.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensiondata) [use​Extension​Editor](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensioneditor) [Returns information about the editor where the extension is being rendered.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensioneditor) [use​Shop](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useshop) [Returns the `Shop` where the checkout is taking place.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useshop) ## Metafields [use​Apply​Metafields​Change](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/useapplymetafieldschange) [Returns a function to mutate the `metafields` property of the checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/useapplymetafieldschange) [use​App​Metafields](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/useappmetafields) [Returns the metafields configured with `shopify.extension.toml`.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/useappmetafields) [use​Metafield](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/usemetafield) [Returns a single filtered `Metafield` or `undefined`.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/usemetafield) [use​Metafields](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/usemetafields) [Returns the current array of `metafields` applied to the checkout. You can optionally filter the list.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/usemetafields) ## Notes [use​Apply​Note​Change](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/notes/useapplynotechange) [Returns a function to mutate the `note` property of the checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/notes/useapplynotechange) [use​Note](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/notes/usenote) [Returns the proposed `note` applied to the checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/notes/usenote) ## Orders [use​Order](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/orders/useorder) [Returns the order information that's available post-checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/orders/useorder) ## Payments [use​Available​Payment​Options](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/payments/useavailablepaymentoptions) [Returns all available payment options.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/payments/useavailablepaymentoptions) [use​Selected​Payment​Options](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/payments/useselectedpaymentoptions) [Returns payment options selected by the buyer.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/payments/useselectedpaymentoptions) ## Reductions [use​Applied​Gift​Cards](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/useappliedgiftcards) [Returns the current gift cards applied to the cart, and automatically re-renders your component if gift cards are added or removed.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/useappliedgiftcards) [use​Apply​Discount​Code​Change](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/useapplydiscountcodechange) [Returns a function to add or remove discount codes.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/useapplydiscountcodechange) [use​Apply​Gift​Card​Change](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/useapplygiftcardchange) [Returns a function to add or remove gift cards.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/useapplygiftcardchange) [use​Discount​Allocations](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/usediscountallocations) [Returns the current discount allocations applied to the cart, and automatically re-renders your component if discount allocations changed.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/usediscountallocations) [use​Discount​Codes](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/usediscountcodes) [Returns the current discount codes applied to the cart, and automatically re-renders your component if discount codes are added or removed.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/usediscountcodes) ## Sessions [use​Session​Token](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/sessions/usesessiontoken) [Provides access to session tokens, which can be used to verify token claims on your app's server.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/sessions/usesessiontoken) ## Storage [use​Settings](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/storage/usesettings) [Returns the setting values defined by the merchant for the extension.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/storage/usesettings) [use​Storage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/storage/usestorage) [Returns the key-value `Storage` interface for the extension target.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/storage/usestorage) ## Utilities [use​Api](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/utilities/useapi) [Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the CartLineDetailsApi object. Other targets may only have access to the StandardApi object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the ExtensionTargets type.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/utilities/useapi) [use​Extension​Api](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/utilities/useextensionapi) [Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the CartLineDetailsApi object. Other targets may only have access to the StandardApi object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the ExtensionTargets type.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/utilities/useextensionapi) [use​Subscription](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/utilities/usesubscription) [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.](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/utilities/usesubscription)