purchase.thank-you.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 purchase.thank-you extension targets.

StatefulRemoteSubscribable<
>
required

Order information that's available post-checkout.

Was this section helpful?

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

Requires access to protected customer data.

Tip

> Metafields on an app reserved namespace cannot be accessed by Checkout UI extensions.

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

Was this section helpful?
purchase.thank-you.cart-line-item.render-after
Copy
import {
reactExtension,
Text,
useTarget,
} from '@shopify/ui-extensions-react/checkout';

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

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