Shopify Checkout UI Extensions

https://shopify.dev/docs/api/checkout-ui-extensions/latest/
Admin
Shopify Checkout UI Extensions enable app developers to build custom functionality at defined points...
Tokens:163,088
Snippets:1,774
Trust Score:10
Update:5 months ago
Show doc for...
Tokens:
Raw
### Storage Example (Preact)

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/storage-api

Example demonstrating how to use the Storage API within a Preact extension to cache user consent.

```APIDOC
### Storage Example

#### Preact

```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useEffect, useState} from 'preact/hooks';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const {storage} = shopify;
  const [tosConsent, setTosConsent] =
    useState(false);

  useEffect(() => {
    async function readFromStorage() {
      const tosConsent = await storage.read(
        'tos-consent',
      );

      setTosConsent(Boolean(tosConsent));
    }

    readFromStorage();
  }, [storage]);

  async function cacheConsent(value: boolean) {
    setTosConsent(value);
    await storage.write('tos-consent', value);
  }

  return (
    <s-checkbox
      checked={tosConsent}
      onChange={() => cacheConsent(!tosConsent)}
      label="I agree with the terms of service"
    />
  );
}
```
```

--------------------------------

### Example Setting Type

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

The 'type' property specifies the kind of data a setting will store. This example shows a single-line text field.

```json
"single_line_text_field"
```

--------------------------------

### Date Setting Example

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

Example value for a date setting type, formatted in ISO 8601 without a time zone.

```json
2022-02-02
```

--------------------------------

### Multi Line Text Field Setting Example

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

Example value for a multi_line_text_field setting type, demonstrating multiple lines.

```json
Canada  
United States  
Brazil  
Australia
```

--------------------------------

### Variant Reference Setting Example

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

Example value for a variant_reference setting type, using a globally-unique identifier (GID) for a product variant.

```json
gid://shopify/ProductVariant/1
```

--------------------------------

### Date Time Setting Example

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

Example value for a date_time setting type, formatted in ISO 8601 without a time zone.

```json
2022-01-01T12:30:00
```

--------------------------------

### Single Line Text Field Setting Example

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

Example value for a single_line_text_field setting type.

```json
Canada
```

--------------------------------

### Example: Applying a Discount Code

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-instructions-api

Demonstrates how to check if discount codes can be updated and then apply a discount code using `applyDiscountCodeChange()`.

```APIDOC
## Discounts

### Description
Check `instructions.discounts.canUpdateDiscountCodes` before calling `applyDiscountCodeChange()`.

### Preact Example
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  if (
    shopify.instructions.value.discounts
      .canUpdateDiscountCodes
  ) {
    return (
      <s-button
        onClick={() =>
          shopify.applyDiscountCodeChange({
            type: 'addDiscountCode',
            code: 'FREE_SHIPPING',
          })
        }
      >
        Apply your loyalty discount
      </s-button>
    );
  } else {
    return (
      <s-banner tone="warning">
        Loyalty discounts are unavailable
      </s-banner>
    );
  }
}
```
```

--------------------------------

### Boolean Setting Example

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

Example value for a boolean setting type, representing a true or false state.

```json
true
```

--------------------------------

### Example Setting Description

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

The 'description' property offers additional guidance to the merchant about the setting's purpose, displayed in the checkout editor.

```json
"Enter a title for the banner."
```

--------------------------------

### Accessing Properties (Preact Example)

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

Demonstrates how to access shop properties within a Preact extension, utilizing the global `shopify` object.

```APIDOC
## Preact Example: Accessing Properties

### Description
This example shows how to access shop properties within a Preact extension. As of version 2025-10, the full API object is accessible via the global `shopify` object, eliminating the need for the `useApi` hook.

### Code
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  // As of version 2025-10, you no longer need the `useApi` hook.
  // The full API object is accessible via the global `shopify` object.
  return (
    <s-text>Shop name: {shopify.shop.name}</s-text>
  );
}
```
```

--------------------------------

### Example Setting Validations

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

The 'validations' property defines constraints for a setting's input. This example limits the input to a maximum of 25 characters.

```json
validations: {
 name = "max",
 value = "25"
}
```

--------------------------------

### Number Integer Setting Example

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

Example value for a number_integer setting type, representing a whole number within the allowed range.

```json
10
```

