Description

Based on discussion in #9028 (comment).

When ECE is enabled and the settings are changed the preview needs to re-create the iframe from Stripe, causing the buttons to disappear for ~1-2 seconds. We may want to explore trying to prevent this.

The reason we need to recreate the iframe is that some of the configurations are set on an event that fires when the button is initialized, instead of being passed as props to Stripe's ECE.

Demonstration of the issue:

Acceptance criteria

• Buttons react immediately to settings changes

Designs

Testing instructions

1. Enable ECE.
2. Go to the WooPayment settings.
3. Click Customize next to the Apple Pay/Google Pay option.
4. Change the call to action or theme.

Dev notes

The proposed solution is to render all possible variations of the settings and hide them all via display: none;, except the one button that matches the current configuration. This has not been tested and may not work.

Additional context

#9028 (comment)