Skip to main content

Buyer Journey
API

The API for interacting with the buyer journey.

The base API object provided to purchase, and customer-account.order-status extension targets.

required

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

See buyer journey examples for more information.

Was this section helpful?

Anchor to useBuyerJourney
useBuyerJourney()

Returns the buyerJourney details on buyer progression in checkout.

BuyerJourney

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.

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

Was this section helpful?

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.

false | true
Was this section helpful?

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.

required

Was this section helpful?

Block progress and show error for a checkout UI field

import {
reactExtension,
useBuyerJourneyIntercept,
useShippingAddress,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.delivery-address.render-before',
() => <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;
}

In addition to targeting checkout UI fields, you can also pass errors to the page level or render the error in your extension.

Anchor to example-block-progress-and-show-error-at-page-levelBlock progress and show error at page level

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

Anchor to example-block-progress-and-show-error-in-your-extensionBlock progress and show error in your extension

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

Was this section helpful?

Block progress and show error at page level

import {
reactExtension,
useBuyerJourneyIntercept,
useShippingAddress,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.delivery-address.render-before',
() => <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;
}