--------------------------------

### Displaying Cart Line Merchandise Title (Preact Example)

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-lines-api

An example demonstrating how to render the title of the merchandise associated with a cart line using a Preact extension.

```APIDOC
## Example: Displaying Cart Line Merchandise Title

### Description
This example shows how to access and display the `title` of the `merchandise` for a cart line within a Shopify UI extension using Preact.

### Method
This is a client-side rendering example using Preact.

### Code
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-text>
      Line item title:{' '}
      {shopify.target.value.merchandise.title}
    </s-text>
  );
}
```
```

--------------------------------

### Example Setting Name

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

The 'name' property provides a human-readable label for the setting, displayed to the merchant in the checkout editor.

```json
"Banner title"
```

--------------------------------

### Example Setting Key

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

The 'key' property uniquely identifies a setting. This value is used to access the merchant-configured setting within your extension.

```json
"banner_title"
```

--------------------------------

### Number Decimal Setting Example

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

Example value for a number_decimal setting type, representing a number with decimal places within the allowed range.

```json
10.4
```

--------------------------------

### useBuyerJourneyIntercept

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/buyer-journey-api

Installs a function for intercepting and preventing progress on checkout. To block checkout progress, you must set the block_progress capability in your extension's configuration. If you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension. `useBuyerJourneyIntercept()` should be called at the top level of the extension, not within an embedded or child component, to avoid errors should the child component get destroyed. It is good practice to show a warning in the checkout editor when the merchant has not given permission for your extension to block checkout progress.

```APIDOC
## useBuyerJourneyIntercept(interceptor)

### Description
Installs a function for intercepting and preventing progress on checkout.

### Parameters
#### Path Parameters
- **interceptor** (Interceptor) - Required - The function to intercept checkout progress.

### Returns
**void**
```

--------------------------------

### Get All Checkout Steps

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/buyer-journey-api

Retrieve all possible steps the buyer can take to complete checkout. These steps vary based on checkout type and shop configuration.

```typescript
SubscribableSignalLike<BuyerJourneyStep[]>
```

--------------------------------

### Example: Updating Custom Attributes

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-instructions-api

Shows how to check if custom attributes can be updated and then apply an attribute change using `applyAttributeChange()`.

```APIDOC
## Attributes

### Description
Check `instructions.attributes.canUpdateAttributes` before calling `applyAttributeChange()`.

### Preact Example
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  if (
    shopify.instructions.value.attributes
      .canUpdateAttributes
  ) {
    return (
      <s-button
        onClick={() =>
          shopify.applyAttributeChange({
            type: 'updateAttribute',
            key: 'loyaltyPoints',
            value: '100',
          })
        }
      >
        Apply 100 loyalty points
      </s-button>
    );
  } else {
    return (
      <s-banner tone="warning">
        Loyalty points are unavailable
      </s-banner>
    );
  }
}
```
```

--------------------------------

### Apply Discount Code with Preact

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-instructions-api

Check `instructions.discounts.canUpdateDiscountCodes` before calling `applyDiscountCodeChange()`. This example demonstrates how to conditionally render a button to apply a discount code.

```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  if (
    shopify.instructions.value.discounts
      .canUpdateDiscountCodes
  ) {
    return (
      <s-button
        onClick={() =>
          shopify.applyDiscountCodeChange({
            type: 'addDiscountCode',
            code: 'FREE_SHIPPING',
          })
        }
      >
        Apply your loyalty discount
      </s-button>
    );
  } else {
    return (
      <s-banner tone="warning">
        Loyalty discounts are unavailable
      </s-banner>
    );
  }
}

```

--------------------------------

### Get attribute values with useAttributeValues

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/attributes-api

Use `useAttributeValues` to retrieve the values of specified attributes. This example shows how to get the values for 'buyerSelectedFreeTShirt' and 'tshirtSize'.

```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
  
import {useAttributeValues} from '@shopify/ui-extensions/checkout/preact';
  
export default function extension() {
render(<Extension />, document.body);
}
  
function Extension() {
const [buyerSelectedFreeTShirt, tshirtSize] = 
useAttributeValues([
'buyerSelectedFreeTShirt',
'tshirtSize',
]);
  
if (Boolean(buyerSelectedFreeTShirt) === true) {
return (
<s-text>
You selected a free t-shirt, size:{' '}
{tshirtSize}
</s-text>
);
}
  
return null;
}
```

