Choose a version:

Buyer Journey

The API for interacting with the buyer journey.

Anchor to standardapiStandardApi

The base API object provided to purchase extension targets.

Anchor to buyerJourney buyerJourney required: Provides details on the buyer's progression through the checkout.

Refer to buyer journey examples for more information.

BuyerJourney

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

activeStep

What step of checkout the buyer is currently on.

SubscribableSignalLike<BuyerJourneyStepReference | undefined>

completed
This subscribable value will be true if the buyer completed submitting their order. For example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order.
```
SubscribableSignalLike<boolean>
```
intercept
Installs a function for intercepting and preventing progress on checkout. This returns a promise that resolves to a teardown function. Calling the teardown function will remove the interceptor. To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#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. 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.
```
(interceptor: Interceptor) => Promise<() => void>
```
steps
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.
```
SubscribableSignalLike<BuyerJourneyStep[]>
```

SubscribableSignalLike

Represents a read-only value managed on the main thread that an extension can subscribe to. Example: Checkout uses this to manage the state of an object and communicate state changes to extensions running in a sandboxed web worker. This interface is compatible with [Preact's ReadonlySignal](https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709). Some fields are deprecated but still supported for backwards compatibility. In version 2025-10, [`StatefulRemoteSubscribable`](https://github.com/Shopify/remote-dom/blob/03929aa8418a89d41d294005f219837582718df8/packages/async-subscription/src/types.ts#L17) was replaced with `ReadonlySignalLike`. Checkout will remove the old fields some time in the future.

current
```
T
```
destroy
```
() => Promise<void>
```
subscribe
Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.
```
(fn: (value: T) => void) => () => void
```
value
The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.
```
T
```

BuyerJourneyStepReference

What step of checkout the buyer is currently on.

handle
The handle that uniquely identifies the buyer journey step.
```
BuyerJourneyStepHandle
```

BuyerJourneyStepHandle

| handle | Description | |---|---| | `cart` | The cart page. | | `checkout` | A one-page checkout, including Shop Pay. | | `information` | The contact information step of a three-page checkout. | | `shipping` | The shipping step of a three-page checkout. | | `payment` | The payment step of a three-page checkout. | | `review` | The step after payment where the buyer confirms the purchase. Not all shops are configured to have a review step. | | `thank-you` | The page displayed after the purchase, thanking the buyer. | | `unknown` | An unknown step in the buyer journey. |

'cart' | 'checkout' | 'information' | 'shipping' | 'payment' | 'review' | 'thank-you' | 'unknown'

Interceptor

A function for intercepting and preventing navigation on checkout. You can block navigation by returning an object with `{behavior: 'block', reason: InvalidResultReason.InvalidExtensionState, errors?: ValidationErrors[]}`. If you do, then you're expected to also update some part of your UI to reflect the reason why navigation was blocked, either by targeting checkout UI fields, passing errors to the page level or rendering the errors in your extension.

interceptorProps
```
InterceptorProps
```

InterceptorRequest | Promise<InterceptorRequest>

InterceptorRequest | Promise<InterceptorRequest>

InterceptorProps

canBlockProgress
Whether the interceptor has the capability to block a buyer's progress through checkout. This ability might be granted by a merchant in differing checkout contexts.
```
boolean
```

InterceptorRequest

InterceptorRequestAllow | InterceptorRequestBlock

InterceptorRequestAllow

behavior
Indicates that the interceptor will allow the buyer's journey to continue.
```
'allow'
```
perform
This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.
```
(result: InterceptorResult) => void | Promise<void>
```

InterceptorResult

InterceptorResultAllow | InterceptorResultBlock

InterceptorResultAllow

behavior
Indicates that the buyer was allowed to progress through checkout.
```
'allow'
```

InterceptorResultBlock

behavior
Indicates that some part of the checkout UI intercepted and prevented the buyer’s progress. The buyer typically needs to take some action to resolve this issue and to move on to the next step.
```
'block'
```

InterceptorRequestBlock

behavior
Indicates that the interceptor will block the buyer's journey from continuing.
```
'block'
```
errors
Used to pass errors to the checkout UI, outside your extension's UI boundaries.
```
ValidationError[]
```
perform
This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.
```
(result: InterceptorResult) => void | Promise<void>
```
reason
The reason for blocking the interceptor request. This value isn't presented to the buyer, so it doesn't need to be localized. The value is used only for Shopify’s own internal debugging and metrics.
```
string
```

ValidationError

message
Error message to be displayed to the buyer.
```
string
```
target
The checkout UI field that the error is associated with. Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode` See the [supported targets](/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets) for more information.
```
string
```

BuyerJourneyStep

disabled
The disabled state of the buyer journey step. This value will be true if the buyer has not reached the step yet. For example, if the buyer has not reached the `shipping` step yet, `shipping` would be disabled.
```
boolean
```
handle
The handle that uniquely identifies the buyer journey step.
```
BuyerJourneyStepHandle
```
label
The localized label of the buyer journey step.
```
string
```
to
The url of the buyer journey step. This property leverages the `shopify:` protocol E.g. `shopify:cart` or `shopify:checkout/information`.
```
string
```

Anchor to useBuyerJourney
useBuyerJourney()

Returns the buyerJourney details on buyer progression in checkout.

Anchor to useBuyerJourney-returnsReturns

BuyerJourney

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

activeStep < | undefined>: What step of checkout the buyer is currently on.
completed <boolean>: This subscribable value will be true if the buyer completed submitting their order.

For example, when viewing the Order status page after submitting payment, the buyer will have completed their order.
intercept (interceptor: ) => Promise<() => void>: Installs a function for intercepting and preventing progress on checkout.

This returns a promise that resolves to a teardown function. Calling the teardown function will remove the interceptor.

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.

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.
steps <[]>: 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.

BuyerJourney

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

activeStep

What step of checkout the buyer is currently on.

SubscribableSignalLike<BuyerJourneyStepReference | undefined>

completed
This subscribable value will be true if the buyer completed submitting their order. For example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order.
```
SubscribableSignalLike<boolean>
```
intercept
Installs a function for intercepting and preventing progress on checkout. This returns a promise that resolves to a teardown function. Calling the teardown function will remove the interceptor. To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#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. 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.
```
(interceptor: Interceptor) => Promise<() => void>
```
steps
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.
```
SubscribableSignalLike<BuyerJourneyStep[]>
```

SubscribableSignalLike

Represents a read-only value managed on the main thread that an extension can subscribe to. Example: Checkout uses this to manage the state of an object and communicate state changes to extensions running in a sandboxed web worker. This interface is compatible with [Preact's ReadonlySignal](https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709). Some fields are deprecated but still supported for backwards compatibility. In version 2025-10, [`StatefulRemoteSubscribable`](https://github.com/Shopify/remote-dom/blob/03929aa8418a89d41d294005f219837582718df8/packages/async-subscription/src/types.ts#L17) was replaced with `ReadonlySignalLike`. Checkout will remove the old fields some time in the future.

current
```
T
```
destroy
```
() => Promise<void>
```
subscribe
Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.
```
(fn: (value: T) => void) => () => void
```
value
The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.
```
T
```

BuyerJourneyStepReference

What step of checkout the buyer is currently on.

handle
The handle that uniquely identifies the buyer journey step.
```
BuyerJourneyStepHandle
```

BuyerJourneyStepHandle

| handle | Description | |---|---| | `cart` | The cart page. | | `checkout` | A one-page checkout, including Shop Pay. | | `information` | The contact information step of a three-page checkout. | | `shipping` | The shipping step of a three-page checkout. | | `payment` | The payment step of a three-page checkout. | | `review` | The step after payment where the buyer confirms the purchase. Not all shops are configured to have a review step. | | `thank-you` | The page displayed after the purchase, thanking the buyer. | | `unknown` | An unknown step in the buyer journey. |

'cart' | 'checkout' | 'information' | 'shipping' | 'payment' | 'review' | 'thank-you' | 'unknown'

Interceptor

A function for intercepting and preventing navigation on checkout. You can block navigation by returning an object with `{behavior: 'block', reason: InvalidResultReason.InvalidExtensionState, errors?: ValidationErrors[]}`. If you do, then you're expected to also update some part of your UI to reflect the reason why navigation was blocked, either by targeting checkout UI fields, passing errors to the page level or rendering the errors in your extension.

interceptorProps
```
InterceptorProps
```

InterceptorRequest | Promise<InterceptorRequest>

InterceptorRequest | Promise<InterceptorRequest>

InterceptorProps

canBlockProgress
Whether the interceptor has the capability to block a buyer's progress through checkout. This ability might be granted by a merchant in differing checkout contexts.
```
boolean
```

InterceptorRequest

InterceptorRequestAllow | InterceptorRequestBlock

InterceptorRequestAllow

behavior
Indicates that the interceptor will allow the buyer's journey to continue.
```
'allow'
```
perform
This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.
```
(result: InterceptorResult) => void | Promise<void>
```

InterceptorResult

InterceptorResultAllow | InterceptorResultBlock

InterceptorResultAllow

behavior
Indicates that the buyer was allowed to progress through checkout.
```
'allow'
```

InterceptorResultBlock

behavior
Indicates that some part of the checkout UI intercepted and prevented the buyer’s progress. The buyer typically needs to take some action to resolve this issue and to move on to the next step.
```
'block'
```

InterceptorRequestBlock

behavior
Indicates that the interceptor will block the buyer's journey from continuing.
```
'block'
```
errors
Used to pass errors to the checkout UI, outside your extension's UI boundaries.
```
ValidationError[]
```
perform
This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.
```
(result: InterceptorResult) => void | Promise<void>
```
reason
The reason for blocking the interceptor request. This value isn't presented to the buyer, so it doesn't need to be localized. The value is used only for Shopify’s own internal debugging and metrics.
```
string
```

ValidationError

message
Error message to be displayed to the buyer.
```
string
```
target
The checkout UI field that the error is associated with. Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode` See the [supported targets](/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets) for more information.
```
string
```

BuyerJourneyStep

disabled
The disabled state of the buyer journey step. This value will be true if the buyer has not reached the step yet. For example, if the buyer has not reached the `shipping` step yet, `shipping` would be disabled.
```
boolean
```
handle
The handle that uniquely identifies the buyer journey step.
```
BuyerJourneyStepHandle
```
label
The localized label of the buyer journey step.
```
string
```
to
The url of the buyer journey step. This property leverages the `shopify:` protocol E.g. `shopify:cart` or `shopify:checkout/information`.
```
string
```

Anchor to useBuyerJourneyCompleted
useBuyerJourneyCompleted()

Returns true if the buyer completed submitting their order. For example, when viewing the Order status page after submitting payment, the buyer will have completed their order.

Anchor to useBuyerJourneyCompleted-returnsReturns

false | true

Anchor to useBuyerJourneyIntercept
useBuyerJourneyIntercept(
interceptor
)

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.

Anchor to useBuyerJourneyIntercept-parametersParameters

Anchor to interceptor interceptor required

Anchor to useBuyerJourneyIntercept-returnsReturns
void

Interceptor

A function for intercepting and preventing navigation on checkout. You can block navigation by returning an object with `{behavior: 'block', reason: InvalidResultReason.InvalidExtensionState, errors?: ValidationErrors[]}`. If you do, then you're expected to also update some part of your UI to reflect the reason why navigation was blocked, either by targeting checkout UI fields, passing errors to the page level or rendering the errors in your extension.

interceptorProps
```
InterceptorProps
```

InterceptorRequest | Promise<InterceptorRequest>

InterceptorRequest | Promise<InterceptorRequest>

InterceptorProps

canBlockProgress
Whether the interceptor has the capability to block a buyer's progress through checkout. This ability might be granted by a merchant in differing checkout contexts.
```
boolean
```

InterceptorRequest

InterceptorRequestAllow | InterceptorRequestBlock

InterceptorRequestAllow

behavior
Indicates that the interceptor will allow the buyer's journey to continue.
```
'allow'
```
perform
This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.
```
(result: InterceptorResult) => void | Promise<void>
```

InterceptorResult

InterceptorResultAllow | InterceptorResultBlock

InterceptorResultAllow

behavior
Indicates that the buyer was allowed to progress through checkout.
```
'allow'
```

InterceptorResultBlock

behavior
Indicates that some part of the checkout UI intercepted and prevented the buyer’s progress. The buyer typically needs to take some action to resolve this issue and to move on to the next step.
```
'block'
```

InterceptorRequestBlock

behavior
Indicates that the interceptor will block the buyer's journey from continuing.
```
'block'
```
errors
Used to pass errors to the checkout UI, outside your extension's UI boundaries.
```
ValidationError[]
```
perform
This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.
```
(result: InterceptorResult) => void | Promise<void>
```
reason
The reason for blocking the interceptor request. This value isn't presented to the buyer, so it doesn't need to be localized. The value is used only for Shopify’s own internal debugging and metrics.
```
string
```

ValidationError

message
Error message to be displayed to the buyer.
```
string
```
target
The checkout UI field that the error is associated with. Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode` See the [supported targets](/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets) for more information.
```
string
```

Anchor to useBuyerJourneySteps
useBuyerJourneySteps()

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.

Anchor to useBuyerJourneySteps-returnsReturns

[]

BuyerJourneyStep

disabled
The disabled state of the buyer journey step. This value will be true if the buyer has not reached the step yet. For example, if the buyer has not reached the `shipping` step yet, `shipping` would be disabled.
```
boolean
```
handle
The handle that uniquely identifies the buyer journey step.
```
BuyerJourneyStepHandle
```
label
The localized label of the buyer journey step.
```
string
```
to
The url of the buyer journey step. This property leverages the `shopify:` protocol E.g. `shopify:cart` or `shopify:checkout/information`.
```
string
```

BuyerJourneyStepHandle

| handle | Description | |---|---| | `cart` | The cart page. | | `checkout` | A one-page checkout, including Shop Pay. | | `information` | The contact information step of a three-page checkout. | | `shipping` | The shipping step of a three-page checkout. | | `payment` | The payment step of a three-page checkout. | | `review` | The step after payment where the buyer confirms the purchase. Not all shops are configured to have a review step. | | `thank-you` | The page displayed after the purchase, thanking the buyer. | | `unknown` | An unknown step in the buyer journey. |

'cart' | 'checkout' | 'information' | 'shipping' | 'payment' | 'review' | 'thank-you' | 'unknown'

Anchor to useBuyerJourneyActiveStep
useBuyerJourneyActiveStep()

Returns the buyer journey step that the buyer is currently on.

Anchor to useBuyerJourneyActiveStep-returnsReturns

| undefined

BuyerJourneyStep

disabled
The disabled state of the buyer journey step. This value will be true if the buyer has not reached the step yet. For example, if the buyer has not reached the `shipping` step yet, `shipping` would be disabled.
```
boolean
```
handle
The handle that uniquely identifies the buyer journey step.
```
BuyerJourneyStepHandle
```
label
The localized label of the buyer journey step.
```
string
```
to
The url of the buyer journey step. This property leverages the `shopify:` protocol E.g. `shopify:cart` or `shopify:checkout/information`.
```
string
```

BuyerJourneyStepHandle

| handle | Description | |---|---| | `cart` | The cart page. | | `checkout` | A one-page checkout, including Shop Pay. | | `information` | The contact information step of a three-page checkout. | | `shipping` | The shipping step of a three-page checkout. | | `payment` | The payment step of a three-page checkout. | | `review` | The step after payment where the buyer confirms the purchase. Not all shops are configured to have a review step. | | `thank-you` | The page displayed after the purchase, thanking the buyer. | | `unknown` | An unknown step in the buyer journey. |

'cart' | 'checkout' | 'information' | 'shipping' | 'payment' | 'review' | 'thank-you' | 'unknown'

Examples

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

import {

useBuyerJourneyIntercept,

useExtensionEditor,

useExtensionCapability,

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

export default function extension() {

render(<Extension />, document.body);

}

function Extension() {

const editorType = useExtensionEditor()?.type;

const blockProgressGranted =

useExtensionCapability('block_progress');

useBuyerJourneyIntercept(

({canBlockProgress}) => {

return canBlockProgress &&

shopify.shippingAddress.value

?.countryCode &&

shopify.shippingAddress.value

.countryCode !== 'CA'

? {

behavior: 'block',

reason: 'Invalid shipping country',

errors: [

{

message:

'Sorry, we can only ship to Canada',

// Show an error underneath the country code field

target:

'$.cart.deliveryGroups[0].deliveryAddress.countryCode',

},

{

// In addition, show an error at the page level

message:

'Please use a different address.',

},

],

}

: {

behavior: 'allow',

};

},

);

return (

<>

{editorType === 'checkout' &&

!blockProgressGranted ? (

<s-banner

tone="warning"

heading="This app may be misconfigured"

>

To allow this app to block checkout,

enable this behavior in "Checkout

behavior" settings.

</s-banner>

) : null}

</>

);

}

Examples

Block progress and show error for a checkout UI field

Description

Intercept and prevent a buyer's progress through checkout while targeting a specific checkout UI field. See the [validation tutorial](/docs/apps/checkout/validation) for more examples and best practices.

Preact

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

import {
  useBuyerJourneyIntercept,
  useExtensionEditor,
  useExtensionCapability,
} from '@shopify/ui-extensions/checkout/preact';

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

function Extension() {
  const editorType = useExtensionEditor()?.type;
  const blockProgressGranted =
    useExtensionCapability('block_progress');

  useBuyerJourneyIntercept(
    ({canBlockProgress}) => {
      return canBlockProgress &&
        shopify.shippingAddress.value
          ?.countryCode &&
        shopify.shippingAddress.value
          .countryCode !== 'CA'
        ? {
            behavior: 'block',
            reason: 'Invalid shipping country',
            errors: [
              {
                message:
                  'Sorry, we can only ship to Canada',
                // Show an error underneath the country code field
                target:
                  '$.cart.deliveryGroups[0].deliveryAddress.countryCode',
              },
              {
                // In addition, show an error at the page level
                message:
                  'Please use a different address.',
              },
            ],
          }
        : {
            behavior: 'allow',
          };
    },
  );

  return (
    <>
      {editorType === 'checkout' &&
      !blockProgressGranted ? (
        <s-banner
          tone="warning"
          heading="This app may be misconfigured"
        >
          To allow this app to block checkout,
          enable this behavior in "Checkout
          behavior" settings.
        </s-banner>
      ) : null}
    </>
  );
}

Block progress and show error at page level

Description

Intercept and prevent a buyer's progress through checkout while displaying an error message at the page level. See the [validation tutorial](/docs/apps/checkout/validation) for more examples and best practices.

Preact

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

import {
  useBuyerJourneyIntercept,
  useExtensionEditor,
  useExtensionCapability,
} from '@shopify/ui-extensions/checkout/preact';

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

function Extension() {
  const editorType = useExtensionEditor()?.type;
  const blockProgressGranted =
    useExtensionCapability('block_progress');

  useBuyerJourneyIntercept(
    ({canBlockProgress}) => {
      return canBlockProgress &&
        shopify.shippingAddress.value
          ?.countryCode &&
        shopify.shippingAddress.value
          .countryCode !== 'CA'
        ? {
            behavior: 'block',
            reason: 'Invalid shipping country',
            errors: [
              {
                // An error without a `target` property is shown at page level
                message:
                  'Sorry, we can only ship to Canada',
              },
            ],
          }
        : {
            behavior: 'allow',
          };
    },
  );

  return (
    <>
      {editorType === 'checkout' &&
      !blockProgressGranted ? (
        <s-banner
          tone="warning"
          heading="This app may be misconfigured"
        >
          To allow this app to block checkout,
          enable this behavior in "Checkout
          behavior" settings.
        </s-banner>
      ) : null}
    </>
  );
}

Block progress and show error in your extension

Description

Intercept and prevent a buyer's progress through checkout while displaying an error message in your extension. See the [validation tutorial](/docs/apps/checkout/validation) for more examples and best practices.

Preact

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

import {
  useBuyerJourneyIntercept,
  useExtensionEditor,
  useExtensionCapability,
} from '@shopify/ui-extensions/checkout/preact';

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

function Extension() {
  const [showError, setShowError] =
    useState(false);
  const editorType = useExtensionEditor()?.type;
  const blockProgressGranted =
    useExtensionCapability('block_progress');

  useBuyerJourneyIntercept(
    ({canBlockProgress}) => {
      return canBlockProgress &&
        shopify.target.value.quantity > 1
        ? {
            behavior: 'block',
            reason: 'limited stock',
            perform: (result) => {
              if (result.behavior === 'block') {
                setShowError(true);
              }
            },
          }
        : {
            behavior: 'allow',
            perform: () => {
              setShowError(false);
            },
          };
    },
  );

  return (
    <>
      {editorType === 'checkout' &&
      !blockProgressGranted ? (
        <s-banner
          tone="warning"
          heading="This app may be misconfigured"
        >
          To allow this app to block checkout,
          enable this behavior in "Checkout
          behavior" settings.
        </s-banner>
      ) : null}
      {showError ? (
        <s-banner tone="critical">
          This item has a limit of one per
          customer.
        </s-banner>
      ) : null}
    </>
  );
}