diff --git a/changelog/fix-9806-ECE-subscription-checkout-signed-out b/changelog/fix-9806-ECE-subscription-checkout-signed-out new file mode 100644 index 00000000000..fa25afd1f10 --- /dev/null +++ b/changelog/fix-9806-ECE-subscription-checkout-signed-out @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Ensure ECE login confirmation dialog is shown on Blocks. diff --git a/client/express-checkout/blocks/hooks/use-express-checkout.js b/client/express-checkout/blocks/hooks/use-express-checkout.js index 962f74e5876..e2d68bc6bce 100644 --- a/client/express-checkout/blocks/hooks/use-express-checkout.js +++ b/client/express-checkout/blocks/hooks/use-express-checkout.js @@ -8,6 +8,7 @@ import { useStripe, useElements } from '@stripe/react-stripe-js'; * Internal dependencies */ import { + displayLoginConfirmation, getExpressCheckoutButtonStyleSettings, getExpressCheckoutData, normalizeLineItems, @@ -52,6 +53,12 @@ export const useExpressCheckout = ( { const onButtonClick = useCallback( ( event ) => { + // If login is required for checkout, display redirect confirmation dialog. + if ( getExpressCheckoutData( 'login_confirmation' ) ) { + displayLoginConfirmation( event.expressPaymentType ); + return; + } + const options = { lineItems: normalizeLineItems( billing?.cartTotalItems ), emailRequired: true, diff --git a/client/tokenized-express-checkout/blocks/hooks/use-express-checkout.js b/client/tokenized-express-checkout/blocks/hooks/use-express-checkout.js index f33604354f7..afdcca3f6d2 100644 --- a/client/tokenized-express-checkout/blocks/hooks/use-express-checkout.js +++ b/client/tokenized-express-checkout/blocks/hooks/use-express-checkout.js @@ -8,6 +8,7 @@ import { useStripe, useElements } from '@stripe/react-stripe-js'; * Internal dependencies */ import { + displayLoginConfirmation, getExpressCheckoutButtonStyleSettings, getExpressCheckoutData, normalizeLineItems, @@ -52,6 +53,12 @@ export const useExpressCheckout = ( { const onButtonClick = useCallback( ( event ) => { + // If login is required for checkout, display redirect confirmation dialog. + if ( getExpressCheckoutData( 'login_confirmation' ) ) { + displayLoginConfirmation( event.expressPaymentType ); + return; + } + const options = { lineItems: normalizeLineItems( billing?.cartTotalItems ), emailRequired: true,