--------------------------------

### Use App Owned Metafields (Preact Example)

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/metafields-api

Demonstrates how to use app-owned metafields within a Preact checkout extension. This allows your app to manage custom data for products.

```APIDOC
## Use App Owned Metafields (Preact)

### Description
Use the `$app` format to request metafields that are owned by your app in your extension configuration file. Your app exclusively controls structure, data, permissions and optional features for this type of metafield.

### Preact Code
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

import {useAppMetafields} from '@shopify/ui-extensions/checkout/preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const [energyRating] = useAppMetafields({
    namespace: '$app',
    key: 'energy-rating',
    type: 'product',
  }).filter(
    (entry) =>
      entry.target.id ===
      shopify.target.value.merchandise.id,
  );

  return (
    energyRating && (
      <s-text>
        Energy rating:{' '}
        {energyRating.metafield.value}
      </s-text>
    )
  );
}
```
```

--------------------------------

### Delivery group example

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/delivery-api

Example of how to use the `useDeliveryGroup` hook to display the title of the first selected delivery option.

```APIDOC
## Delivery group

### Description
This example demonstrates how to use the `useDeliveryGroup` hook to retrieve and display the title of the first delivery option within the first delivery group.

### Code
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

import {useDeliveryGroup} from '@shopify/ui-extensions/checkout/preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const firstDeliveryGroup = useDeliveryGroup(
    shopify.deliveryGroups.value[0],
  );

  if (!firstDeliveryGroup) {
    return null;
  }

  const selectedDeliveryOption =
    firstDeliveryGroup?.selectedDeliveryOption;

  return (
    <s-banner>
      Selected delivery option:{' '}
      {selectedDeliveryOption?.title}
    </s-banner>
  );
}

```
```

--------------------------------

### Using a Session Token with fetch()

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/session-token-api

Demonstrates how to use a session token obtained from `shopify.sessionToken.get()` to authenticate requests to your application server using the `fetch` API.

```APIDOC
## Using a session token with fetch()

### Description
You can request a session token from Shopify to use on your application server. The contents of the token claims are signed using your shared app secret so you can trust the claims came from Shopify unaltered. Note: You will need to [enable the `network_access` capability](/docs/api/checkout-ui-extensions/configuration#network-access) to use `fetch()`.

### Preact Example
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useEffect} from 'preact/hooks';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const {sessionToken} = shopify;

  useEffect(() => {
    async function queryApi() {
      // Request a new (or cached) session token from Shopify
      const token =
        await shopify.sessionToken.get();
      console.log('sessionToken.get()', token);

      const apiResponse =
        await fetchWithToken(token);
      // Use your response
      console.log('API response', apiResponse);
    }

    function fetchWithToken(token) {
      const result = fetch(
        'https://myapp.com/api/session-token',
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );
      return result;
    }

    queryApi();
  }, [sessionToken]);

  return (
    <s-banner>
      See console for API response
    </s-banner>
  );
}
```
```

--------------------------------

### RenderExtension<PickupLocationListApi & CheckoutApi & StandardApi<'purchase.checkout.pickup-location-list.render-before'>, AnyCheckoutComponent>

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

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

```APIDOC
## RenderExtension<PickupLocationListApi & CheckoutApi & StandardApi<'purchase.checkout.pickup-location-list.render-before'>, AnyCheckoutComponent>

### Description
A static extension target that is rendered before pickup location options.

### Method
Not applicable (Extension Target)

### Endpoint
Not applicable (Extension Target)

### Parameters
Not applicable

### Request Example
Not applicable

### Response
Not applicable
```

--------------------------------

### purchase.checkout.actions.render-before

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

A static extension target that is rendered immediately before any actions within each step.

```APIDOC
## purchase.checkout.actions.render-before

### Description
A static extension target that is rendered immediately before any actions within each step.

### Method
RenderExtension

### Endpoint
purchase.checkout.actions.render-before

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### RenderExtension<PickupPointListApi & CheckoutApi & StandardApi<'purchase.checkout.pickup-point-list.render-before'>, AnyCheckoutComponent>

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

A static extension target that is rendered immediately before the pickup points.

