Buyer Journey

API

UseBuyerJourneyGeneratedType

Returns the `buyerJourney` details on buyer progression in checkout.

BuyerJourney

export function useBuyerJourney<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): BuyerJourney {
  const api = useApi<Target>();

  return api.buyerJourney;
}

BuyerJourney

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

• activeStep

  What step of checkout the buyer is currently on.

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

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

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

  StatefulRemoteSubscribable<BuyerJourneyStep[]>

export interface BuyerJourney {
  /**
   * 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.
   */
  intercept(interceptor: Interceptor): Promise<() => void>;

  /**
   * 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.
   */
  completed: StatefulRemoteSubscribable<boolean>;
  /**
   * 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.
   */
  steps: StatefulRemoteSubscribable<BuyerJourneyStep[]>;
  /**
   * What step of checkout the buyer is currently on.
   */
  activeStep: StatefulRemoteSubscribable<BuyerJourneyStepReference | undefined>;
}

BuyerJourneyStepReference

What step of checkout the buyer is currently on.

• handle

  The handle that uniquely identifies the buyer journey step.

  BuyerJourneyStepHandle

interface BuyerJourneyStepReference {
  /**
   * The handle that uniquely identifies the buyer journey step.
   */
  handle: 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>

export type Interceptor = (
  interceptorProps: InterceptorProps,
) => 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

export interface InterceptorProps {
  /**
   * 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.
   */
  canBlockProgress: 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>

interface InterceptorRequestAllow {
  /**
   * Indicates that the interceptor will allow the buyer's journey to continue.
   */
  behavior: 'allow';

  /**
   * 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.
   * @param result InterceptorResult with behavior as either 'allow' or 'block'
   */
  perform?(result: InterceptorResult): void | Promise<void>;
}

InterceptorResult

InterceptorResultAllow | InterceptorResultBlock

InterceptorResultAllow

• behavior

  Indicates that the buyer was allowed to progress through checkout.

  "allow"

interface InterceptorResultAllow {
  /**
   * Indicates that the buyer was allowed to progress through checkout.
   */
  behavior: '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"

interface InterceptorResultBlock {
  /**
   * 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.
   */
  behavior: '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

interface InterceptorRequestBlock {
  /**
   * Indicates that the interceptor will block the buyer's journey from continuing.
   */
  behavior: 'block';

  /**
   * 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.
   */
  reason: string;

  /**
   * Used to pass errors to the checkout UI, outside your extension's UI boundaries.
   */
  errors?: ValidationError[];

