Skip to main content

purchase.checkout.pickup-location-list.render-after
Target

Requires access to protected customer data for some properties.

A static extension target that is rendered after pickup location options.

Anchor to pickuplocationlistapiPickupLocationListApi

The API object provided to this and other pickup-location-list extension targets.

Anchor to isLocationFormVisible
isLocationFormVisible
StatefulRemoteSubscribable<boolean>
required

Whether the customer location input form is shown to the buyer.

Was this section helpful?

The API object provided to this and other purchase.checkout extension targets.

Anchor to applyAttributeChange
applyAttributeChange
(change: ) => Promise<>
required

Performs an update on an attribute attached to the cart and checkout. If successful, this mutation results in an update to the value retrieved through the attributes property.

Note

This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.

Anchor to applyCartLinesChange
applyCartLinesChange
(change: ) => Promise<>
required

Performs an update on the merchandise line items. It resolves when the new line items have been negotiated and results in an update to the value retrieved through the lines property.

Note

This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.

Anchor to applyDiscountCodeChange
applyDiscountCodeChange
(change: ) => Promise<>
required

Performs an update on the discount codes. It resolves when the new discount codes have been negotiated and results in an update to the value retrieved through the discountCodes property.

Caution

See security considerations if your extension retrieves discount codes through a network call.

Note

This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.

(change: ) => Promise<>
required

Performs an update on the gift cards. It resolves when gift card change have been negotiated and results in an update to the value retrieved through the appliedGiftCards property.

Caution

See security considerations if your extension retrieves gift card codes through a network call.

Note

This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.

Anchor to applyMetafieldChange
applyMetafieldChange
(change: ) => Promise<>
required

Performs an update on a piece of metadata attached to the checkout. If successful, this mutation results in an update to the value retrieved through the metafields property.

(change: ) => Promise<>
required

Performs an update on the note attached to the cart and checkout. If successful, this mutation results in an update to the value retrieved through the note property.

Note

This method will return an error if the buyer is using an accelerated checkout method, such as Apple Pay, Google Pay, or Meta Pay.

Anchor to applyShippingAddressChange
applyShippingAddressChange
(change: ) => Promise<>

Performs an update of the shipping address. Shipping address changes will completely overwrite the existing shipping address added by the user without any prompts. If successful, this mutation results in an update to the value retrieved through the shippingAddress property.

Requires access to protected customer data.

Was this section helpful?

The base API object provided to this and other purchase.checkout and purchase.thank-you extension targets.

required

Methods for interacting with Web Pixels, such as emitting an event.

StatefulRemoteSubscribable<[]>
required

Gift Cards that have been applied to the checkout.

StatefulRemoteSubscribable<[]>
required

The metafields requested in the shopify.extension.toml file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.

Requires access to protected customer data.

Tip

Cart metafields are only available on carts created via the Storefront API version 2023-04 or later.*

StatefulRemoteSubscribable<[] | undefined>
required

Custom attributes left by the customer to the merchant, either in their cart or during checkout.

Anchor to availablePaymentOptions
availablePaymentOptions
StatefulRemoteSubscribable<[]>
required

All available payment options.

required

Provides details on the buyer's progression through the checkout.

See buyer journey examples for more information.

StatefulRemoteSubscribable<>
required

Settings applied to the buyer's checkout.

StatefulRemoteSubscribable< | undefined>
required

A stable id that represents the current checkout.

Matches the token field in the WebPixel checkout payload and the checkout_token field in the Admin REST API Order resource.

required

Details on the costs the buyer will pay for this checkout.

StatefulRemoteSubscribable<[]>
required

A list of delivery groups containing information about the delivery of the items the customer intends to purchase.

StatefulRemoteSubscribable<[]>
required

A list of discount codes currently applied to the checkout.

StatefulRemoteSubscribable<[]>
required

Discounts that have been applied to the entire cart.

<Target>
required

Meta information about the extension.

required

Utilities for translating content and formatting values according to the current localization of the checkout.

See localization examples for more information.

StatefulRemoteSubscribable<[]>
required

A list of lines containing information about the items the customer intends to purchase.

required

Details about the location, language, and currency of the buyer. For utilities to easily format and translate content based on these details, you can use the i18n object instead.

StatefulRemoteSubscribable<[]>
required

The metafields that apply to the current checkout.

Metafields are stored locally on the client and are applied to the order object after the checkout completes.

These metafields are shared by all extensions running on checkout, and persist for as long as the customer is working on this checkout.

Once the order is created, you can query these metafields using the GraphQL Admin API

StatefulRemoteSubscribable<string | undefined>
required

A note left by the customer to the merchant, either in their cart or during checkout.

<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>
required

Used to query the Storefront GraphQL API with a prefetched token.

See storefront api access examples for more information.

Anchor to selectedPaymentOptions
selectedPaymentOptions
StatefulRemoteSubscribable<[]>
required

Payment options selected by the buyer.

required

Provides access to session tokens, which can be used to verify token claims on your app's server.

See session token examples for more information.

StatefulRemoteSubscribable<>
required

The settings matching the settings definition written in the shopify.extension.toml file.

See settings examples for more information.

Note

When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.

required

Shop where the checkout is taking place.

required

Key-value storage for the extension. Uses localStorage and should persist across the buyer's current checkout session. However, data persistence isn't guaranteed and storage is reset when the buyer starts a new checkout.

Data is shared across all activated extension targets of this extension. In versions <=2023-07, each activated extension target had its own storage.

required

Methods to interact with the extension's UI.

required

The renderer version being used for the extension.

Information about the buyer that is interacting with the checkout.

Requires access to protected customer data.

StatefulRemoteSubscribable< | undefined>

The proposed buyer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke. An address value is only present if delivery is required. Otherwise, the subscribable value is undefined.

Requires access to protected customer data.

StatefulRemoteSubscribable< | undefined>

The proposed buyer billing address. The address updates when the field is committed (on change) rather than every keystroke.

Requires access to protected customer data.

Target
required

The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.

Deprecated

Deprecated as of version 2023-07, use extension.target instead.

Was this section helpful?

Purchase.checkout.pickup-location-list.render-after

import {
reactExtension,
Checkbox,
useApplyAttributeChange,
} from '@shopify/ui-extensions-react/checkout';

// 1. Choose an extension target
export default reactExtension(
'purchase.checkout.pickup-location-list.render-after',
() => <Extension />,
);

function Extension() {
const applyAttributeChange =
useApplyAttributeChange();

// 2. Render a UI
return (
<Checkbox onChange={onCheckboxChange}>
I would like to receive a free gift with my
order
</Checkbox>
);

// 3. Call API methods to modify the checkout
async function onCheckboxChange(isChecked) {
const result = await applyAttributeChange({
key: 'requestedFreeGift',
type: 'updateAttribute',
value: isChecked ? 'yes' : 'no',
});
console.log(
'applyAttributeChange result',
result,
);
}
}