```APIDOC
## RenderExtension<PickupPointListApi & CheckoutApi & StandardApi<'purchase.checkout.pickup-point-list.render-before'>, AnyCheckoutComponent>

### Description
A static extension target that is rendered immediately before the pickup points.

### Method
Not applicable (Extension Target)

### Endpoint
Not applicable (Extension Target)

### Parameters
Not applicable

### Request Example
Not applicable

### Response
Not applicable
```

--------------------------------

### RenderExtension<PickupLocationListApi & CheckoutApi & StandardApi<'purchase.checkout.pickup-location-list.render-after'>, AnyCheckoutComponent>

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

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

```APIDOC
## RenderExtension<PickupLocationListApi & CheckoutApi & StandardApi<'purchase.checkout.pickup-location-list.render-after'>, AnyCheckoutComponent>

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

### Method
Not applicable (Extension Target)

### Endpoint
Not applicable (Extension Target)

### Parameters
Not applicable

### Request Example
Not applicable

### Response
Not applicable
```

--------------------------------

### Install Interceptor

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/buyer-journey-api

Installs a function to intercept and potentially block checkout progress. Requires the 'block_progress' capability to be set. Returns a teardown function to remove the interceptor.

```typescript
intercept: (interceptor: Interceptor) => Promise<() => void>
```

--------------------------------

### useInstructions()

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-instructions-api

Hook to retrieve cart instructions, which indicate the capabilities for modifying the cart. This is crucial for understanding limitations imposed by the checkout configuration or accelerated checkout flows.

```APIDOC
## useInstructions()

### Description
Returns the cart instructions used to create the checkout and possibly limit extension capabilities.

### Returns
**CartInstructions**

### CartInstructions

#### AttributesCartInstructions

##### canUpdateAttributes
(boolean) - Whether attributes can be updated using `applyAttributeChange()`. When `false`, the checkout configuration doesn't allow attribute changes. Even when `true`, calls to `applyAttributeChange()` can still fail during accelerated checkout (Apple Pay, Google Pay).

#### DeliveryCartInstructions

##### canSelectCustomAddress
(boolean) - Whether the shipping address can be modified using `applyShippingAddressChange()`. When `false`, the buyer is using an accelerated checkout flow (Apple Pay, Google Pay) where the address can't be changed.

#### DiscountsCartInstructions

##### canUpdateDiscountCodes
(boolean) - Whether discount codes can be updated using `applyDiscountCodeChange()`. When `false`, the checkout configuration doesn't allow discount code changes. Even when `true`, calls to `applyDiscountCodeChange()` can still fail during accelerated checkout (Apple Pay, Google Pay).

#### CartLinesCartInstructions

##### canAddCartLine
(boolean) - Whether new cart lines can be added using `applyCartLinesChange()`. When `false`, the checkout configuration doesn't allow adding lines (for example, draft orders). Even when `true`, calls can still fail during accelerated checkout (Apple Pay, Google Pay).

##### canRemoveCartLine
(boolean) - Whether cart lines can be removed using `applyCartLinesChange()`. When `false`, the checkout configuration doesn't allow removing lines. Even when `true`, calls can still fail during accelerated checkout.

##### canUpdateCartLine
(boolean) - Whether cart lines can be updated using `applyCartLinesChange()`. When `false`, the checkout configuration doesn't allow updating lines. Even when `true`, calls can still fail during accelerated checkout.

#### MetafieldsCartInstructions

##### canDeleteCartMetafield
(boolean) - Whether the extension can delete cart metafields using `applyMetafieldChange()`.

##### canSetCartMetafields
(boolean) - Whether the extension can add or update cart metafields using `applyMetafieldChange()`.

#### NotesCartInstructions

##### canUpdateNote
(boolean) - Whether the order note can be updated using `applyNoteChange()`. When `false`, the checkout configuration doesn't allow note changes. Even when `true`, calls to `applyNoteChange()` can still fail during accelerated checkout (Apple Pay, Google Pay).
```

--------------------------------

### Read localized fields (Preact Example)

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/localized-fields-api

Example demonstrating how to use the `useLocalizedField` hook to access and validate a localized tax ID field within a Preact checkout extension.

