We are experiencing an inconsistent behavior with the useBuyerJourneyIntercept hook in our Shopify Checkout UI Extension and are seeking assistance.
We are implementing a checkout extension that uses the useBuyerJourneyIntercept to prevent users from proceeding without verifying their phone number when clicking the “Continue to shipping” button. However, we have encountered a situation where the interceptor does not consistently block the checkout progression as expected.
To separate our issue from other potential problems, we have created a minimal extension that only that uses useBuyerJourneyIntercept to block checkout progression. Our logic always returns { behavior: 'block', reason: 'Invalid' }. However, we have observed that after initially click the “Continue to shipping” and getting blocked, if we change the phone number field (which is one of the input fields) and then click outside the field (blur event) and click the “Continue to shipping” button again. the checkout proceeds despite the interceptor still returning { behavior: 'block' }. The console logs consistently show the message indicating the interceptor is running and returning the block behavior.
Here is a simplified version of our code:
import { reactExtension, useBuyerJourneyIntercept } from '@shopify/ui-extensions-react/checkout';
export default reactExtension('purchase.checkout.delivery-address.render-after', () =>
Steps to reproduce:
1. Create a new app and generate a new extension with the code above.
2. Install the extension to the checkout at the `purchase.checkout.delivery-address.render-after` target.
3. Open the checkout page, fill out all required fields including the phone number field, and click the "Continue to shipping" button.
4. You will see that you cannot proceed, and the console logs will show "interceptor always block."
5. Change the phone number.
6. Out focus the field by clicking outside it.
7. Click the "Continue to shipping" button again.
8. You will see that you can proceed to the next step despite the console logs still showing "interceptor always block," indicating the interceptor is still returning the block behavior.
Has anyone else experienced a similar issue, or can anyone provide insights into why this might be happening?