# Delivery The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Banner, useDeliveryGroups, useDeliveryGroup, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const firstDeliveryGroup = useDeliveryGroup( deliveryGroups[0], ); if (!firstDeliveryGroup) { return null; } const selectedDeliveryOption = firstDeliveryGroup?.selectedDeliveryOption; return ( Selected delivery option:{' '} {selectedDeliveryOption?.title} ); } ``` ## StandardApi The base API object provided to `purchase` extension targets. ### Docs_Standard_DeliveryApi ### deliveryGroups value: `StatefulRemoteSubscribable` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } A list of delivery groups containing information about the delivery of the items the customer intends to purchase. ### DeliveryGroup Represents the delivery information and options available for one or more cart lines. ### deliveryOptions value: `DeliveryOption[]` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The delivery options available for the delivery group. ### groupType value: `DeliveryGroupType` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } - DeliveryGroupType: 'oneTimePurchase' | 'subscription' The type of the delivery group. ### id value: `string` The unique identifier of the delivery group. On the Thank You page this value is undefined. ### isDeliveryRequired value: `boolean` Whether delivery is required for the delivery group. ### selectedDeliveryOption value: `DeliveryOptionReference` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption - DeliveryOptionReference: export interface DeliveryOptionReference { /** * The unique identifier of the referenced delivery option. */ handle: string; } The selected delivery option for the delivery group. ### targetedCartLines value: `CartLineReference[]` - CartLineReference: export interface CartLineReference { /** * The unique identifier of the referenced cart line. */ id: string; } The cart line references associated to the delivery group. ### ShippingOption Represents a delivery option that is a shipping option. ### carrier value: `ShippingOptionCarrier` - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } - ShippingOptionCarrier: export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } Information about the carrier. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery including discounts. ### deliveryEstimate value: `DeliveryEstimate` - DeliveryEstimate: export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } Information about the estimated delivery time. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `'shipping' | 'local'` The type of this delivery option. ### ShippingOptionCarrier ### name value: `string` The name of the carrier. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` - 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' The ISO 4217 format for the currency. ### DeliveryEstimate ### timeInTransit value: `NumberRange` - NumberRange: export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } The estimated time in transit for the delivery in seconds. ### NumberRange ### lower value: `number` The lower bound of the number range. ### upper value: `number` The upper bound of the number range. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### PickupPointOption ### carrier value: `PickupPointCarrier` - PickupPointCarrier: interface PickupPointCarrier { /** * The code identifying the carrier. */ code?: string; /** * The name of the carrier. */ name?: string; } Information about the carrier that ships to the pickup point. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point including discounts. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupPointLocation` - PickupPointLocation: interface PickupPointLocation { /** * The name of the pickup point. */ name?: string; /** * The unique identifier of the pickup point. */ handle: string; /** * The address of the pickup point. */ address: MailingAddress; } The location details of the pickup point. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickupPoint"` The type of this delivery option. ### PickupPointCarrier ### code value: `string` The code identifying the carrier. ### name value: `string` The name of the carrier. ### PickupPointLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup point. ### handle value: `string` The unique identifier of the pickup point. ### name value: `string` The name of the pickup point. ### MailingAddress ### address1 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` - 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' 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### PickupLocationOption ### code value: `string` The code of the delivery option. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupLocation` - PickupLocation: interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } The location details of the pickup location. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickup"` The type of this delivery option. ### PickupLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup location. ### name value: `string` The name of the pickup location. ### DeliveryOptionReference Represents a reference to a delivery option. ### handle value: `string` The unique identifier of the referenced delivery option. ### CartLineReference Represents a reference to a cart line. ### id value: `string` The unique identifier of the referenced cart line. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## useDeliveryGroup Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes. ### UseDeliveryGroupGeneratedType Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes. #### Returns: DeliveryGroupDetails | undefined #### Params: - deliveryGroup: DeliveryGroup export function useDeliveryGroup< ID extends RenderExtensionTarget = RenderExtensionTarget, >(deliveryGroup: DeliveryGroup | undefined): DeliveryGroupDetails | undefined { const {lines} = useApi(); const cartLines = useSubscription(lines); return useMemo(() => { if (!deliveryGroup) { return undefined; } const deliveryGroupDetails = { ...deliveryGroup, selectedDeliveryOption: getSelectedDeliveryOption(deliveryGroup), targetedCartLines: getTargetedCartLines(deliveryGroup, cartLines), }; return deliveryGroupDetails; }, [deliveryGroup, cartLines]); } ### DeliveryGroup Represents the delivery information and options available for one or more cart lines. ### deliveryOptions value: `DeliveryOption[]` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The delivery options available for the delivery group. ### groupType value: `DeliveryGroupType` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } - DeliveryGroupType: 'oneTimePurchase' | 'subscription' The type of the delivery group. ### id value: `string` The unique identifier of the delivery group. On the Thank You page this value is undefined. ### isDeliveryRequired value: `boolean` Whether delivery is required for the delivery group. ### selectedDeliveryOption value: `DeliveryOptionReference` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption - DeliveryOptionReference: export interface DeliveryOptionReference { /** * The unique identifier of the referenced delivery option. */ handle: string; } The selected delivery option for the delivery group. ### targetedCartLines value: `CartLineReference[]` - CartLineReference: export interface CartLineReference { /** * The unique identifier of the referenced cart line. */ id: string; } - CartLine: export interface CartLine { /** * 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. * @example 'gid://shopify/CartLine/123' */ id: string; /** * The merchandise being purchased. */ merchandise: Merchandise; /** * The quantity of the merchandise being purchased. */ quantity: number; /** * The details about the cost components attributed to the cart line. */ cost: CartLineCost; /** * The line item additional custom attributes. */ attributes: Attribute[]; /** * Discounts applied to the cart line. */ discountAllocations: CartDiscountAllocation[]; /** * Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. */ lineComponents: CartLineComponentType[]; } The cart line references associated to the delivery group. ### ShippingOption Represents a delivery option that is a shipping option. ### carrier value: `ShippingOptionCarrier` - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } - ShippingOptionCarrier: export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } Information about the carrier. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery including discounts. ### deliveryEstimate value: `DeliveryEstimate` - DeliveryEstimate: export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } Information about the estimated delivery time. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `'shipping' | 'local'` The type of this delivery option. ### ShippingOptionCarrier ### name value: `string` The name of the carrier. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` - 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' The ISO 4217 format for the currency. ### DeliveryEstimate ### timeInTransit value: `NumberRange` - NumberRange: export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } The estimated time in transit for the delivery in seconds. ### NumberRange ### lower value: `number` The lower bound of the number range. ### upper value: `number` The upper bound of the number range. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### PickupPointOption ### carrier value: `PickupPointCarrier` - PickupPointCarrier: interface PickupPointCarrier { /** * The code identifying the carrier. */ code?: string; /** * The name of the carrier. */ name?: string; } Information about the carrier that ships to the pickup point. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point including discounts. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupPointLocation` - PickupPointLocation: interface PickupPointLocation { /** * The name of the pickup point. */ name?: string; /** * The unique identifier of the pickup point. */ handle: string; /** * The address of the pickup point. */ address: MailingAddress; } The location details of the pickup point. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickupPoint"` The type of this delivery option. ### PickupPointCarrier ### code value: `string` The code identifying the carrier. ### name value: `string` The name of the carrier. ### PickupPointLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup point. ### handle value: `string` The unique identifier of the pickup point. ### name value: `string` The name of the pickup point. ### MailingAddress ### address1 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` - 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' 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### PickupLocationOption ### code value: `string` The code of the delivery option. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupLocation` - PickupLocation: interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } The location details of the pickup location. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickup"` The type of this delivery option. ### PickupLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup location. ### name value: `string` The name of the pickup location. ### DeliveryOptionReference Represents a reference to a delivery option. ### handle value: `string` The unique identifier of the referenced delivery option. ### CartLineReference Represents a reference to a cart line. ### id value: `string` The unique identifier of the referenced cart line. ### DeliveryGroupDetails Represents a DeliveryGroup with expanded reference fields and full details. ### deliveryOptions value: `DeliveryOption[]` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The delivery options available for the delivery group. ### groupType value: `DeliveryGroupType` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } - DeliveryGroupType: 'oneTimePurchase' | 'subscription' The type of the delivery group. ### id value: `string` The unique identifier of the delivery group. On the Thank You page this value is undefined. ### isDeliveryRequired value: `boolean` Whether delivery is required for the delivery group. ### selectedDeliveryOption value: `DeliveryOption` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The selected delivery option for the delivery group. ### targetedCartLines value: `CartLine[]` - CartLine: export interface CartLine { /** * 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. * @example 'gid://shopify/CartLine/123' */ id: string; /** * The merchandise being purchased. */ merchandise: Merchandise; /** * The quantity of the merchandise being purchased. */ quantity: number; /** * The details about the cost components attributed to the cart line. */ cost: CartLineCost; /** * The line item additional custom attributes. */ attributes: Attribute[]; /** * Discounts applied to the cart line. */ discountAllocations: CartDiscountAllocation[]; /** * Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. */ lineComponents: CartLineComponentType[]; } The cart lines associated to the delivery group. ### CartLine ### attributes value: `Attribute[]` - Attribute: export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } The line item additional custom attributes. ### cost value: `CartLineCost` - CartLine: export interface CartLine { /** * 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. * @example 'gid://shopify/CartLine/123' */ id: string; /** * The merchandise being purchased. */ merchandise: Merchandise; /** * The quantity of the merchandise being purchased. */ quantity: number; /** * The details about the cost components attributed to the cart line. */ cost: CartLineCost; /** * The line item additional custom attributes. */ attributes: Attribute[]; /** * Discounts applied to the cart line. */ discountAllocations: CartDiscountAllocation[]; /** * Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. */ lineComponents: CartLineComponentType[]; } - CartLineCost: export interface CartLineCost { /** * The total amount after reductions the buyer can expect to pay that is directly attributable to a single * cart line. */ totalAmount: Money; } The details about the cost components attributed to the cart line. ### discountAllocations value: `CartDiscountAllocation[]` - CartDiscountAllocation: CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation Discounts applied to the cart line. ### id value: `string` 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. ### lineComponents value: `CartBundleLineComponent[]` - CartBundleLineComponent: export interface CartBundleLineComponent { type: 'bundle'; /** * 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. * * @example 'gid://shopify/CartLineComponent/123' */ id: string; /** * The merchandise of this bundle line component. */ merchandise: Merchandise; /** * The quantity of merchandise being purchased. */ quantity: number; /** * The cost attributed to this bundle line component. */ cost: CartLineCost; /** * Additional custom attributes for the bundle line component. * * @example [{key: 'engraving', value: 'hello world'}] */ attributes: Attribute[]; } Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ### merchandise value: `Merchandise` - Merchandise: ProductVariant The merchandise being purchased. ### quantity value: `number` The quantity of the merchandise being purchased. ### Attribute ### key value: `string` The key for the attribute. ### value value: `string` The value for the attribute. ### CartLineCost ### totalAmount value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ### CartCodeDiscountAllocation ### code value: `string` The code for the discount ### discountedAmount value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The money amount that has been discounted from the order ### type value: `"code"` The type of the code discount ### CartAutomaticDiscountAllocation ### discountedAmount value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The money amount that has been discounted from the order ### title value: `string` The title of the automatic discount ### type value: `"automatic"` The type of the automatic discount ### CartCustomDiscountAllocation ### discountedAmount value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The money amount that has been discounted from the order ### title value: `string` The title of the custom discount ### type value: `"custom"` The type of the custom discount ### CartBundleLineComponent ### attributes value: `Attribute[]` - Attribute: export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } Additional custom attributes for the bundle line component. ### cost value: `CartLineCost` - CartLine: export interface CartLine { /** * 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. * @example 'gid://shopify/CartLine/123' */ id: string; /** * The merchandise being purchased. */ merchandise: Merchandise; /** * The quantity of the merchandise being purchased. */ quantity: number; /** * The details about the cost components attributed to the cart line. */ cost: CartLineCost; /** * The line item additional custom attributes. */ attributes: Attribute[]; /** * Discounts applied to the cart line. */ discountAllocations: CartDiscountAllocation[]; /** * Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. */ lineComponents: CartLineComponentType[]; } - CartLineCost: export interface CartLineCost { /** * The total amount after reductions the buyer can expect to pay that is directly attributable to a single * cart line. */ totalAmount: Money; } The cost attributed to this bundle line component. ### id value: `string` 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 value: `Merchandise` - Merchandise: ProductVariant The merchandise of this bundle line component. ### quantity value: `number` The quantity of merchandise being purchased. ### type value: `"bundle"` ### Merchandise ### id value: `string` A globally-unique identifier. ### image value: `ImageDetails` - ImageDetails: export interface ImageDetails { /** * The image URL. */ url: string; /** * The alternative text for the image. */ altText?: string; } Image associated with the product variant. This field falls back to the product image if no image is available. ### product value: `Product` - Product: export interface Product { /** * A globally-unique identifier. */ id: string; /** * The product’s vendor name. */ vendor: string; /** * A categorization that a product can be tagged with, commonly used for filtering and searching. */ productType: string; } The product object that the product variant belongs to. ### requiresShipping value: `boolean` Whether or not the product requires shipping. ### selectedOptions value: `SelectedOption[]` - SelectedOption: export interface SelectedOption { /** * The name of the merchandise option. */ name: string; /** * The value of the merchandise option. */ value: string; } List of product options applied to the variant. ### sellingPlan value: `SellingPlan` - SellingPlan: export interface SellingPlan { /** * A globally-unique identifier. * @example 'gid://shopify/SellingPlan/1' */ id: string; } The selling plan associated with the merchandise. ### sku value: `string` The product variant's sku. ### subtitle value: `string` The product variant's subtitle. ### title value: `string` The product variant’s title. ### type value: `"variant"` ### ImageDetails ### altText value: `string` The alternative text for the image. ### url value: `string` The image URL. ### Product ### id value: `string` A globally-unique identifier. ### productType value: `string` A categorization that a product can be tagged with, commonly used for filtering and searching. ### vendor value: `string` The product’s vendor name. ### SelectedOption ### name value: `string` The name of the merchandise option. ### value value: `string` The value of the merchandise option. ### SellingPlan ### id value: `string` A globally-unique identifier. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## useDeliveryGroups Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes. ### UseDeliveryGroupsGeneratedType Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes. #### Returns: DeliveryGroup[] export function useDeliveryGroups< Target extends RenderExtensionTarget = RenderExtensionTarget, >(): DeliveryGroup[] { const api = useApi(); return useSubscription(api.deliveryGroups); } ### DeliveryGroup Represents the delivery information and options available for one or more cart lines. ### deliveryOptions value: `DeliveryOption[]` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The delivery options available for the delivery group. ### groupType value: `DeliveryGroupType` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } - DeliveryGroupType: 'oneTimePurchase' | 'subscription' The type of the delivery group. ### id value: `string` The unique identifier of the delivery group. On the Thank You page this value is undefined. ### isDeliveryRequired value: `boolean` Whether delivery is required for the delivery group. ### selectedDeliveryOption value: `DeliveryOptionReference` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption - DeliveryOptionReference: export interface DeliveryOptionReference { /** * The unique identifier of the referenced delivery option. */ handle: string; } The selected delivery option for the delivery group. ### targetedCartLines value: `CartLineReference[]` - CartLineReference: export interface CartLineReference { /** * The unique identifier of the referenced cart line. */ id: string; } The cart line references associated to the delivery group. ### ShippingOption Represents a delivery option that is a shipping option. ### carrier value: `ShippingOptionCarrier` - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } - ShippingOptionCarrier: export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } Information about the carrier. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery including discounts. ### deliveryEstimate value: `DeliveryEstimate` - DeliveryEstimate: export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } Information about the estimated delivery time. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `'shipping' | 'local'` The type of this delivery option. ### ShippingOptionCarrier ### name value: `string` The name of the carrier. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` - 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' The ISO 4217 format for the currency. ### DeliveryEstimate ### timeInTransit value: `NumberRange` - NumberRange: export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } The estimated time in transit for the delivery in seconds. ### NumberRange ### lower value: `number` The lower bound of the number range. ### upper value: `number` The upper bound of the number range. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### PickupPointOption ### carrier value: `PickupPointCarrier` - PickupPointCarrier: interface PickupPointCarrier { /** * The code identifying the carrier. */ code?: string; /** * The name of the carrier. */ name?: string; } Information about the carrier that ships to the pickup point. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point including discounts. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupPointLocation` - PickupPointLocation: interface PickupPointLocation { /** * The name of the pickup point. */ name?: string; /** * The unique identifier of the pickup point. */ handle: string; /** * The address of the pickup point. */ address: MailingAddress; } The location details of the pickup point. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickupPoint"` The type of this delivery option. ### PickupPointCarrier ### code value: `string` The code identifying the carrier. ### name value: `string` The name of the carrier. ### PickupPointLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup point. ### handle value: `string` The unique identifier of the pickup point. ### name value: `string` The name of the pickup point. ### MailingAddress ### address1 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` - 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' 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### PickupLocationOption ### code value: `string` The code of the delivery option. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupLocation` - PickupLocation: interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } The location details of the pickup location. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickup"` The type of this delivery option. ### PickupLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup location. ### name value: `string` The name of the pickup location. ### DeliveryOptionReference Represents a reference to a delivery option. ### handle value: `string` The unique identifier of the referenced delivery option. ### CartLineReference Represents a reference to a cart line. ### id value: `string` The unique identifier of the referenced cart line. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## Shipping Option This API object is provided to extensions registered for the `purchase.checkout.shipping-option-item.render-after` and `purchase.checkout.shipping-option-item.details.render` extension targets. ### ShippingOptionItemApi ### isTargetSelected value: `StatefulRemoteSubscribable` Whether the shipping option the extension is attached to is currently selected in the UI. ### renderMode value: `ShippingOptionItemRenderMode` - ShippingOptionItemRenderMode: export interface ShippingOptionItemRenderMode { /** * Whether the shipping option is rendered in an overlay. */ overlay: boolean; } - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } The render mode of the shipping option. ### target value: `StatefulRemoteSubscribable` - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } The shipping option the extension is attached to. ### ShippingOptionItemRenderMode The render mode of a shipping option. ### overlay value: `boolean` Whether the shipping option is rendered in an overlay. ### ShippingOption Represents a delivery option that is a shipping option. ### carrier value: `ShippingOptionCarrier` - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } - ShippingOptionCarrier: export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } Information about the carrier. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery including discounts. ### deliveryEstimate value: `DeliveryEstimate` - DeliveryEstimate: export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } Information about the estimated delivery time. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `'shipping' | 'local'` The type of this delivery option. ### ShippingOptionCarrier ### name value: `string` The name of the carrier. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` - 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' The ISO 4217 format for the currency. ### DeliveryEstimate ### timeInTransit value: `NumberRange` - NumberRange: export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } The estimated time in transit for the delivery in seconds. ### NumberRange ### lower value: `number` The lower bound of the number range. ### upper value: `number` The upper bound of the number range. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## useShippingOptionTarget Returns the shipping option for the `purchase.checkout.shipping-option-item.render-after` and `purchase.checkout.shipping-option-item.details.render` attached extensions. ### UseShippingOptionTargetGeneratedType Returns the shipping option the extension is attached to. This hook can only be used by extensions in the following extension targets: - `purchase.checkout.shipping-option-item.render-after` - `purchase.checkout.shipping-option-item.details.render` #### Returns: { shippingOptionTarget: ShippingOption; isTargetSelected: boolean; renderMode: ShippingOptionItemRenderMode; } export function useShippingOptionTarget(): { shippingOptionTarget: ShippingOption; isTargetSelected: boolean; renderMode: ShippingOptionItemRenderMode; } { const api = useApi< | 'purchase.checkout.shipping-option-item.render-after' | 'purchase.checkout.shipping-option-item.details.render' >(); if (!api.target || api.isTargetSelected === undefined) { throw new ExtensionHasNoTargetError( 'useShippingOptionTarget', api.extension.target, ); } const shippingOptionTarget = useSubscription(api.target); const isTargetSelected = useSubscription(api.isTargetSelected); const renderMode = api.renderMode; const shippingOption = useMemo(() => { return { shippingOptionTarget, isTargetSelected, renderMode, }; }, [shippingOptionTarget, isTargetSelected, renderMode]); return shippingOption; } ### ShippingOption Represents a delivery option that is a shipping option. ### carrier value: `ShippingOptionCarrier` - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } - ShippingOptionCarrier: export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } Information about the carrier. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery including discounts. ### deliveryEstimate value: `DeliveryEstimate` - DeliveryEstimate: export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } Information about the estimated delivery time. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `'shipping' | 'local'` The type of this delivery option. ### ShippingOptionCarrier ### name value: `string` The name of the carrier. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` - 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' The ISO 4217 format for the currency. ### DeliveryEstimate ### timeInTransit value: `NumberRange` - NumberRange: export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } The estimated time in transit for the delivery in seconds. ### NumberRange ### lower value: `number` The lower bound of the number range. ### upper value: `number` The upper bound of the number range. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### ShippingOptionItemRenderMode The render mode of a shipping option. ### overlay value: `boolean` Whether the shipping option is rendered in an overlay. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## ShippingOptionListApi This API object is provided to extensions registered for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` extension targets. ### ShippingOptionListApi ### deliverySelectionGroups value: `StatefulRemoteSubscribable< DeliverySelectionGroup[] | undefined >` - DeliverySelectionGroup: export interface DeliverySelectionGroup { /** * The handle of the selection group. */ handle: string; /** * If the selection group is selected. */ selected: boolean; /** * The localized title of the selection group. */ title: string; /** * The associated delivery option handles with the selection group. The handles will match the delivery group's delivery option handles. */ associatedDeliveryOptions: DeliveryOptionReference[]; /** * The sum of each delivery option's cost. */ cost: Money; /** * The sum of each delivery option's cost after discounts. */ costAfterDiscounts: Money; } The list of selection groups available to the buyers. The property will be undefined when no such groups are available. ### target value: `StatefulRemoteSubscribable` - DeliveryGroupList: export interface DeliveryGroupList { /** * The group type of the delivery group list. */ groupType: DeliveryGroupType; /** * The delivery groups that compose this list. */ deliveryGroups: DeliveryGroup[]; } - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } The delivery group list the extension is attached to. The target will be undefined when there are no groups for a given type. ### DeliverySelectionGroup A selection group for delivery options. ### associatedDeliveryOptions value: `DeliveryOptionReference[]` - DeliveryOptionReference: export interface DeliveryOptionReference { /** * The unique identifier of the referenced delivery option. */ handle: string; } - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The associated delivery option handles with the selection group. The handles will match the delivery group's delivery option handles. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The sum of each delivery option's cost. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The sum of each delivery option's cost after discounts. ### handle value: `string` The handle of the selection group. ### selected value: `boolean` If the selection group is selected. ### title value: `string` The localized title of the selection group. ### DeliveryOptionReference Represents a reference to a delivery option. ### handle value: `string` The unique identifier of the referenced delivery option. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` - 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' The ISO 4217 format for the currency. ### DeliveryGroupList The delivery group list the extension is associated to. ### deliveryGroups value: `DeliveryGroup[]` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } The delivery groups that compose this list. ### groupType value: `DeliveryGroupType` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } - DeliveryGroupType: 'oneTimePurchase' | 'subscription' The group type of the delivery group list. ### DeliveryGroup Represents the delivery information and options available for one or more cart lines. ### deliveryOptions value: `DeliveryOption[]` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The delivery options available for the delivery group. ### groupType value: `DeliveryGroupType` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } - DeliveryGroupType: 'oneTimePurchase' | 'subscription' The type of the delivery group. ### id value: `string` The unique identifier of the delivery group. On the Thank You page this value is undefined. ### isDeliveryRequired value: `boolean` Whether delivery is required for the delivery group. ### selectedDeliveryOption value: `DeliveryOptionReference` - DeliveryOptionReference: export interface DeliveryOptionReference { /** * The unique identifier of the referenced delivery option. */ handle: string; } - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The selected delivery option for the delivery group. ### targetedCartLines value: `CartLineReference[]` - CartLineReference: export interface CartLineReference { /** * The unique identifier of the referenced cart line. */ id: string; } The cart line references associated to the delivery group. ### ShippingOption Represents a delivery option that is a shipping option. ### carrier value: `ShippingOptionCarrier` - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } - ShippingOptionCarrier: export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } Information about the carrier. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery including discounts. ### deliveryEstimate value: `DeliveryEstimate` - DeliveryEstimate: export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } Information about the estimated delivery time. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `'shipping' | 'local'` The type of this delivery option. ### ShippingOptionCarrier ### name value: `string` The name of the carrier. ### DeliveryEstimate ### timeInTransit value: `NumberRange` - NumberRange: export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } The estimated time in transit for the delivery in seconds. ### NumberRange ### lower value: `number` The lower bound of the number range. ### upper value: `number` The upper bound of the number range. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### PickupPointOption ### carrier value: `PickupPointCarrier` - PickupPointCarrier: interface PickupPointCarrier { /** * The code identifying the carrier. */ code?: string; /** * The name of the carrier. */ name?: string; } Information about the carrier that ships to the pickup point. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point including discounts. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupPointLocation` - PickupPointLocation: interface PickupPointLocation { /** * The name of the pickup point. */ name?: string; /** * The unique identifier of the pickup point. */ handle: string; /** * The address of the pickup point. */ address: MailingAddress; } The location details of the pickup point. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickupPoint"` The type of this delivery option. ### PickupPointCarrier ### code value: `string` The code identifying the carrier. ### name value: `string` The name of the carrier. ### PickupPointLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup point. ### handle value: `string` The unique identifier of the pickup point. ### name value: `string` The name of the pickup point. ### MailingAddress ### address1 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` - 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' 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### PickupLocationOption ### code value: `string` The code of the delivery option. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupLocation` - PickupLocation: interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } The location details of the pickup location. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickup"` The type of this delivery option. ### PickupLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup location. ### name value: `string` The name of the pickup location. ### CartLineReference Represents a reference to a cart line. ### id value: `string` The unique identifier of the referenced cart line. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## useDeliveryGroupTarget Returns the delivery group for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` attached extensions. This is deprecated, use `useDeliveryGroupListTarget()` instead. ### UseDeliveryGroupTargetGeneratedType Returns the delivery group the extension is attached to. This hook can only be used by extensions in the following extension targets: - purchase.checkout.shipping-option-list.render-before - purchase.checkout.shipping-option-list.render-after > Caution: Deprecated as of version `2024-07`, use `useDeliveryGroupListTarget()` instead. #### Returns: DeliveryGroup | undefined export function useDeliveryGroupTarget(): DeliveryGroup | undefined { const api = useApi< | 'purchase.checkout.shipping-option-list.render-before' | 'purchase.checkout.shipping-option-list.render-after' >(); const target = useSubscription(api.target); return target?.deliveryGroups[0]; } ### DeliveryGroup Represents the delivery information and options available for one or more cart lines. ### deliveryOptions value: `DeliveryOption[]` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The delivery options available for the delivery group. ### groupType value: `DeliveryGroupType` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } - DeliveryGroupType: 'oneTimePurchase' | 'subscription' The type of the delivery group. ### id value: `string` The unique identifier of the delivery group. On the Thank You page this value is undefined. ### isDeliveryRequired value: `boolean` Whether delivery is required for the delivery group. ### selectedDeliveryOption value: `DeliveryOptionReference` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption - DeliveryOptionReference: export interface DeliveryOptionReference { /** * The unique identifier of the referenced delivery option. */ handle: string; } The selected delivery option for the delivery group. ### targetedCartLines value: `CartLineReference[]` - CartLineReference: export interface CartLineReference { /** * The unique identifier of the referenced cart line. */ id: string; } The cart line references associated to the delivery group. ### ShippingOption Represents a delivery option that is a shipping option. ### carrier value: `ShippingOptionCarrier` - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } - ShippingOptionCarrier: export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } Information about the carrier. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery including discounts. ### deliveryEstimate value: `DeliveryEstimate` - DeliveryEstimate: export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } Information about the estimated delivery time. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `'shipping' | 'local'` The type of this delivery option. ### ShippingOptionCarrier ### name value: `string` The name of the carrier. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` - 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' The ISO 4217 format for the currency. ### DeliveryEstimate ### timeInTransit value: `NumberRange` - NumberRange: export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } The estimated time in transit for the delivery in seconds. ### NumberRange ### lower value: `number` The lower bound of the number range. ### upper value: `number` The upper bound of the number range. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### PickupPointOption ### carrier value: `PickupPointCarrier` - PickupPointCarrier: interface PickupPointCarrier { /** * The code identifying the carrier. */ code?: string; /** * The name of the carrier. */ name?: string; } Information about the carrier that ships to the pickup point. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point including discounts. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupPointLocation` - PickupPointLocation: interface PickupPointLocation { /** * The name of the pickup point. */ name?: string; /** * The unique identifier of the pickup point. */ handle: string; /** * The address of the pickup point. */ address: MailingAddress; } The location details of the pickup point. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickupPoint"` The type of this delivery option. ### PickupPointCarrier ### code value: `string` The code identifying the carrier. ### name value: `string` The name of the carrier. ### PickupPointLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup point. ### handle value: `string` The unique identifier of the pickup point. ### name value: `string` The name of the pickup point. ### MailingAddress ### address1 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` - 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' 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### PickupLocationOption ### code value: `string` The code of the delivery option. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupLocation` - PickupLocation: interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } The location details of the pickup location. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickup"` The type of this delivery option. ### PickupLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup location. ### name value: `string` The name of the pickup location. ### DeliveryOptionReference Represents a reference to a delivery option. ### handle value: `string` The unique identifier of the referenced delivery option. ### CartLineReference Represents a reference to a cart line. ### id value: `string` The unique identifier of the referenced cart line. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## useDeliveryGroupListTarget Returns the delivery group list for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` attached extensions. ### UseDeliveryGroupListTargetGeneratedType Returns the delivery group list the extension is attached to. This hook can only be used by extensions in the following extension targets: - purchase.checkout.shipping-option-list.render-before - purchase.checkout.shipping-option-list.render-after #### Returns: DeliveryGroupList | undefined export function useDeliveryGroupListTarget(): DeliveryGroupList | undefined { const api = useApi< | 'purchase.checkout.shipping-option-list.render-before' | 'purchase.checkout.shipping-option-list.render-after' >(); return useSubscription(api.target); } ### DeliveryGroupList The delivery group list the extension is associated to. ### deliveryGroups value: `DeliveryGroup[]` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } The delivery groups that compose this list. ### groupType value: `DeliveryGroupType` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } - DeliveryGroupType: 'oneTimePurchase' | 'subscription' The group type of the delivery group list. ### DeliveryGroup Represents the delivery information and options available for one or more cart lines. ### deliveryOptions value: `DeliveryOption[]` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption The delivery options available for the delivery group. ### groupType value: `DeliveryGroupType` - DeliveryGroup: export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } - DeliveryGroupType: 'oneTimePurchase' | 'subscription' The type of the delivery group. ### id value: `string` The unique identifier of the delivery group. On the Thank You page this value is undefined. ### isDeliveryRequired value: `boolean` Whether delivery is required for the delivery group. ### selectedDeliveryOption value: `DeliveryOptionReference` - DeliveryOption: ShippingOption | PickupPointOption | PickupLocationOption - DeliveryOptionReference: export interface DeliveryOptionReference { /** * The unique identifier of the referenced delivery option. */ handle: string; } The selected delivery option for the delivery group. ### targetedCartLines value: `CartLineReference[]` - CartLineReference: export interface CartLineReference { /** * The unique identifier of the referenced cart line. */ id: string; } The cart line references associated to the delivery group. ### ShippingOption Represents a delivery option that is a shipping option. ### carrier value: `ShippingOptionCarrier` - ShippingOption: export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } - ShippingOptionCarrier: export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } Information about the carrier. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost of the delivery including discounts. ### deliveryEstimate value: `DeliveryEstimate` - DeliveryEstimate: export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } Information about the estimated delivery time. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `'shipping' | 'local'` The type of this delivery option. ### ShippingOptionCarrier ### name value: `string` The name of the carrier. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` - 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' The ISO 4217 format for the currency. ### DeliveryEstimate ### timeInTransit value: `NumberRange` - NumberRange: export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } The estimated time in transit for the delivery in seconds. ### NumberRange ### lower value: `number` The lower bound of the number range. ### upper value: `number` The upper bound of the number range. ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ### PickupPointOption ### carrier value: `PickupPointCarrier` - PickupPointCarrier: interface PickupPointCarrier { /** * The code identifying the carrier. */ code?: string; /** * The name of the carrier. */ name?: string; } Information about the carrier that ships to the pickup point. ### code value: `string` The code of the delivery option. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The cost to ship to this pickup point including discounts. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupPointLocation` - PickupPointLocation: interface PickupPointLocation { /** * The name of the pickup point. */ name?: string; /** * The unique identifier of the pickup point. */ handle: string; /** * The address of the pickup point. */ address: MailingAddress; } The location details of the pickup point. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickupPoint"` The type of this delivery option. ### PickupPointCarrier ### code value: `string` The code identifying the carrier. ### name value: `string` The name of the carrier. ### PickupPointLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup point. ### handle value: `string` The unique identifier of the pickup point. ### name value: `string` The name of the pickup point. ### MailingAddress ### address1 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` - 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' 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### PickupLocationOption ### code value: `string` The code of the delivery option. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupLocation` - PickupLocation: interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } The location details of the pickup location. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickup"` The type of this delivery option. ### PickupLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup location. ### name value: `string` The name of the pickup location. ### DeliveryOptionReference Represents a reference to a delivery option. ### handle value: `string` The unique identifier of the referenced delivery option. ### CartLineReference Represents a reference to a cart line. ### id value: `string` The unique identifier of the referenced cart line. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## useDeliverySelectionGroups Returns the delivery selection groups for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` attached extensions. ### UseDeliverySelectionGroupsGeneratedType Returns the list of delivery selection groups available to the buyers. This hook can only be used by extensions in the following extension targets: - purchase.checkout.shipping-option-list.render-before - purchase.checkout.shipping-option-list.render-after #### Returns: | DeliverySelectionGroup[] | undefined export function useDeliverySelectionGroups(): | DeliverySelectionGroup[] | undefined { const api = useApi< | 'purchase.checkout.shipping-option-list.render-before' | 'purchase.checkout.shipping-option-list.render-after' >(); return useSubscription(api.deliverySelectionGroups); } ### DeliverySelectionGroup A selection group for delivery options. ### associatedDeliveryOptions value: `DeliveryOptionReference[]` - DeliveryOptionReference: export interface DeliveryOptionReference { /** * The unique identifier of the referenced delivery option. */ handle: string; } The associated delivery option handles with the selection group. The handles will match the delivery group's delivery option handles. ### cost value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The sum of each delivery option's cost. ### costAfterDiscounts value: `Money` - Money: export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: CurrencyCode; } The sum of each delivery option's cost after discounts. ### handle value: `string` The handle of the selection group. ### selected value: `boolean` If the selection group is selected. ### title value: `string` The localized title of the selection group. ### DeliveryOptionReference Represents a reference to a delivery option. ### handle value: `string` The unique identifier of the referenced delivery option. ### Money ### amount value: `number` The price amount. ### currencyCode value: `CurrencyCode` - 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' The ISO 4217 format for the currency. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## PickupPointListApi This API object is provided to extensions registered for the `purchase.checkout.pickup-point-list.render-after` and `purchase.checkout.pickup-point-list.render-after` extension target. ### PickupPointListApi ### isLocationFormVisible value: `StatefulRemoteSubscribable` Whether the customer location input form is shown to the buyer. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## PickupLocationListApi This API object is provided to extensions registered for the `purchase.checkout.pickup-location-list.render-after` and `purchase.checkout.pickup-location-list.render-after` extension target. ### PickupLocationListApi ### isLocationFormVisible value: `StatefulRemoteSubscribable` Whether the customer location input form is shown to the buyer. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## PickupLocationItemApi The API object provided to the `purchase.checkout.pickup-location-option-item.render-after` extension target. ### PickupLocationItemApi ### isTargetSelected value: `StatefulRemoteSubscribable` Whether the pickup location is currently selected. ### target value: `StatefulRemoteSubscribable` - PickupLocationOption: export interface PickupLocationOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'pickup'; /** * The location details of the pickup location. */ location: PickupLocation; } - PickupLocation: interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } The pickup location the extension is attached to. ### PickupLocationOption ### code value: `string` The code of the delivery option. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupLocation` - PickupLocation: interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } The location details of the pickup location. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickup"` The type of this delivery option. ### PickupLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup location. ### name value: `string` The name of the pickup location. ### MailingAddress ### address1 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` - 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' 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## usePickupLocationOptionTarget Returns the pickup location option for `purchase.checkout.pickup-location-option-item.render-after` attached extensions. ### UsePickupLocationOptionTargetGeneratedType Returns the pickup location option the extension is attached to. This hook can only be used by extensions in the following extension target: - `purchase.checkout.pickup-location-option-item.render-after` #### Returns: { pickupLocationOptionTarget: PickupLocationOption; isTargetSelected: boolean; } export function usePickupLocationOptionTarget(): { pickupLocationOptionTarget: PickupLocationOption; isTargetSelected: boolean; } { const api = useApi<'purchase.checkout.pickup-location-option-item.render-after'>(); if (!api.target || api.isTargetSelected === undefined) { throw new ExtensionHasNoTargetError( 'usePickupLocationOptionTarget', api.extension.target, ); } const pickupLocationOptionTarget = useSubscription(api.target); const isTargetSelected = useSubscription(api.isTargetSelected); const pickupLocationOption = useMemo(() => { return { pickupLocationOptionTarget, isTargetSelected, }; }, [pickupLocationOptionTarget, isTargetSelected]); return pickupLocationOption; } ### PickupLocationOption ### code value: `string` The code of the delivery option. ### description value: `string` The description of the delivery option. ### handle value: `string` The unique identifier of the delivery option. ### location value: `PickupLocation` - PickupLocation: interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } The location details of the pickup location. ### metafields value: `Metafield[]` - Metafield: export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } The metafields associated with this delivery option. ### title value: `string` The title of the delivery option. ### type value: `"pickup"` The type of this delivery option. ### PickupLocation ### address value: `MailingAddress` - MailingAddress: export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: string; } The address of the pickup location. ### name value: `string` The name of the pickup location. ### MailingAddress ### address1 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### address2 value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### city value: `string` The buyer's city. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### company value: `string` The buyer's company name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### countryCode value: `CountryCode` - 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' 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### firstName value: `string` The buyer's first name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### lastName value: `string` The buyer's last name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### name value: `string` The buyer's full name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### phone value: `string` The buyer's phone number. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### provinceCode value: `string` 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### zip value: `string` The buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). ### Metafield Metadata associated with the checkout. ### key value: `string` The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ### namespace value: `string` 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 value: `string | number` The information to be stored as metadata. ### valueType value: `'integer' | 'string' | 'json_string'` The metafield’s information type. ## Related - [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) - [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) - [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) - [Tutorials](/apps/checkout) ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ``` ## Examples The APIs for interacting with delivery and shipping options. > > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. ```jsx import { reactExtension, Text, useShippingOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', () => , ); function Extension() { const {shippingOptionTarget, isTargetSelected} = useShippingOptionTarget(); const title = shippingOptionTarget.title; return ( Shipping method: {title} is{' '} {isTargetSelected ? '' : 'not'} selected. ); } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.shipping-option-item.render-after', (root, {target, isTargetSelected}) => { const titleText = root.createText( `Shipping method title: ${target.current.title}`, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( `Shipping method title: ${updatedTarget.title}`, ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, Text, usePickupLocationOptionTarget, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-location-option-item.render-after', () => , ); function Extension() { const { isTargetSelected, pickupLocationOptionTarget, } = usePickupLocationOptionTarget(); const title = pickupLocationOptionTarget?.title; if (isTargetSelected) { return {title}; } return null; } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-location-option-item.render-after', (root, {isTargetSelected, target}) => { const titleText = root.createText( target.current.title, ); root.appendChild(titleText); target.subscribe((updatedTarget) => { titleText.updateText( updatedTarget.title || '', ); }); const selectedText = root.createText( getSelectedText(isTargetSelected), ); root.appendChild(selectedText); isTargetSelected.subscribe( (updatedSelected) => { selectedText.updateText( getSelectedText(updatedSelected), ); }, ); function getSelectedText(selected) { return selected ? 'Selected' : 'Not selected'; } }, ); ``` ```jsx import { reactExtension, useApi, useSubscription, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.pickup-point-list.render-before', () => , ); function Extension() { const {isLocationFormVisible} = useApi<'purchase.checkout.pickup-point-list.render-before'>(); const locationFormShown = useSubscription( isLocationFormVisible, ); if (locationFormShown) { return ( The customer is being asked to provide their location. ); } else { return ( Pickup points are being shown. ); } } ``` ```js import {extension} from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.pickup-point-list.render-before', (root, {isLocationFormVisible}) => { const content = root.createText( getTextContent( isLocationFormVisible.current, ), ); root.appendChild(content); isLocationFormVisible.subscribe( (updatedLocationFormVisible) => { content.updateText( getTextContent( updatedLocationFormVisible, ), ); }, ); function getTextContent( isLocationFormVisible, ) { if (isLocationFormVisible) { return 'The customer is being asked to provide their location.'; } else { return 'Pickup points are being shown.'; } } }, ); ``` ```jsx import { reactExtension, Banner, useDeliveryGroups, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { const deliveryGroups = useDeliveryGroups(); const deliveryOptions = deliveryGroups[0].deliveryOptions; return ( First delivery option:{' '} {deliveryOptions[0].title} ); } ```