```APIDOC
## Examples

### Read localized fields

#### Preact
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {
 useBuyerJourneyIntercept,
 useLocalizedField,
} from '@shopify/ui-extensions/checkout/preact';

export default function extension() {
 render(<Extension />, document.body);
}

function Extension() {
 // 1. Access localized field
 const taxIdField = useLocalizedField(
 'TAX_CREDENTIAL_BR',
 );

 // 2. Validate localized field value
 useBuyerJourneyIntercept(
 ({canBlockProgress}) => {
 return canBlockProgress &&
 taxIdField &&
 (!taxIdField.value ||
 taxIdField.value.length > 10)
 ? {
 behavior: 'block',
 reason: 'Invalid tax ID',
 errors: [
 {
 message: `${taxIdField.title} is required and
cannot exceed 10 characters in length`,
 // Show an error under the field
 target: `$.cart.localizedField.${taxIdField.key}`,
 },
 ],
 }
 : undefined;
 },
 );

 return (
 <>
 {/* Render UI elements using taxIdField.title and taxIdField.value */}
 </>
 );
}
```
```

--------------------------------

### Get the function to apply note changes

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/note-api

Use the `useApplyNoteChange` hook to get a function that can mutate the checkout's note property. This function accepts a `NoteChange` object to either update or remove the note.

```typescript
const applyNoteChange = useApplyNoteChange();
```

--------------------------------

### instructions

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-instructions-api

The cart instructions used to create the checkout and possibly limit extension capabilities. These instructions should be checked before performing any actions that might 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.

```APIDOC
## instructions

### Description
Provides cart instructions to determine available actions and capabilities for extensions.

### Type
`SubscribableSignalLike<CartInstructions>`

### Required
`required`

### Details
The cart instructions are used to create the checkout and may limit extension capabilities. It's recommended to check these instructions before performing actions that might be affected by them. For instance, before applying a discount code using `applyDiscountCodeChange`, verify `discounts.canUpdateDiscountCodes` to confirm support for this checkout.

**Caution:** As of version `2024-07`, UI extension code must check for instructions before calling select APIs in case those APIs aren't available. Refer to the update guide for more information.
```

--------------------------------

### Get Session Token

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/session-token-api

Requests a session token that hasn't expired. Call this method every time you need to make a request to your backend to get a valid token. This method returns cached tokens when possible.

```typescript
() => Promise<string>
```

--------------------------------

### RenderExtension for Checkout::PickupLocations::RenderBefore

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

Register an extension to render before pickup location options. Requires PickupLocationListApi, CheckoutApi, and StandardApi.

```typescript
RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupLocations::RenderBefore'>,
    AnyCheckoutComponent
  >
```

--------------------------------

### Checkout::PickupLocations::RenderBefore

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

A static extension target rendered before the pickup locations.

```APIDOC
## Checkout::PickupLocations::RenderBefore

### Description
A static extension target that is rendered immediately before the pickup locations.

### Method
RenderExtension

### Endpoint
Checkout::PickupLocations::RenderBefore

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Get Billing Address

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/addresses-api

Returns the proposed billing address applied to the checkout.

```typescript
useBillingAddress()
```

--------------------------------

### Get Shipping Address

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/addresses-api

Returns the proposed shipping address applied to the checkout.

```typescript
useShippingAddress()
```

--------------------------------

### Hook to get discount codes

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/discounts-api

Returns the current discount codes applied to the cart.

```typescript
useDiscountCodes()
```

--------------------------------

### RenderExtension<PickupPointListApi & CheckoutApi & StandardApi<'purchase.checkout.pickup-point-list.render-after'>, AnyCheckoutComponent>

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

A static extension target that is rendered immediately after the pickup points.

```APIDOC
## RenderExtension<PickupPointListApi & CheckoutApi & StandardApi<'purchase.checkout.pickup-point-list.render-after'>, AnyCheckoutComponent>

### Description
A static extension target that is rendered immediately after the pickup points.

### Method
Not applicable (Extension Target)

### Endpoint
Not applicable (Extension Target)

### Parameters
Not applicable

### Request Example
Not applicable

### Response
Not applicable
```

--------------------------------

### Checkout::PickupPoints::RenderBefore

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

A static extension target rendered before the pickup points.

