Implement ECE for payment processing on block checkout page

[Mayisha]

Fixes #3403

Changes proposed in this Pull Request:

• Created hooks, event-handlers and utils functions for ECE in blocks.
• The changes are made following the functions for payment-request and WooPayments.

Testing instructions

• Enable the ECE feature flag (return true from is_stripe_ece_enabled function or in your database add an option _wcstripe_feature_ece and set yes as the value).
• As a shopper add a product to your cart and go to the Block checkout page.
• Confirm that the Google Pay and Apple Pay buttons are loaded.
• Confirm that you can successfully place an order with Google Pay and Apple Pay.
• Disable the feature flag and confirm that PRBs are still working without any regression.

[Mayisha]

@wjrosa I have requested your review as you are also working on ECE issues. Feel free to unassign yourself if you are too occupied 🍫

[annemirasol]

✨ Great work ✨ I can see Google Pay in my initial testing.

1. Is it expected that an unavailable component still takes up space? In my case, Apple Pay is not available (ie Chrome browser) but the container is still rendered.

Empty Apple Pay container taking up space:

2. When is_stripe_ece_enabled returns false, I get an empty Express Checkout box. I expected the old Google Pay PRB (or for the entire Express Checkout box to not show at all).

Empty box when Stripe ECE is not enabled:

What I see on develop:

[Mayisha]

Thanks, @annemirasol for checking this.

Empty Apple Pay container taking up space

I will create a separate issue to handle this scenario. 👀

Empty box when Stripe ECE is not enabled:

After disabling the feature flag, try running npm start again and see if the PRB button loads. Probably the PRB script is not loaded and that's causing the issue. 🤔

[annemirasol]

After disabling the feature flag, try running npm start again and see if the PRB button loads. Probably the PRB script is not loaded and that's causing the issue. 🤔

I'm still getting an empty checkbox after running npm start and doing a full reload. I see errors in the console:

(The hooks.js line with error)

(For comparison, this is my browser console on develop.)

[annemirasol]

@Mayisha Had some time to closely look at the empty box/403 forbidden problem I reported earlier, and it looks like it's from this line ^ that's not checking whether ECE is enabled or not before replacing JS (nonce) params

[Mayisha]

Thanks @annemirasol for the findings 😃