buyerJourney.intercept doesn't intercept payment methods switching

[AncleMarvel]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/ui-extensions": "2024.1.x"

Describe the bug

api.buyerJourney.intercept works only once after checkout is loaded if I switch from e.g. Shopify Payments to my custom method. If I reload the page and switch from the custom method to Shopify Payments - api.buyerJourney.intercept doesn't work. Customers have to change their data on checkout or click Review step anytime to trigger my logic which is based on selected payment method.

Steps to reproduce the behavior:

There are 2 cases when it doesn't work as expected.
The 1st case:

1. After checkout opened with selected custom payment method, switch the method to e.g. the default one.

The 2nd case:

1. It doesn't work anytime when you switch payment methods except switching from default to custom method after checkout is opened. It only works once

Expected behavior

Anytime I switch payment methods it triggers

Screenshots

Additional context

I have a checkout ui extension which appears when my custom payment method is selected and dissapears when any other is selected. But I can't implement this logic cuz interceptor triggers only once and in only specific case when I switch methods

[jamesvidler]

@AncleMarvel selecting a payment method doesn't currently cause a buyerjourney event to fire. If you need to show a UI based on the selected payment option, I would instead subscribe to selectedPaymentOptions so when that value changes you can conditionally render UI.

[AncleMarvel]

Hi @jamesvidler thank you for your answer! Is it possible to check somewhere an example of code how to subscribe to something because in Shopify's docs there are only examples for React, I'm not handy with it at all so it's hard to understand how to work with it in just JS?

[jamesvidler]

@AncleMarvel Thank you for your feedback regarding the docs. That's something we will take a look at.

To subscribe to value changes in vanilla JS would:

import {extension} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root, {selectedPaymentOptions, availablePaymentOptions}) => {
    selectedPaymentOptions.subscribe((newValue) => {
      // Do something when new payment option(s) have been selected
    });
  },
);

[AncleMarvel]

@jamesvidler Thank you very much! You was very helpful!