```APIDOC
## Checkout::PickupPoints::RenderBefore

### Description
A static extension target that is rendered immediately before the pickup points.

### Method
RenderExtension

### Endpoint
Checkout::PickupPoints::RenderBefore

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Hook to get discount allocations

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/discounts-api

Returns the current discount allocations applied to the cart.

```typescript
useDiscountAllocations()
```

--------------------------------

### Money Amount

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

The decimal amount of the price. For example, 29.99 represents twenty-nine dollars and ninety-nine cents.

```typescript
number
```

--------------------------------

### Delivery groups

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/delivery-api

Example of accessing and displaying the title of the first delivery option from the first delivery group.

```APIDOC
## Delivery groups

### Description
This example demonstrates how to access the `shopify.deliveryGroups.value` to retrieve and display the title of the first delivery option within the first delivery group.

### Code
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const deliveryGroups =
    shopify.deliveryGroups.value;
  return (
    <s-banner>
      First delivery option:{' '}
      {deliveryGroups[0].deliveryOptions[0].title}
    </s-banner>
  );
}

```
```

--------------------------------

### RenderExtension for Checkout::PickupPoints::RenderBefore

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

Use this to render content immediately before the pickup points. It requires `PickupPointListApi`, `CheckoutApi`, and `StandardApi` for `Checkout::PickupPoints::RenderBefore`.

```typescript
RenderExtension<
    PickupPointListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupPoints::RenderBefore'>,
    AnyCheckoutComponent
  >
```

--------------------------------

### Checkout::PickupLocations::RenderBefore

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

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

```APIDOC
## Checkout::PickupLocations::RenderBefore

### Description
This extension target is rendered before pickup location options.

### Method
Static Extension Target

### Endpoint
N/A (Extension Target)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response
- **component** (AnyCheckoutComponent) - The component to render.

#### Response Example
N/A
```

--------------------------------

### Extension Editor Information

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

Get information about the editor where the extension is being rendered. If undefined, the extension is not running in an editor.

```typescript
Editor
```

--------------------------------

### Currency.isoCode Property

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/localization-api

The three-letter currency code in ISO 4217 format. Examples include 'USD', 'EUR', or 'CAD'.

```typescript
CurrencyCode
```

--------------------------------

### Determine if the location input form is shown

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/delivery-api

Example of checking `shopify.isLocationFormVisible.value` to determine if the location input form is displayed.

```APIDOC
## Determine if the location input form is shown

### Description
This example shows how to check the `shopify.isLocationFormVisible.value` property to conditionally render different messages based on whether the customer is being prompted for their location or if pickup points are being displayed.

### Code
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  if (shopify.isLocationFormVisible.value) {
    return (
      <s-text>
        The customer is being asked to provide
        their location.
      </s-text>
    );
  } else {
    return (
      <s-text>
        Pickup points are being shown.
      </s-text>
    );
  }
}

```
```

--------------------------------

### StandardApi.availablePaymentOptions

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

Lists all payment options available to the buyer for the current checkout, including credit cards, wallets, and local payment methods, based on shop configuration and buyer's region.

```APIDOC
## StandardApi.availablePaymentOptions

### Description
All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region.

### Type
```javascript
SubscribableSignalLike<PaymentOption[]>
```
```

--------------------------------

### useExtension()

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/platform-apis/extension-api

Returns the metadata about the extension, including its API version, target, capabilities, and editor context. Use this to read configuration details or conditionally render content based on where the extension is running.

```APIDOC
## useExtension()

### Description
Returns the metadata about the extension.

### Returns
**Extension**

Metadata about the running extension, including its API version, target, capabilities, and editor context.

#### Properties
- **apiVersion** (ApiVersion): The API version that was set in the extension config file.
- **capabilities** (SubscribableSignalLike<Capability[]>): The allowed capabilities of the extension, defined in your shopify.extension.toml file.
  - `api_access`: the extension can access the Storefront API.
  - `network_access`: the extension can make external network calls.
  - `block_progress`: the extension can block a customer's progress and the merchant has allowed this blocking behavior.
  - `collect_buyer_consent.sms_marketing`: the extension can collect customer consent for SMS marketing.
  - `collect_buyer_consent.customer_privacy`: the extension can register customer consent decisions that are honored on Shopify-managed services.
  - `iframe.sources`: the extension can embed an external URL in an iframe.
