# useBuyerJourneyIntercept

Installs a function for intercepting and preventing progress on checkout.

To block checkout progress, you must set the [block_progress](https://shopify.dev/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.

```jsx
import React from 'react';
import {
  render,
  useBuyerJourneyIntercept,
  useShippingAddress,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::DeliveryAddress::RenderBefore',
  () => <Extension />,
);

function Extension() {
  const address = useShippingAddress();

  useBuyerJourneyIntercept(
    ({canBlockProgress}) => {
      return canBlockProgress &&
        address?.countryCode &&
        address.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 null;
}

```

## 

### UseBuyerJourneyInterceptGeneratedType

Installs a function for intercepting and preventing progress on checkout.

To block checkout progress, you must set the [block_progress](https://shopify.dev/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.

#### Returns: void

#### Params:

- interceptor: Interceptor
export function useBuyerJourneyIntercept<
  ID extends RenderExtensionPoint = RenderExtensionPoint,
>(interceptor: Interceptor): void {
  const buyerJourney = useApi<ID>().buyerJourney;
  const interceptorRef = useRef(interceptor);
  interceptorRef.current = interceptor;

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

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


### InterceptorProps

### canBlockProgress

value: `boolean`

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.

### InterceptorRequestAllow

### behavior

value: `"allow"`

Indicates that the interceptor will allow the buyer's journey to continue.

### perform

value: `(result: InterceptorResult) => void | Promise<void>`

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.

### InterceptorResultAllow

### behavior

value: `"allow"`

Indicates that the buyer was allowed to progress through checkout.

### InterceptorResultBlock

### behavior

value: `"block"`

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.

### InterceptorRequestBlock

### behavior

value: `"block"`

Indicates that the interceptor will block the buyer's journey from continuing.

### reason

value: `string`

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.

### errors

value: `ValidationError[]`

Used to pass errors to the checkout UI, outside your extension's UI boundaries.

### perform

value: `(result: InterceptorResult) => void | Promise<void>`

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.

### ValidationError

### message

value: `string`

Error message to be displayed to the buyer.

### target

value: `string`

The checkout UI field that the error is associated with.

Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode`

See the [supported targets](https://shopify.dev/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets)
for more information.

## Related

- [Validating fields at checkout](https://shopify.dev/docs/apps/checkout/validation/fields)
- [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi)
- [CheckoutApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/checkoutapi)
- [OrderStatusApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/orderstatusapi)
- [CartLineDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi)
- [PickupPointsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuppointsapi)
- [PickupLocationsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuplocationsapi)
- [ShippingMethodDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/shippingmethoddetailsapi)
- [ExtensionPoints](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints)

## Examples

Installs a function for intercepting and preventing progress on checkout.

To block checkout progress, you must set the [block_progress](https://shopify.dev/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 and prevent a buyer's progress through checkout while displaying an error message at the page level.
        See the [validation tutorial](https://shopify.dev/docs/apps/checkout/validation) for more examples and best practices.

```jsx
import React from 'react';
import {
  render,
  useBuyerJourneyIntercept,
  useShippingAddress,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::DeliveryAddress::RenderBefore',
  () => <Extension />,
);

function Extension() {
  const address = useShippingAddress();

  useBuyerJourneyIntercept(
    ({canBlockProgress}) => {
      return canBlockProgress &&
        address?.countryCode &&
        address.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 null;
}

```


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

```jsx
import React, {useState} from 'react';
import {
  render,
  Banner,
  useBuyerJourneyIntercept,
  useTarget,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::CartLineDetails::RenderAfter',
  () => <Extension />,
);

function Extension() {
  const [showError, setShowError] =
    useState(false);
  const {quantity} = useTarget();

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

  return showError ? (
    <Banner>
      This item has a limit of one per customer.
    </Banner>
  ) : null;
}

```

## InterceptorRequestBlock

Block the buyer from proceeding further in the checkout

### InterceptorRequestBlock

### behavior

value: `"block"`

Indicates that the interceptor will block the buyer's journey from continuing.

### reason

value: `string`

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.

### errors

value: `ValidationError[]`

Used to pass errors to the checkout UI, outside your extension's UI boundaries.

### perform

value: `(result: InterceptorResult) => void | Promise<void>`

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.

### ValidationError

### message

value: `string`

Error message to be displayed to the buyer.

### target

value: `string`

The checkout UI field that the error is associated with.

Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode`

See the [supported targets](https://shopify.dev/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets)
for more information.

### InterceptorResultAllow

### behavior

value: `"allow"`

Indicates that the buyer was allowed to progress through checkout.

### InterceptorResultBlock

### behavior

value: `"block"`

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.

## Related

- [Validating fields at checkout](https://shopify.dev/docs/apps/checkout/validation/fields)
- [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi)
- [CheckoutApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/checkoutapi)
- [OrderStatusApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/orderstatusapi)
- [CartLineDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi)
- [PickupPointsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuppointsapi)
- [PickupLocationsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuplocationsapi)
- [ShippingMethodDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/shippingmethoddetailsapi)
- [ExtensionPoints](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints)

## Examples

Installs a function for intercepting and preventing progress on checkout.

To block checkout progress, you must set the [block_progress](https://shopify.dev/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 and prevent a buyer's progress through checkout while displaying an error message at the page level.
        See the [validation tutorial](https://shopify.dev/docs/apps/checkout/validation) for more examples and best practices.

```jsx
import React from 'react';
import {
  render,
  useBuyerJourneyIntercept,
  useShippingAddress,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::DeliveryAddress::RenderBefore',
  () => <Extension />,
);

function Extension() {
  const address = useShippingAddress();

  useBuyerJourneyIntercept(
    ({canBlockProgress}) => {
      return canBlockProgress &&
        address?.countryCode &&
        address.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 null;
}

```


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

```jsx
import React, {useState} from 'react';
import {
  render,
  Banner,
  useBuyerJourneyIntercept,
  useTarget,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::CartLineDetails::RenderAfter',
  () => <Extension />,
);

function Extension() {
  const [showError, setShowError] =
    useState(false);
  const {quantity} = useTarget();

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

  return showError ? (
    <Banner>
      This item has a limit of one per customer.
    </Banner>
  ) : null;
}

```

## InterceptorRequestAllow

Allow the buyer to proceed further in the checkout

### InterceptorRequestAllow

### behavior

value: `"allow"`

Indicates that the interceptor will allow the buyer's journey to continue.

### perform

value: `(result: InterceptorResult) => void | Promise<void>`

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.

### InterceptorResultAllow

### behavior

value: `"allow"`

Indicates that the buyer was allowed to progress through checkout.

### InterceptorResultBlock

### behavior

value: `"block"`

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.

## Related

- [Validating fields at checkout](https://shopify.dev/docs/apps/checkout/validation/fields)
- [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi)
- [CheckoutApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/checkoutapi)
- [OrderStatusApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/orderstatusapi)
- [CartLineDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi)
- [PickupPointsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuppointsapi)
- [PickupLocationsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuplocationsapi)
- [ShippingMethodDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/shippingmethoddetailsapi)
- [ExtensionPoints](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints)

## Examples

Installs a function for intercepting and preventing progress on checkout.

To block checkout progress, you must set the [block_progress](https://shopify.dev/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 and prevent a buyer's progress through checkout while displaying an error message at the page level.
        See the [validation tutorial](https://shopify.dev/docs/apps/checkout/validation) for more examples and best practices.

```jsx
import React from 'react';
import {
  render,
  useBuyerJourneyIntercept,
  useShippingAddress,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::DeliveryAddress::RenderBefore',
  () => <Extension />,
);

function Extension() {
  const address = useShippingAddress();

  useBuyerJourneyIntercept(
    ({canBlockProgress}) => {
      return canBlockProgress &&
        address?.countryCode &&
        address.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 null;
}

```


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

```jsx
import React, {useState} from 'react';
import {
  render,
  Banner,
  useBuyerJourneyIntercept,
  useTarget,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::CartLineDetails::RenderAfter',
  () => <Extension />,
);

function Extension() {
  const [showError, setShowError] =
    useState(false);
  const {quantity} = useTarget();

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

  return showError ? (
    <Banner>
      This item has a limit of one per customer.
    </Banner>
  ) : null;
}

```

## Examples

Installs a function for intercepting and preventing progress on checkout.

To block checkout progress, you must set the [block_progress](https://shopify.dev/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 and prevent a buyer's progress through checkout while displaying an error message at the page level.
        See the [validation tutorial](https://shopify.dev/docs/apps/checkout/validation) for more examples and best practices.

```jsx
import React from 'react';
import {
  render,
  useBuyerJourneyIntercept,
  useShippingAddress,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::DeliveryAddress::RenderBefore',
  () => <Extension />,
);

function Extension() {
  const address = useShippingAddress();

  useBuyerJourneyIntercept(
    ({canBlockProgress}) => {
      return canBlockProgress &&
        address?.countryCode &&
        address.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 null;
}

```


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

```jsx
import React, {useState} from 'react';
import {
  render,
  Banner,
  useBuyerJourneyIntercept,
  useTarget,
} from '@shopify/checkout-ui-extensions-react';

render(
  'Checkout::CartLineDetails::RenderAfter',
  () => <Extension />,
);

function Extension() {
  const [showError, setShowError] =
    useState(false);
  const {quantity} = useTarget();

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

  return showError ? (
    <Banner>
      This item has a limit of one per customer.
    </Banner>
  ) : null;
}

```