Skip to main content

purchase.checkout.cart-line-item.render-after
Target

Requires access to protected customer data for some properties.

A static extension target that renders on every line item, inside the details under the line item properties element.

Caution

This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice.

The API object provided to this and other cart-line-item extension targets.

StatefulRemoteSubscribable<>
required

The cart line the extension is attached to. Until version 2023-04, this property was a StatefulRemoteSubscribable<PresentmentCartLine>.

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 cart instruction attributes.canUpdateAttributes is false, or 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 cart instruction lines.canAddCartLine is false, or 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 cart instruction discounts.canUpdateDiscountCodes is false, or 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.

Note

This method will return an error if the cart instruction metafields.canSetCartMetafields is false, or 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 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 cart instruction notes.canUpdateNote is false, or 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.

Note

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

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

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

StatefulRemoteSubscribable<[]>
required

Gift Cards that have been applied to the checkout.

Anchor to applyTrackingConsentChange
applyTrackingConsentChange
required

Allows setting and updating customer privacy consent settings and tracking consent metafields.

Note

Requires the customer_privacy capability to be set to true.

Requires access to protected customer data.

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.

App owned metafields are supported and are returned using the $app format. The fully qualified reserved namespace format such as app--{your-app-id}[--{optional-namespace}] is not supported. See app owned metafields for more information.

Requires access to protected customer data.

StatefulRemoteSubscribable<[] | undefined>
required

The 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.

Refer to 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 REST Admin API Order resource.

required

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

StatefulRemoteSubscribable<>
required

Customer privacy consent settings and a flag denoting if consent has previously been collected.

StatefulRemoteSubscribable<[]>
required

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

StatefulRemoteSubscribable<[]>
required

Discounts that have been applied to the entire cart.

StatefulRemoteSubscribable<[]>
required

A list of discount codes currently applied to the checkout.

<Target>
required

The meta information about the extension.

required

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

Refer to localization examples for more information.

StatefulRemoteSubscribable<>
required

The cart instructions used to create the checkout and possibly limit extension capabilities.

These instructions should be checked prior to performing any actions that may be affected by them.

For example, if you intend to add a discount code via the applyDiscountCodeChange method, check discounts.canUpdateDiscountCodes to ensure it's supported in this checkout.

Caution

As of version 2024-07, UI extension code must check for instructions before calling select APIs in case those APIs are not available. See the update guide for more information.

StatefulRemoteSubscribable<[]>
required

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

required

The details about the location, language, and currency of the customer. 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

Tip

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

StatefulRemoteSubscribable<string | undefined>
required

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

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

The method used to query the Storefront GraphQL API with a prefetched token.

Refer to Storefront API access examples for more information.

Anchor to selectedPaymentOptions
selectedPaymentOptions
StatefulRemoteSubscribable<[]>
required

Payment options selected by the buyer.

required

The session token providing a set of claims as a signed JSON Web Token (JWT).

The token has a TTL of 5 minutes.

If the previous token expires, this value will reflect a new session token with a new signature and expiry.

Refer to session token examples for more information.

StatefulRemoteSubscribable<>
required

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

Refer to 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

The shop where the checkout is taking place.

required

The key-value storage for the extension.

It uses localStorage and should persist across the customer's current checkout session.

Caution

Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout.

Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier, 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.

StatefulRemoteSubscribable< | undefined>

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

Requires access to protected customer data.

Information about the buyer that is interacting with the checkout.

Requires access to protected customer data.

StatefulRemoteSubscribable<[]>

The API for reading additional fields that are required in checkout under certain circumstances. For example, some countries require additional fields for customs information or tax identification numbers.

StatefulRemoteSubscribable< | undefined>

The proposed customer 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.

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.cart-line-item.render-after

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

export default reactExtension(
'purchase.checkout.cart-line-item.render-after',
() => <Extension />,
);

function Extension() {
const {
merchandise: {title},
} = useTarget();
return <Text>Line item title: {title}</Text>;
}