Spike: Render Stripe Iframes properly within the Site Editor

[danielmx-dev]

Description

In #10043 we found out that there was issues when trying to render the Stripe payment elements in the site editor. This is because the site editor is using an iframe to render the preview of the page, this is causing conflicts with the current implementation of stripe elements, causing the components to never load.

As a workaround, we implemented button previews using Google's and Apple's libraries directly instead of relying on Stripe.

However, for the longer term, we'd prefer to use the Stripe library in all places so we don't duplicate the implementation and also to make sure that the previews are 100% equal to the live mode.

The first step to reach the long term solution it is to validate that the following PR fixes the issue of the iframe protocol: WordPress/gutenberg#55152 Since it may take time for this change to be merged, we'll need to setup a local Gutenberg development environment.

The following commands can also be used in the console to see if the Stripe elements render properly within the page (Make sure you are using the editor-canvas console context):

const stripeClient = new Stripe(
	'PUBLIC_KEY'
);

const elementsInstance = stripeClient.elements( {
	mode: 'payment',

	amount: 100,

	currency: 'usd',

	paymentMethodCreation: 'manual',

	locale: 'en',
} );

const ece = elementsInstance.create( 'expressCheckout', {
	paymentMethods: {
		applePay: 'never',

		googlePay: 'always',

		link: 'never',

		paypal: 'never',

		amazonPay: 'never',
	},

	layout: { overflow: 'never' },
} );

ece.on( 'loaderstart', ( evt ) => {
	console.log( 'loaderstart', evt );
} );

ece.on( 'loaderror', ( err ) => {
	console.log( 'loaderror', err );
} );

ece.on( 'ready', ( evt ) => {
	console.log( 'ready', evt );
} );

ece.mount(
	'#express-payment-method-woocommerce_payments_express_checkout_googlePay'
);

if Stripe is not present you may need to add this action to the backend

add_action( 
  'enqueue_block_assets', 
  function () {
    wp_enqueue_script( 'stripe' );
  }
);

If manually mounting the components work, then we need to figure out what changes are required in the Stripe react library in order to make it work as expected, or estimate the effort required to change the blocks implementation so it uses the regular js library instead.

Acceptance criteria

• Define what the next steps will be to be able to use the Stripe elements library in the Site Editor.

Testing instructions

• Checkout a WooPayments version before Express Payment button not visibile on the Cart template #10043 was implemented. You can use git checkout 1dfacfe3d88a7346a951bf35444b5f0a8eff6870
• Enable Apple Pay/Google Pay in WooPayments
• Activate a theme that supports the Site Editor (e.g. twenty twenty-five)
• Go to Appearance > Editor > Pages > Checkout
• Make sure you are using blocks checkout
• Express Checkout section will be empty instead of showing a preview of the buttons.