  /**
   * 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.
   * @param result InterceptorResult with behavior as either 'allow' or 'block'
   */
  perform?(result: InterceptorResult): void | Promise<void>;
}

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

export interface ValidationError {
  /**
   * Error message to be displayed to the buyer.
   */
  message: string;
  /**
   * 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.
   */
  target?: 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

export interface BuyerJourneyStep {
  /**
   * The handle that uniquely identifies the buyer journey step.
   */
  handle: BuyerJourneyStepHandle;
  /**
   * The localized label of the buyer journey step.
   */
  label: string;
  /**
   * The url of the buyer journey step. This property leverages the `shopify:` protocol
   * E.g. `shopify:cart` or `shopify:checkout/information`.
   */
  to: string;
  /**
   * 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.
   */
  disabled: boolean;
}

UseBuyerJourneyCompletedGeneratedType

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.

false | true

export function useBuyerJourneyCompleted<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): boolean {
  const api = useApi<Target>();
  return useSubscription(api.buyerJourney.completed);
}

UseBuyerJourneyInterceptGeneratedType

Installs a function for intercepting and preventing progress on checkout. 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. `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.

• interceptor

  Interceptor

void

export function useBuyerJourneyIntercept<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(interceptor: Interceptor): void {
  const api = useApi<Target>();

  const interceptorRef = useRef(interceptor);
  interceptorRef.current = interceptor;

  return useEffect(() => {
    const teardownPromise = api.buyerJourney.intercept((interceptorProps) =>
      interceptorRef.current(interceptorProps),
    );

    return () => {
      teardownPromise.then((teardown) => teardown()).catch(() => {});
    };
  }, [api.buyerJourney]);
}

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>

export type Interceptor = (
  interceptorProps: InterceptorProps,
) => 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

export interface InterceptorProps {
  /**
   * 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.
   */
  canBlockProgress: 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>

interface InterceptorRequestAllow {
  /**
   * Indicates that the interceptor will allow the buyer's journey to continue.
   */
  behavior: 'allow';

  /**
   * 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.
   * @param result InterceptorResult with behavior as either 'allow' or 'block'
   */
  perform?(result: InterceptorResult): void | Promise<void>;
}

InterceptorResult

InterceptorResultAllow | InterceptorResultBlock

InterceptorResultAllow

• behavior

  Indicates that the buyer was allowed to progress through checkout.

  "allow"

interface InterceptorResultAllow {
  /**
   * Indicates that the buyer was allowed to progress through checkout.
   */
  behavior: '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"

interface InterceptorResultBlock {
  /**
   * 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.
   */
  behavior: '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

interface InterceptorRequestBlock {
  /**
   * Indicates that the interceptor will block the buyer's journey from continuing.
   */
  behavior: 'block';

  /**
   * 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.
   */
  reason: string;

  /**
   * Used to pass errors to the checkout UI, outside your extension's UI boundaries.
   */
  errors?: ValidationError[];

  /**
   * 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.
   * @param result InterceptorResult with behavior as either 'allow' or 'block'
   */
  perform?(result: InterceptorResult): void | Promise<void>;
}

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

export interface ValidationError {
  /**
   * Error message to be displayed to the buyer.
   */
  message: string;
  /**
   * 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.
   */
  target?: string;
}

UseBuyerJourneyStepsGeneratedType

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.

BuyerJourneyStep[]

export function useBuyerJourneySteps<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): BuyerJourneyStep[] {
  const api = useApi<Target>();

  if (!('buyerJourney' in api) || !api.buyerJourney) {
    throw new ExtensionHasNoMethodError('buyerJourney', api.extension.target);
  }

  return useSubscription(api.buyerJourney.steps);
}

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

export interface BuyerJourneyStep {
  /**
   * The handle that uniquely identifies the buyer journey step.
   */
  handle: BuyerJourneyStepHandle;
  /**
   * The localized label of the buyer journey step.
   */
  label: string;
  /**
   * The url of the buyer journey step. This property leverages the `shopify:` protocol
   * E.g. `shopify:cart` or `shopify:checkout/information`.
   */
  to: string;
  /**
   * 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.
   */
  disabled: boolean;
}

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'

UseBuyerJourneyActiveStepGeneratedType

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

BuyerJourneyStep | undefined

export function useBuyerJourneyActiveStep<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): BuyerJourneyStep | undefined {
  const api = useApi<Target>();

  if (!('buyerJourney' in api) || !api.buyerJourney) {
    throw new ExtensionHasNoMethodError('buyerJourney', api.extension.target);
  }

  const steps = useSubscription(api.buyerJourney.steps);
  const activeStep = useSubscription(api.buyerJourney.activeStep);

  return activeStep
    ? steps.find(({handle}) => handle === activeStep.handle)
    : 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

export interface BuyerJourneyStep {
  /**
   * The handle that uniquely identifies the buyer journey step.
   */
  handle: BuyerJourneyStepHandle;
  /**
   * The localized label of the buyer journey step.
   */
  label: string;
  /**
   * The url of the buyer journey step. This property leverages the `shopify:` protocol
   * E.g. `shopify:cart` or `shopify:checkout/information`.
   */
  to: string;
  /**
   * 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.
   */
  disabled: boolean;
}

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'