# StandardApi
This base API object is provided to all extension targets.
### How extensions work
```jsx
import {
BlockStack,
reactExtension,
Text,
useApi,
} from '@shopify/ui-extensions-react/checkout';
// 1. Choose an extension target
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
// 2. Use the extension API to gather context from the checkout and shop
const {cost, shop} = useApi();
// 3. Render a UI
return (
<BlockStack>
<Text>Shop name: {shop.name}</Text>
<Text>cost: {cost.totalAmount}</Text>
</BlockStack>
);
}
```
```js
import {
BlockStack,
Text,
extension,
} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root, {shop, cost}) => {
root.appendChild(
root.createComponent(
BlockStack,
undefined,
[
root.createComponent(
Text,
undefined,
`Shop name: ${shop.name}`,
),
root.createComponent(
Text,
undefined,
`Cost: ${cost.totalAmount}`,
),
],
),
);
},
);
```
## Properties
See [examples](#examples) for more information on how to use the API.
### StandardApi
### analytics
Methods for interacting with [Web Pixels](/docs/apps/marketing), such as emitting an event.
### appliedGiftCards
Gift Cards that have been applied to the checkout.
### appMetafields
The metafields requested in the
[`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration)
file. These metafields are updated when there's a change in the merchandise items
being purchased by the customer.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
> Tip:
> Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*
### attributes
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
### availablePaymentOptions
All available payment options.
### buyerIdentity
Information about the buyer that is interacting with the checkout.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### buyerJourney
Provides details on the buyer's progression through the checkout.
See [buyer journey](/docs/api/checkout-ui-extensions/apis/standardapi#example-buyer-journey)
examples for more information.
### checkoutSettings
Settings applied to the buyer's checkout.
### cost
Details on the costs the buyer will pay for this checkout.
### deliveryGroups
A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
### discountCodes
A list of discount codes currently applied to the checkout.
### discountAllocations
Discounts that have been applied to the entire cart.
### extension
Meta information about the extension.
### extensionPoint
The identifier that specifies where in Shopify’s UI your code is being
injected. This will be one of the targets you have included in your
extension’s configuration file.
### i18n
Utilities for translating content and formatting values according to the current
[`localization`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization)
of the checkout.
See [localization examples](/docs/api/checkout-ui-extensions/apis/standardapi#example-localization)
for more information.
### lines
A list of lines containing information about the items the customer intends to purchase.
### localization
Details about the location, language, and currency of the buyer. For utilities to easily
format and translate content based on these details, you can use the
[`i18n`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-i18n)
object instead.
### metafields
The metafields that apply to the current checkout.
Metafields are stored locally on the client and are applied to the order object after the checkout completes.
These metafields are shared by all extensions running on checkout, and
persist for as long as the customer is working on this checkout.
Once the order is created, you can query these metafields using the
[GraphQL Admin API](/docs/admin-api/graphql/reference/orders/order#metafield-2021-01)
### note
A note left by the customer to the merchant, either in their cart or during checkout.
### query
Used to query the Storefront GraphQL API with a prefetched token.
See [storefront api access examples](/docs/api/checkout-ui-extensions/apis/standardapi#example-storefront-api-access) for more information.
### selectedPaymentOptions
Payment options selected by the buyer.
### sessionToken
Provides access to session tokens, which can be used to verify token claims on your app's server.
See [session token examples](/docs/api/checkout-ui-extensions/apis/standardapi#example-session-token) for more information.
### settings
The settings matching the settings definition written in the
[`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration) file.
See [settings examples](/docs/api/checkout-ui-extensions/apis/standardapi#example-settings) for more information.
> Note: When an extension is being installed in the editor, the settings will be empty until
a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.
### shippingAddress
The proposed buyer shipping address. During the information step, the address
updates when the field is committed (on change) rather than every keystroke.
An address value is only present if delivery is required. Otherwise, the
subscribable value is undefined.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### shop
Shop where the checkout is taking place.
### storage
Key-value storage for the extension target.
### ui
Methods to interact with the extension's UI.
### version
The renderer version being used for the extension.
### Analytics
### publish
Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing).
### AppliedGiftCard
### lastCharacters
The last four characters of the applied gift card's code.
### amountUsed
The amount of the applied gift card that will be used when the checkout is completed.
### balance
The current balance of the applied gift card prior to checkout completion.
### Money
### amount
The price amount.
### currencyCode
The ISO 4217 format for the currency.
### CurrencyCode
'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'
### AppMetafieldEntry
A metafield associated with the shop or a resource on the checkout.
### target
The target that is associated to the metadata.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.
### metafield
The metadata information.
### AppMetafieldEntryTarget
The metafield owner.
### type
The type of the metafield owner.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.
### id
The numeric owner ID that is associated with the metafield.
### AppMetafield
Represents a custom metadata attached to a resource.
### key
The key name of a metafield.
### namespace
The namespace for a metafield.
### value
The value of a metafield.
### valueType
The metafield’s information type.
### type
The metafield's type name.
### Attribute
### key
The key for the attribute.
### value
The value for the attribute.
### PaymentOption
A payment option presented to the buyer.
### type
The type of the payment option.
Shops can be configured to support many different payment options. Some options are only available to buyers in specific regions.
| Type | Description |
|---|---|
| `creditCard` | A vaulted or manually entered credit card. |
| `deferred` | A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. |
| `local` | A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market |
| `manualPayment` | A manual payment option such as an in-person retail transaction. |
| `offsite` | A payment processed outside of Shopify's checkout, excluding integrated wallets. |
| `other` | Another type of payment not defined here. |
| `paymentOnDelivery` | A payment that will be collected on delivery. |
| `redeemable` | A redeemable payment option such as a gift card or store credit. |
| `wallet` | An integrated wallet such as PayPal, Google Pay, Apple Pay, etc. |
| `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. |
### handle
The unique handle for the payment option.
This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop.
### BuyerIdentity
### customer
The buyer's customer account. The value is undefined if the buyer isn’t a
known customer for this shop or if they haven't logged in yet.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### email
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.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### phone
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.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### purchasingCompany
Provides details of the company and the company location that the business customer is purchasing on behalf of.
This includes information that can be used to identify the company and the company location that the business
customer belongs to.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### Customer
Information about a customer who has previously purchased from this shop.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### id
Customer ID.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### email
The email of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### phone
The phone number of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### fullName
The full name of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### firstName
The first name of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### lastName
The last name of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### image
The image associated with the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### acceptsMarketing
Defines if the customer accepts marketing activities.
### storeCreditAccounts
The Store Credit Accounts owned by the customer and usable during the checkout process.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### ImageDetails
### url
The image URL.
### altText
The alternative text for the image.
### StoreCreditAccount
Information about a Store Credit Account.
### id
A globally-unique identifier.
### balance
The current balance of the Store Credit Account.
### PurchasingCompany
Information about a company that the business customer is purchasing on behalf of.
### company
Includes information of the company that the business customer is purchasing on behalf of.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### location
Includes information of the company location that the business customer is purchasing on behalf of.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### Company
### id
The company ID.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### name
The name of the company.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### externalId
The external ID of the company that can be set by the merchant.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### CompanyLocation
### id
The company location ID.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### name
The name of the company location.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### externalId
The external ID of the company location that can be set by the merchant.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### BuyerJourney
Provides details on the buyer's progression through the checkout.
### intercept
Installs a function for intercepting and preventing progress on checkout.
This returns a promise that resolves to a teardown function. Calling the
teardown function will remove the interceptor.
To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress)
capability in your extension's configuration.
### completed
This subscribable value will be 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.
### Interceptor
A function for intercepting and preventing navigation on checkout. You can block
navigation by returning an object with
`{behavior: 'block', reason: InvalidResultReason.InvalidExtensionState, errors?: ValidationErrors[]}`.
If you do, then you're expected to also update some part of your UI to reflect the reason why navigation
was blocked, either by targeting checkout UI fields, passing errors to the page level or rendering the errors in your extension.
(
interceptorProps: InterceptorProps,
) => InterceptorRequest | Promise<InterceptorRequest>
### InterceptorProps
### canBlockProgress
Whether the interceptor has the capability to block a buyer's progress through
checkout. This ability might be granted by a merchant in differing checkout contexts.
### InterceptorRequest
InterceptorRequestAllow | InterceptorRequestBlock
### InterceptorRequestAllow
### behavior
Indicates that the interceptor will allow the buyer's journey to continue.
### perform
This callback is called when all interceptors finish. We recommend
setting errors or reasons for blocking at this stage, so that all the errors in
the UI show up at once.
### InterceptorResult
InterceptorResultAllow | InterceptorResultBlock
### InterceptorResultAllow
### behavior
Indicates that the buyer was allowed to progress through checkout.
### InterceptorResultBlock
### behavior
Indicates that some part of the checkout UI intercepted and prevented
the buyer’s progress. The buyer typically needs to take some action
to resolve this issue and to move on to the next step.
### InterceptorRequestBlock
### behavior
Indicates that the interceptor will block the buyer's journey from continuing.
### reason
The reason for blocking the interceptor request. This value isn't presented to
the buyer, so it doesn't need to be localized. The value is used only for Shopify’s
own internal debugging and metrics.
### errors
Used to pass errors to the checkout UI, outside your extension's UI boundaries.
### perform
This callback is called when all interceptors finish. We recommend
setting errors or reasons for blocking at this stage, so that all the errors in
the UI show up at once.
### ValidationError
### message
Error message to be displayed to the buyer.
### target
The checkout UI field that the error is associated with.
Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode`
See the [supported targets](/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets)
for more information.
### CheckoutSettings
Settings describing the behavior of the buyer's checkout.
### orderSubmission
The type of order that will be created once the buyer completes checkout.
### paymentTermsTemplate
Represents the merchant configured payment terms.
### shippingAddress
Settings describing the behavior of the shipping address.
### PaymentTermsTemplate
Represents the payment terms template object.
### id
A globally-unique ID.
### name
The name of the payment terms translated to the buyer's current language. See [localization.language](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization).
### dueDate
The due date for net payment terms as a ISO 8601 formatted string `YYYY-MM-DDTHH:mm:ss.sssZ`.
### dueInDays
The number of days between the issued date and due date if using net payment terms.
### ShippingAddressSettings
Settings describing the behavior of the shipping address.
### isEditable
Describes whether the buyer can ship to any address during checkout.
### CartCost
### totalAmount
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.
### DeliveryGroup
Represents the delivery information and options available for one or
more cart lines.
### targetedCartLines
The cart line references associated to the delivery group.
### deliveryOptions
The delivery options available for the delivery group.
### selectedDeliveryOption
The selected delivery option for the delivery group.
### groupType
The type of the delivery group.
### isDeliveryRequired
Whether delivery is required for the delivery group.
### CartLineReference
Represents a reference to a cart line.
### id
The unique identifier of the referenced cart line.
### DeliveryOption
Represents a base interface for a single delivery option.
### handle
The unique identifier of the delivery option.
### title
The title of the delivery option.
### description
The description of the delivery option.
### DeliveryOptionReference
Represents a reference to a delivery option.
### handle
The unique identifier of the referenced delivery option.
### DeliveryGroupType
The possible types of a delivery group.
'oneTimePurchase' | 'subscription'
### CartDiscountCode
### code
The code for the discount
### CartDiscountAllocation
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation
### CartCodeDiscountAllocation
### code
The code for the discount
### type
The type of the code discount
### discountedAmount
The money amount that has been discounted from the order
### CartAutomaticDiscountAllocation
### title
The title of the automatic discount
### type
The type of the automatic discount
### discountedAmount
The money amount that has been discounted from the order
### CartCustomDiscountAllocation
### title
The title of the custom discount
### type
The type of the custom discount
### discountedAmount
The money amount that has been discounted from the order
### Extension
Meta information about an extension target.
### apiVersion
The API version that was set in the extension config file.
### capabilities
The allowed capabilities of the extension, defined
in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/configuration) file.
* [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
* [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
* [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
### editor
Information about the editor where the extension is being rendered.
The value is undefined if the extension is not rendering in an editor.
### rendered
Whether your extension is currently rendered to the screen.
Shopify might render your extension before it's visible in the UI,
typically to pre-render extensions that will appear on a later step of the
checkout.
Your extension might also continue to run after the buyer has navigated away
from where it was rendered. The extension continues running so that
your extension is immediately available to render if the buyer navigates back.
### scriptUrl
The URL to the script that started the extension target.
### target
The identifier that specifies where in Shopify’s UI your code is being
injected. This will be one of the targets you have included in your
extension’s configuration file.
### version
The published version of the running extension target.
For unpublished extensions, the value is `undefined`.
### ApiVersion
Union of supported API versions
'2023-04' | '2023-07' | 'unstable'
### Capability
The capabilities an extension has access to.
* [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
* [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
* [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
'api_access' | 'network_access' | 'block_progress'
### Editor
### type
Indicates whether the extension is rendering in the checkout editor.
### I18n
### formatNumber
Returns a localized number.
This function behaves like the standard `Intl.NumberFormat()`
with a style of `decimal` applied. It uses the buyer's locale by default.
### formatCurrency
Returns a localized currency value.
This function behaves like the standard `Intl.NumberFormat()`
with a style of `currency` applied. It uses the buyer's locale by default.
### formatDate
Returns a localized date value.
This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
the buyer's locale by default. Formatting options can be passed in as
options.
### translate
Returns translated content in the buyer's locale,
as supported by the extension.
- `options.count` is a special numeric value used in pluralization.
- The other option keys and values are treated as replacements for interpolation.
- If the replacements are all primitives, then `translate()` returns a single string.
- If replacements contain UI components, then `translate()` returns an array of elements.
### I18nTranslate
This returns a translated string matching a key in a locale file.
export interface I18nTranslate {
<ReplacementType = string>(
key: string,
options?: {[placeholderKey: string]: ReplacementType | string | number},
): ReplacementType extends string | number
? string
: (string | ReplacementType)[];
}
### CartLine
### id
These line item IDs are not stable at the moment, they might change after
any operations on the line items. You should always look up for an updated
ID before any call to `applyCartLinesChange` because you'll need the ID to
create a `CartLineChange` object.
### merchandise
The merchandise being purchased.
### quantity
The quantity of the merchandise being purchased.
### cost
The details about the cost components attributed to the cart line.
### attributes
The line item additional custom attributes.
### discountAllocations
Discounts applied to the cart line.
### lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
### Merchandise
### type
### id
A globally-unique identifier.
### title
The product variant’s title.
### subtitle
The product variant's subtitle.
### image
Image associated with the product variant. This field falls back to the product
image if no image is available.
### selectedOptions
List of product options applied to the variant.
### product
The product object that the product variant belongs to.
### requiresShipping
Whether or not the product requires shipping.
### sellingPlan
The selling plan associated with the merchandise.
### SelectedOption
### name
The name of the merchandise option.
### value
The value of the merchandise option.
### Product
### id
A globally-unique identifier.
### vendor
The product’s vendor name.
### productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
### SellingPlan
### id
A globally-unique identifier.
### CartLineCost
### totalAmount
The total amount after reductions the buyer can expect to pay that is directly attributable to a single
cart line.
### CartBundleLineComponent
### type
### id
A unique identifier for the bundle line component.
This ID is not stable. If an operation updates the line items in any way, all IDs could change.
### merchandise
The merchandise of this bundle line component.
### quantity
The quantity of merchandise being purchased.
### cost
The cost attributed to this bundle line component.
### attributes
Additional custom attributes for the bundle line component.
### Localization
### currency
The currency that the buyer sees for money amounts in the checkout.
### timezone
The buyer’s time zone.
### language
The language the buyer sees in the checkout.
### extensionLanguage
This is the buyer's language, as supported by the extension.
If the buyer's actual language is not supported by the extension,
this is the fallback locale used for translations.
For example, if the buyer's language is 'fr-CA' but your extension
only supports translations for 'fr', then the `isoCode` for this
language is 'fr'. If your extension does not provide french
translations at all, this value is the default locale for your
extension (that is, the one matching your .default.json file).
### country
The country context of the checkout. This value carries over from the
context of the cart, where it was used to contextualize the storefront
experience. It will update if the buyer changes the country of their
shipping address. The value is undefined if unknown.
### market
The [market](/docs/apps/markets) context of the
checkout. This value carries over from the context of the cart, where it
was used to contextualize the storefront experience. It will update if the
buyer changes the country of their shipping address. The value is undefined
if unknown.
### Currency
### isoCode
The ISO-4217 code for this currency.
### Timezone
'Africa/Abidjan' | 'Africa/Algiers' | 'Africa/Bissau' | 'Africa/Cairo' | 'Africa/Casablanca' | 'Africa/Ceuta' | 'Africa/El_Aaiun' | 'Africa/Johannesburg' | 'Africa/Juba' | 'Africa/Khartoum' | 'Africa/Lagos' | 'Africa/Maputo' | 'Africa/Monrovia' | 'Africa/Nairobi' | 'Africa/Ndjamena' | 'Africa/Sao_Tome' | 'Africa/Tripoli' | 'Africa/Tunis' | 'Africa/Windhoek' | 'America/Adak' | 'America/Anchorage' | 'America/Araguaina' | 'America/Argentina/Buenos_Aires' | 'America/Argentina/Catamarca' | 'America/Argentina/Cordoba' | 'America/Argentina/Jujuy' | 'America/Argentina/La_Rioja' | 'America/Argentina/Mendoza' | 'America/Argentina/Rio_Gallegos' | 'America/Argentina/Salta' | 'America/Argentina/San_Juan' | 'America/Argentina/San_Luis' | 'America/Argentina/Tucuman' | 'America/Argentina/Ushuaia' | 'America/Asuncion' | 'America/Bahia' | 'America/Bahia_Banderas' | 'America/Barbados' | 'America/Belem' | 'America/Belize' | 'America/Boa_Vista' | 'America/Bogota' | 'America/Boise' | 'America/Cambridge_Bay' | 'America/Campo_Grande' | 'America/Cancun' | 'America/Caracas' | 'America/Cayenne' | 'America/Chicago' | 'America/Chihuahua' | 'America/Costa_Rica' | 'America/Cuiaba' | 'America/Danmarkshavn' | 'America/Dawson' | 'America/Dawson_Creek' | 'America/Denver' | 'America/Detroit' | 'America/Edmonton' | 'America/Eirunepe' | 'America/El_Salvador' | 'America/Fort_Nelson' | 'America/Fortaleza' | 'America/Glace_Bay' | 'America/Goose_Bay' | 'America/Grand_Turk' | 'America/Guatemala' | 'America/Guayaquil' | 'America/Guyana' | 'America/Halifax' | 'America/Havana' | 'America/Hermosillo' | 'America/Indiana/Indianapolis' | 'America/Indiana/Knox' | 'America/Indiana/Marengo' | 'America/Indiana/Petersburg' | 'America/Indiana/Tell_City' | 'America/Indiana/Vevay' | 'America/Indiana/Vincennes' | 'America/Indiana/Winamac' | 'America/Inuvik' | 'America/Iqaluit' | 'America/Jamaica' | 'America/Juneau' | 'America/Kentucky/Louisville' | 'America/Kentucky/Monticello' | 'America/La_Paz' | 'America/Lima' | 'America/Los_Angeles' | 'America/Maceio' | 'America/Managua' | 'America/Manaus' | 'America/Martinique' | 'America/Matamoros' | 'America/Mazatlan' | 'America/Menominee' | 'America/Merida' | 'America/Metlakatla' | 'America/Mexico_City' | 'America/Miquelon' | 'America/Moncton' | 'America/Monterrey' | 'America/Montevideo' | 'America/New_York' | 'America/Nipigon' | 'America/Nome' | 'America/Noronha' | 'America/North_Dakota/Beulah' | 'America/North_Dakota/Center' | 'America/North_Dakota/New_Salem' | 'America/Nuuk' | 'America/Ojinaga' | 'America/Panama' | 'America/Pangnirtung' | 'America/Paramaribo' | 'America/Phoenix' | 'America/Port-au-Prince' | 'America/Porto_Velho' | 'America/Puerto_Rico' | 'America/Punta_Arenas' | 'America/Rainy_River' | 'America/Rankin_Inlet' | 'America/Recife' | 'America/Regina' | 'America/Resolute' | 'America/Rio_Branco' | 'America/Santarem' | 'America/Santiago' | 'America/Santo_Domingo' | 'America/Sao_Paulo' | 'America/Scoresbysund' | 'America/Sitka' | 'America/St_Johns' | 'America/Swift_Current' | 'America/Tegucigalpa' | 'America/Thule' | 'America/Thunder_Bay' | 'America/Tijuana' | 'America/Toronto' | 'America/Vancouver' | 'America/Whitehorse' | 'America/Winnipeg' | 'America/Yakutat' | 'America/Yellowknife' | 'Antarctica/Casey' | 'Antarctica/Davis' | 'Antarctica/Macquarie' | 'Antarctica/Mawson' | 'Antarctica/Palmer' | 'Antarctica/Rothera' | 'Antarctica/Troll' | 'Antarctica/Vostok' | 'Asia/Almaty' | 'Asia/Amman' | 'Asia/Anadyr' | 'Asia/Aqtau' | 'Asia/Aqtobe' | 'Asia/Ashgabat' | 'Asia/Atyrau' | 'Asia/Baghdad' | 'Asia/Baku' | 'Asia/Bangkok' | 'Asia/Barnaul' | 'Asia/Beirut' | 'Asia/Bishkek' | 'Asia/Brunei' | 'Asia/Chita' | 'Asia/Choibalsan' | 'Asia/Colombo' | 'Asia/Damascus' | 'Asia/Dhaka' | 'Asia/Dili' | 'Asia/Dubai' | 'Asia/Dushanbe' | 'Asia/Famagusta' | 'Asia/Gaza' | 'Asia/Hebron' | 'Asia/Ho_Chi_Minh' | 'Asia/Hong_Kong' | 'Asia/Hovd' | 'Asia/Irkutsk' | 'Asia/Jakarta' | 'Asia/Jayapura' | 'Asia/Jerusalem' | 'Asia/Kabul' | 'Asia/Kamchatka' | 'Asia/Karachi' | 'Asia/Kathmandu' | 'Asia/Khandyga' | 'Asia/Kolkata' | 'Asia/Krasnoyarsk' | 'Asia/Kuala_Lumpur' | 'Asia/Kuching' | 'Asia/Macau' | 'Asia/Magadan' | 'Asia/Makassar' | 'Asia/Manila' | 'Asia/Nicosia' | 'Asia/Novokuznetsk' | 'Asia/Novosibirsk' | 'Asia/Omsk' | 'Asia/Oral' | 'Asia/Pontianak' | 'Asia/Pyongyang' | 'Asia/Qatar' | 'Asia/Qostanay' | 'Asia/Qyzylorda' | 'Asia/Riyadh' | 'Asia/Sakhalin' | 'Asia/Samarkand' | 'Asia/Seoul' | 'Asia/Shanghai' | 'Asia/Singapore' | 'Asia/Srednekolymsk' | 'Asia/Taipei' | 'Asia/Tashkent' | 'Asia/Tbilisi' | 'Asia/Tehran' | 'Asia/Thimphu' | 'Asia/Tokyo' | 'Asia/Tomsk' | 'Asia/Ulaanbaatar' | 'Asia/Urumqi' | 'Asia/Ust-Nera' | 'Asia/Vladivostok' | 'Asia/Yakutsk' | 'Asia/Yangon' | 'Asia/Yekaterinburg' | 'Asia/Yerevan' | 'Atlantic/Azores' | 'Atlantic/Bermuda' | 'Atlantic/Canary' | 'Atlantic/Cape_Verde' | 'Atlantic/Faroe' | 'Atlantic/Madeira' | 'Atlantic/Reykjavik' | 'Atlantic/South_Georgia' | 'Atlantic/Stanley' | 'Australia/Adelaide' | 'Australia/Brisbane' | 'Australia/Broken_Hill' | 'Australia/Darwin' | 'Australia/Eucla' | 'Australia/Hobart' | 'Australia/Lindeman' | 'Australia/Lord_Howe' | 'Australia/Melbourne' | 'Australia/Perth' | 'Australia/Sydney' | 'CET' | 'CST6CDT' | 'EET' | 'EST' | 'EST5EDT' | 'Etc/GMT' | 'Etc/GMT-1' | 'Etc/GMT-10' | 'Etc/GMT-11' | 'Etc/GMT-12' | 'Etc/GMT-13' | 'Etc/GMT-14' | 'Etc/GMT-2' | 'Etc/GMT-3' | 'Etc/GMT-4' | 'Etc/GMT-5' | 'Etc/GMT-6' | 'Etc/GMT-7' | 'Etc/GMT-8' | 'Etc/GMT-9' | 'Etc/GMT+1' | 'Etc/GMT+10' | 'Etc/GMT+11' | 'Etc/GMT+12' | 'Etc/GMT+2' | 'Etc/GMT+3' | 'Etc/GMT+4' | 'Etc/GMT+5' | 'Etc/GMT+6' | 'Etc/GMT+7' | 'Etc/GMT+8' | 'Etc/GMT+9' | 'Etc/UTC' | 'Europe/Amsterdam' | 'Europe/Andorra' | 'Europe/Astrakhan' | 'Europe/Athens' | 'Europe/Belgrade' | 'Europe/Berlin' | 'Europe/Brussels' | 'Europe/Bucharest' | 'Europe/Budapest' | 'Europe/Chisinau' | 'Europe/Copenhagen' | 'Europe/Dublin' | 'Europe/Gibraltar' | 'Europe/Helsinki' | 'Europe/Istanbul' | 'Europe/Kaliningrad' | 'Europe/Kiev' | 'Europe/Kirov' | 'Europe/Lisbon' | 'Europe/London' | 'Europe/Luxembourg' | 'Europe/Madrid' | 'Europe/Malta' | 'Europe/Minsk' | 'Europe/Monaco' | 'Europe/Moscow' | 'Europe/Oslo' | 'Europe/Paris' | 'Europe/Prague' | 'Europe/Riga' | 'Europe/Rome' | 'Europe/Samara' | 'Europe/Saratov' | 'Europe/Simferopol' | 'Europe/Sofia' | 'Europe/Stockholm' | 'Europe/Tallinn' | 'Europe/Tirane' | 'Europe/Ulyanovsk' | 'Europe/Uzhgorod' | 'Europe/Vienna' | 'Europe/Vilnius' | 'Europe/Volgograd' | 'Europe/Warsaw' | 'Europe/Zaporozhye' | 'Europe/Zurich' | 'HST' | 'Indian/Chagos' | 'Indian/Christmas' | 'Indian/Cocos' | 'Indian/Kerguelen' | 'Indian/Mahe' | 'Indian/Maldives' | 'Indian/Mauritius' | 'Indian/Reunion' | 'MET' | 'MST' | 'MST7MDT' | 'Pacific/Apia' | 'Pacific/Auckland' | 'Pacific/Bougainville' | 'Pacific/Chatham' | 'Pacific/Chuuk' | 'Pacific/Easter' | 'Pacific/Efate' | 'Pacific/Fakaofo' | 'Pacific/Fiji' | 'Pacific/Funafuti' | 'Pacific/Galapagos' | 'Pacific/Gambier' | 'Pacific/Guadalcanal' | 'Pacific/Guam' | 'Pacific/Honolulu' | 'Pacific/Kanton' | 'Pacific/Kiritimati' | 'Pacific/Kosrae' | 'Pacific/Kwajalein' | 'Pacific/Majuro' | 'Pacific/Marquesas' | 'Pacific/Nauru' | 'Pacific/Niue' | 'Pacific/Norfolk' | 'Pacific/Noumea' | 'Pacific/Pago_Pago' | 'Pacific/Palau' | 'Pacific/Pitcairn' | 'Pacific/Pohnpei' | 'Pacific/Port_Moresby' | 'Pacific/Rarotonga' | 'Pacific/Tahiti' | 'Pacific/Tarawa' | 'Pacific/Tongatapu' | 'Pacific/Wake' | 'Pacific/Wallis' | 'PST8PDT' | 'WET'
### Language
### isoCode
The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
### Country
### isoCode
The ISO-3166-1 code for this country.
### CountryCode
'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ'
### Market
### id
A globally-unique identifier for a market.
### handle
The human-readable, shop-scoped identifier for the market.
### Metafield
Metadata associated with the checkout.
### key
The name of the metafield. It must be between 3 and 30 characters in
length (inclusive).
### namespace
A container for a set of metafields. You need to define a custom
namespace for your metafields to distinguish them from the metafields
used by other apps. This must be between 2 and 20 characters in length (inclusive).
### value
The information to be stored as metadata.
### valueType
The metafield’s information type.
### StorefrontApiVersion
Union of supported storefront API versions
'2022-04' | '2022-07' | '2022-10' | '2023-01' | '2023-04' | '2023-07' | 'unstable'
### SelectedPaymentOption
A payment option selected by the buyer.
### handle
The unique handle referencing `PaymentOption.handle`.
See [availablePaymentOptions](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-availablepaymentoptions).
### SessionToken
### get
Requests a session token that hasn't expired. You should call this method every
time you need to make a request to your backend in order to get a valid token.
This method will return cached tokens when possible, so you don’t need to worry
about storing these tokens yourself.
### ExtensionSettings
The merchant-defined setting values for the extension.
### [key: string]
### MailingAddress
### name
The buyer's full name.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### firstName
The buyer's first name.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### lastName
The buyer's last name.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### company
The buyer's company name.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### address1
The first line of the buyer's address, including street name and number.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### address2
The second line of the buyer's address, like apartment number, suite, etc.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### city
The buyer's city.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### zip
The buyer's postal or ZIP code.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### countryCode
The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### provinceCode
The buyer's province code, such as state, province, prefecture, or region.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### phone
The buyer's phone number.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
### Shop
### id
The shop ID.
### name
The name of the shop.
### storefrontUrl
The primary storefront URL.
### myshopifyDomain
The shop's myshopify.com domain.
### Storage
A key-value storage object for extension targets.
Stored data is only available to this specific app
at this specific extension target.
The storage backend is implemented with `localStorage` and
should persist across the buyer's checkout session.
However, data persistence isn't guaranteed.
### read
Read and return a stored value by key.
The stored data is deserialized from JSON and returned as
its original primitive.
Returns `null` if no stored data exists.
### write
Write stored data for this key.
The data must be serializable to JSON.
### delete
Delete stored data by key.
### Ui
### overlay
### Version
string
## Related
- [CheckoutApi](/docs/api/checkout-ui-extensions/apis/checkoutapi)
- [OrderStatusApi](/docs/api/checkout-ui-extensions/apis/orderstatusapi)
- [CartLineItemApi](/docs/api/checkout-ui-extensions/apis/cartlineitemapi)
- [PickupPointListApi](/docs/api/checkout-ui-extensions/apis/pickuppointlistapi)
- [PickupLocationListApi](/docs/api/checkout-ui-extensions/apis/pickuplocationlistapi)
- [ShippingOptionItemApi](/docs/api/checkout-ui-extensions/apis/shippingoptionitemapi)
- [ExtensionTargets](/docs/api/checkout-ui-extensions/apis/extensiontargets)
## Examples
This base API object is provided to all extension targets.
### Using the API
### Accessing Properties
```jsx
import {
reactExtension,
Text,
useApi,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {shop} = useApi();
return <Text>Shop name: {shop.name}</Text>;
}
```
```js
import {extension} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root, {shop}) => {
root.appendChild(
root.createText(`Shop name: ${shop.name}`),
);
},
);
```
### Subscribing to changes
```jsx
import {
reactExtension,
Text,
useNote,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const note = useNote();
return <Text>Note: {note}</Text>;
}
```
```js
import {extension} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root, {note}) => {
const text = root.createText('');
note.subscribe((value) => {
if (value) {
text.updateText(value);
}
});
root.appendChild(text);
},
);
```
### Localization
### Translating strings
```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
reactExtension,
Text,
useTranslate,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const translate = useTranslate();
return (
<Text>{translate('welcomeMessage')}</Text>
);
}
```
```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {extension} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root, {i18n}) => {
const welcomeMsg = i18n.translate(
'welcomeMessage',
);
root.appendChild(root.createText(welcomeMsg));
},
);
```
```json
{
"welcomeMessage": "Welcome to our store!"
}
```
### Translating strings with pluralization
```jsx
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
reactExtension,
Banner,
useApi,
useTranslate,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {i18n} = useApi();
const translate = useTranslate();
const points = 10000;
const formattedPoints =
i18n.formatNumber(points);
// Translate the loyalty points message, using pluralization to differentiate messages
const loyaltyPointsMsg = translate(
'loyaltyPoints',
{
count: points,
formattedPoints,
},
);
return <Banner title={loyaltyPointsMsg} />;
}
```
```js
/* See the locales/en.default.json tab for the translation keys and values for this example */
import {
extension,
Banner,
} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root, {i18n}) => {
const points = 10000;
const formattedPoints =
i18n.formatNumber(points);
// Translate the loyalty points message, using pluralization to differentiate messages
const loyaltyPointsMsg = i18n.translate(
'loyaltyPoints',
{
count: points,
formattedPoints,
},
);
const app = root.createComponent(Banner, {
title: loyaltyPointsMsg,
});
root.appendChild(app);
},
);
```
```json
{
"loyaltyPoints": {
"one": "You have {{formattedPoints}} loyalty point",
"other": "You have {{formattedPoints}} loyalty points"
}
}
```
### Settings
### Define merchant settings
```toml
api_version = "2023-07"
[[extensions]]
name = "My checkout extension"
handle = "checkout-ui"
type = "ui_extension"
[[extensions.targeting]]
target = "purchase.checkout.block.render"
module = "./Checkout.jsx"
[extensions.settings]
[[extensions.settings.fields]]
key = "banner_title"
type = "single_line_text_field"
name = "Banner title"
description = "Enter a title for the banner."
[[extensions.settings.fields.validations]]
name = "min"
value = "5"
[[extensions.settings.fields.validations]]
name = "max"
value = "20"
```
### Accessing merchant settings
```jsx
import {
reactExtension,
Banner,
useSettings,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {banner_title} = useSettings();
return <Banner title={banner_title} />;
}
```
```js
import {
extension,
Banner,
} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root, {settings}) => {
const banner = root.createComponent(Banner, {
title: settings.current.banner_title,
});
// When the merchant updates the banner title in the checkout editor, re-render the banner
settings.subscribe((newSettings) => {
banner.updateProps({
title: newSettings.banner_title,
});
});
root.appendChild(banner);
},
);
```
### Storefront API access
### Access the Storefront API with query
```jsx
import {useEffect, useState} from 'react';
import {
useApi,
reactExtension,
List,
ListItem,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const [data, setData] = useState();
const {query} = useApi();
useEffect(() => {
query(
`query ($first: Int!) {
products(first: $first) {
nodes {
id
title
}
}
}`,
{
variables: {first: 5},
},
)
.then(({data, errors}) => setData(data))
.catch(console.error);
}, [query]);
return (
<List>
{data?.products?.nodes.map((node) => (
<ListItem key={node.id}>
{node.title}
</ListItem>
))}
</List>
);
}
```
```js
import {
extension,
List,
ListItem,
} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root, {query}) => {
query<any>(
`query ($first: Int!) {
products(first: $first) {
nodes {
id
title
}
}
}`,
{
variables: {first: 5},
},
)
.then(({data}) => {
const listItems =
data?.products?.nodes.map((node) =>
root.createComponent(
ListItem,
undefined,
node.title,
),
);
root.appendChild(
root.createComponent(
List,
undefined,
listItems,
),
);
})
.catch(console.error);
},
);
```
### Accessing the Storefront API with fetch()
```jsx
import {useEffect, useState} from 'react';
import {
useApi,
reactExtension,
List,
ListItem,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {shop} = useApi();
const [data, setData] = useState();
useEffect(() => {
const getProductsQuery = {
query: `query ($first: Int!) {
products(first: $first) {
nodes {
id
title
}
}
}`,
variables: {first: 5},
};
const apiVersion = 'unstable';
fetch(
`${shop.storefrontUrl}api/${apiVersion}/graphql.json`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(getProductsQuery),
},
)
.then((response) => response.json())
.then(({data, errors}) => setData(data))
.catch(console.error);
}, [shop]);
return (
<List>
{data?.products?.nodes.map((node) => (
<ListItem key={node.id}>
{node.title}
</ListItem>
))}
</List>
);
}
```
```js
import {
extension,
List,
ListItem,
} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root, {shop}) => {
const apiVersion = 'unstable';
const getProductsQuery = {
query: `query ($first: Int!) {
products(first: $first) {
nodes {
id
title
}
}
}`,
variables: {first: 5},
};
fetch(
`${shop.storefrontUrl}api/${apiVersion}/graphql.json`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(getProductsQuery),
},
)
.then((response) => response.json())
.then(({data}) => {
const listItems =
data?.products?.nodes.map((node) =>
root.createComponent(
ListItem,
undefined,
node.title,
),
);
root.appendChild(
root.createComponent(
List,
undefined,
listItems,
),
);
})
.catch(console.error);
},
);
```
### Buyer journey
### Block progress and show error for a checkout UI field
```jsx
import {
reactExtension,
useBuyerJourneyIntercept,
useShippingAddress,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.delivery-address.render-before',
() => <Extension />,
);
function Extension() {
const address = useShippingAddress();
useBuyerJourneyIntercept(
({canBlockProgress}) => {
return canBlockProgress &&
address?.countryCode &&
address.countryCode !== 'CA'
? {
behavior: 'block',
reason: 'Invalid shipping country',
errors: [
{
message:
'Sorry, we can only ship to Canada',
// Show an error underneath the country code field
target:
'$.cart.deliveryGroups[0].deliveryAddress.countryCode',
},
{
// In addition, show an error at the page level
message:
'Please use a different address.',
},
],
}
: {
behavior: 'allow',
};
},
);
return null;
}
```
```js
import {extension} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.delivery-address.render-before',
(root, {buyerJourney, shippingAddress}) => {
let address = shippingAddress?.current;
shippingAddress?.subscribe((newAddress) => {
address = newAddress;
});
buyerJourney.intercept(
({canBlockProgress}) => {
return canBlockProgress &&
address?.countryCode &&
address.countryCode !== 'CA'
? {
behavior: 'block',
reason: 'Invalid shipping country',
errors: [
{
message:
'Sorry, we can only ship to Canada',
// Show an error underneath the country code field
target:
'$.cart.deliveryGroups[0].deliveryAddress.countryCode',
},
{
// In addition, show an error at the page level
message:
'Please use a different address.',
},
],
}
: {
behavior: 'allow',
};
},
);
},
);
```
### Block progress and show error at page level
```jsx
import {
reactExtension,
useBuyerJourneyIntercept,
useShippingAddress,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.delivery-address.render-before',
() => <Extension />,
);
function Extension() {
const address = useShippingAddress();
useBuyerJourneyIntercept(
({canBlockProgress}) => {
return canBlockProgress &&
address?.countryCode &&
address.countryCode !== 'CA'
? {
behavior: 'block',
reason: 'Invalid shipping country',
errors: [
{
// An error without a `target` property is shown at page level
message:
'Sorry, we can only ship to Canada',
},
],
}
: {
behavior: 'allow',
};
},
);
return null;
}
```
```js
import {extension} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.delivery-address.render-before',
(root, {buyerJourney, shippingAddress}) => {
let address = shippingAddress?.current;
shippingAddress?.subscribe((newAddress) => {
address = newAddress;
});
buyerJourney.intercept(
({canBlockProgress}) => {
return canBlockProgress &&
address?.countryCode &&
address.countryCode !== 'CA'
? {
behavior: 'block',
reason: 'Invalid shipping country',
errors: [
{
// An error without a `target` property is shown at page level
message:
'Sorry, we can only ship to Canada',
},
],
}
: {
behavior: 'allow',
};
},
);
},
);
```
### Block progress and show error in your extension
```jsx
import {useState} from 'react';
import {
reactExtension,
Banner,
useBuyerJourneyIntercept,
useTarget,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.cart-line-item.render-after',
() => <Extension />,
);
function Extension() {
const [showError, setShowError] =
useState(false);
const {quantity} = useTarget();
useBuyerJourneyIntercept(
({canBlockProgress}) => {
return canBlockProgress && quantity > 1
? {
behavior: 'block',
reason: 'limited stock',
perform: (result) => {
if (result.behavior === 'block') {
setShowError(true);
}
},
}
: {
behavior: 'allow',
perform: () => {
setShowError(false);
},
};
},
);
return showError ? (
<Banner>
This item has a limit of one per customer.
</Banner>
) : null;
}
```
```js
import {
extension,
Banner,
} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.cart-line-item.render-after',
(root, {buyerJourney, target}) => {
const banner = root.createComponent(Banner);
let quantity = target.current.quantity;
target?.subscribe((newTarget) => {
quantity = newTarget.quantity;
});
buyerJourney.intercept(
({canBlockProgress}) => {
return canBlockProgress && quantity > 1
? {
behavior: 'block',
reason: 'limited stock',
perform: (result) => {
if (result.behavior === 'block') {
banner.appendChild(
'This item has a limit of one per customer.',
);
root.appendChild(banner);
}
},
}
: {
behavior: 'allow',
perform: () => {
root.removeChild(banner);
},
};
},
);
},
);
```
### Session Token
### Using a session token with fetch()
```jsx
import {useEffect} from 'react';
import {
reactExtension,
Banner,
useApi,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {sessionToken} = useApi();
useEffect(() => {
async function queryApi() {
// Request a new (or cached) session token from Shopify
const token = await sessionToken.get();
console.log('sessionToken.get()', token);
const apiResponse = await fetchWithToken(
token,
);
// Use your response
console.log('API response', apiResponse);
}
function fetchWithToken(token) {
const result = fetch(
'https://myapp.com/api/session-token',
{
headers: {
Authorization: `Bearer ${token}`,
},
},
);
return result;
}
queryApi();
}, [sessionToken]);
return (
<Banner>See console for API response</Banner>
);
}
```
```js
import {
extension,
Banner,
BlockStack,
} from '@shopify/ui-extensions/checkout';
export default extension(
'purchase.checkout.block.render',
(root, {sessionToken}) => {
async function queryApi() {
// Request a new (or cached) session token from Shopify
const token = await sessionToken.get();
console.log(token);
const apiResponse = await fetchWithToken(
token,
);
// Use your response
console.log(apiResponse);
}
function fetchWithToken(token) {
const result = fetch(
'https://myapp.com/api/session-token',
{
headers: {
Authorization: `Bearer ${token}`,
},
},
);
return result;
}
queryApi();
root.appendChild(
root.createComponent(Banner, {
title: 'Session Token Extension',
}),
);
},
);
```
### Session token claims
```json
{
// Shopify URL
"dest": "store-name.myshopify.com",
// The Client ID of your app
"aud": "<clientId>",
// When the token expires. Set at 5 minutes.
"exp": 1679954053,
// When the token was actived
"nbf": 1679953753,
// When the token was issued
"iat": 1679953753,
// A unique identifier (a nonce) to prevent replay attacks
"jti": "6c992878-dbaf-48d1-bb9d-6d9b59814fd1",
// Optional claim present when a customer is logged in and your app has permissions to read customer data
"sub": "gid://shopify/Customer/<customerId>"
}
```