- **rendered** (SubscribableSignalLike<boolean>): A Boolean to show whether your extension is currently rendered to the screen.
- **scriptUrl** (string): The URL to the script that started the extension target.
- **target** (Target): The identifier that specifies where in Shopify's UI your code is being injected.
- **editor** (Editor): Information about the editor where the extension is being rendered. If the value is undefined, then the extension isn't running in an editor.
  - **version** (string): The published version of the running extension target. For unpublished extensions, the value is `undefined`.
```

--------------------------------

### Get Apply Shipping Address Change Function

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/addresses-api

Returns a function to mutate the shipping address property of the checkout.

```typescript
useApplyShippingAddressChange()
```

--------------------------------

### RenderExtension for purchase.checkout.actions.render-before

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

Use this static extension target to render content immediately before any actions within each checkout step. It requires the appropriate `StandardApi` type.

```typescript
RenderExtension<
```

--------------------------------

### Reading the selected pickup location option

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/delivery-api

Example of how to use the `usePickupLocationOptionTarget` hook to display the title of the selected pickup location.

```APIDOC
## Reading the selected pickup location option

### Description
This example demonstrates how to retrieve and display the title of the currently selected pickup location using the `usePickupLocationOptionTarget` hook.

### Code
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

import {usePickupLocationOptionTarget} from '@shopify/ui-extensions/checkout/preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const {
    isTargetSelected,
    pickupLocationOptionTarget,
  } = usePickupLocationOptionTarget();

  const title = pickupLocationOptionTarget?.title;

  if (isTargetSelected) {
    return <s-text>{title}</s-text>;
  }

  return null;
}

```
```

--------------------------------

### RenderExtension for Checkout::PickupLocations::RenderAfter

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

Use this to create an extension that renders after pickup location options. Requires PickupLocationListApi, CheckoutApi, and StandardApi.

```typescript
RenderExtension<
    PickupLocationListApi &
      CheckoutApi &
      StandardApi<'Checkout::PickupLocations::RenderAfter'>,
    AnyCheckoutComponent
  >
```

--------------------------------

### RenderExtension<CheckoutApi & StandardApi<'purchase.checkout.reductions.render-before'>, AnyCheckoutComponent>

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

A static extension target that is rendered in the order summary, before the discount form element.

```APIDOC
## RenderExtension<CheckoutApi & StandardApi<'purchase.checkout.reductions.render-before'>, AnyCheckoutComponent>

### Description
A static extension target that is rendered in the order summary, before the discount form element.

### Method
Not applicable (Extension Target)

### Endpoint
Not applicable (Extension Target)

### Parameters
Not applicable

### Request Example
Not applicable

### Response
Not applicable
```

--------------------------------

### Example Settings Definition with Validation

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration

Defines a `banner_title` setting of type `single_line_text_field` with length validation between 5 and 20 characters.

```toml
[[extensions.settings.fields.validations]]
 name = "min"
 value = "5"
[[extensions.settings.fields.validations]]
 name = "max"
 value = "20"
```

--------------------------------

### RenderExtension for purchase.thank-you.customer-information.render-after

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

Use this for rendering below the customer information on the Thank you page.

```typescript
RenderExtension<
    OrderConfirmationApi &
      StandardApi<'purchase.thank-you.customer-information.render-after'>,
    AnyCheckoutComponent
  >
```

--------------------------------

### Checkout::PickupPoints::RenderAfter

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

A static extension target rendered after the pickup points.

```APIDOC
## Checkout::PickupPoints::RenderAfter

### Description
A static extension target that is rendered immediately after the pickup points.

### Method
RenderExtension

### Endpoint
Checkout::PickupPoints::RenderAfter

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Accessing Discount Codes

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

Gets the list of discount codes currently applied to the checkout. Use `applyDiscountCodeChange()` to modify this list.

```typescript
SubscribableSignalLike<CartDiscountCode[]>
```

--------------------------------

### Reading the selected shipping option

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/delivery-api

Example of how to use the `useShippingOptionTarget` hook to display the title of the selected shipping option and its selection status.

```APIDOC
## Reading the selected shipping option

### Description
This example demonstrates how to use the `useShippingOptionTarget` hook to retrieve the title of the selected shipping option and indicate whether it is currently selected.

### Code
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

import {useShippingOptionTarget} from '@shopify/ui-extensions/checkout/preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const {shippingOptionTarget, isTargetSelected} = 
    useShippingOptionTarget();
  const title = shippingOptionTarget.title;

  return (
    <s-text>
      Shipping method: {title} is{' '}
      {isTargetSelected ? '' : 'not'} selected.
    </s-text>
  );
}

```
```

--------------------------------

### Example: Modifying Shipping Address

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-instructions-api

Illustrates how to check if the shipping address can be modified and then apply a shipping address change using `applyShippingAddressChange()`.

```APIDOC
## Delivery

### Description
Check `instructions.delivery.canSelectCustomAddress` before calling `applyShippingAddressChange()`. When `true`, this instruction implies that extensions can change the shipping address.

### Preact Example
```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  if (
    shopify.instructions.value.delivery
      .canSelectCustomAddress
  ) {
    return (
      <s-button
        onClick={() =>
          shopify.applyShippingAddressChange({
            type: 'updateShippingAddress',
            address: {
              zip: '90201',
            },
          })
        }
      >
        Change your postal code
      </s-button>
    );
  } else {
    return (
      <s-banner tone="warning">
        Shipping address cannot be modified
      </s-banner>
    );
  }
}
```
```

--------------------------------

### Apply Attribute with Preact

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-instructions-api

Check `instructions.attributes.canUpdateAttributes` before calling `applyAttributeChange()`. This example shows how to conditionally apply loyalty points as a cart attribute.

```javascript
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  if (
    shopify.instructions.value.attributes
      .canUpdateAttributes
  ) {
    return (
      <s-button
        onClick={() =>
          shopify.applyAttributeChange({
            type: 'updateAttribute',
            key: 'loyaltyPoints',
            value: '100',
          })
        }
      >
        Apply 100 loyalty points
      </s-button>
    );
  } else {
    return (
      <s-banner tone="warning">
        Loyalty points are unavailable
      </s-banner>
    );
  }
}

```

--------------------------------

### useBuyerJourneySteps

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/buyer-journey-api

Returns all possible steps a buyer can take to complete the checkout. These steps may vary depending on the type of checkout or the shop's configuration.

```APIDOC
## useBuyerJourneySteps()

### Description
Returns all possible steps a buyer can take to complete the checkout.

### Returns
**BuyerJourneyStep[]** - An array of all possible buyer journey steps.
```

--------------------------------

### RenderExtension for Checkout::Reductions::RenderBefore

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

Use this extension target to render content before the discount form in the order summary. It requires `CheckoutApi` and `StandardApi` for `Checkout::Reductions::RenderBefore`.

```typescript
RenderExtension<
    CheckoutApi & StandardApi<'Checkout::Reductions::RenderBefore'>,
    AnyCheckoutComponent
  >
```

--------------------------------

### Checkout::PickupLocations::RenderAfter

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useextensionapi%28%29

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

```APIDOC
## Checkout::PickupLocations::RenderAfter

### Description
This extension target is rendered after pickup location options.

### Method
Static Extension Target

### Endpoint
N/A (Extension Target)

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response
- **component** (AnyCheckoutComponent) - The component to render.

#### Response Example
N/A
```

--------------------------------

### useCartLines()

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cart-lines-api

Hook to get the current line items for the checkout. Automatically re-renders the component when line items are added, removed, or updated.

```APIDOC
## useCartLines()

### Description
Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated.

### Returns
`CartLine[]` - An array of CartLine objects representing the items in the cart.
```

--------------------------------

### Get Subtotal Amount

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/target-apis/checkout-apis/cost-api

Retrieves the subtotal amount of items in the cart. This hook provides a `Money` object representing the current subtotal.

```javascript
const subtotal = useSubtotalAmount();
```

--------------------------------

### RenderExtension for purchase.checkout.actions.render-before

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

Use this extension target to render components before the actions in the checkout. Requires CheckoutApi and StandardApi.

```typescript
RenderExtension<
    CheckoutApi & StandardApi<'purchase.checkout.actions.render-before'>,
    AnyCheckoutComponent
  >
```

--------------------------------

### Accessing Extension Settings

Source: https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/useapi%28%29

Retrieves settings defined in the `shopify.extension.toml` file. Settings are empty until a merchant configures them and update in real-time.

```typescript
SubscribableSignalLike<ExtensionSettings>
```
Tokens:
Raw