Render the express payment button in the editor

[alexflorisca]

Currently, two preview images of both the Apple Pay and Google Pay buttons are being rendered in the editor. The first issue here is that only one of these should be rendered per slot, otherwise it breaks the grid layout (see screenshot)

The first 2 images of Apple Pay and Google Pay in the top left come from the Square extension.

With new changes about to be introduced in Core in https://github.com/woocommerce/woocommerce/pull/50791, we are asking payment extensions to render the actual buttons in the editor instead of a preview. This has several benefits:

• It gives the merchant a more accurate representation of what the shopper would see on the front end of a store
• It provides feedback to the merchant as to which express payment buttons support the new height and border radius controls

This will involve:

• loading the SDK or client side scripts which load the button in the editor
• When calling registerExpressPaymentMethod, passing the same component to the edit property as the content property.

Please reach out if you need any help

[Sidsector9]

@alexflorisca this is difficult to implement with the Square extension, the main problem being the editor loading inside an iframe.

We provide an HTML container (DIV, SPAN) which Square uses to inject the buttons, but before that it checks for el instanceof HTMLElement which evaluates to false because by default the parent document window object is referred to for HTMLElement.

As a workaround, I tried loading the Square Web API inside the iframe and did a override such as:

window.HTMLElement = iframe.contentWindow.HTMLElement

which fixed this problem.

The second check the Square Web API performs is the window.location.protocol to check for :https. The problem here is that the iframe containing the editor sets src as a :blob URL, so this check evaluates to false which prevents the buttons to render.

Do you know of any similar cases with other gateways that were resolved?

[alexflorisca]

Could you use window.parent.location.protocol instead? That should give you the parent window location. If in the global window, I think it just returns that, so it might be all round better to check for that

[Sidsector9]

@alexflorisca that check is done by Square's 3rd party script so we can't modify that part.

[alexflorisca]

Is it worth reaching out to Square to see if they are able to accommodate this situation and change their script to check for window.parent?

[Sidsector9]

I have raised the following issue:

https://github.com/square/web-payments-quickstart/issues/244

cc: @vikrampm1 / @jeffpaul it would be helpful if you can escalate the issue above. Thanks!

[alexflorisca]

Ok great thanks. I see they are moving away from checking winow.location anyway, hopefully we can get an estimate of when that would be release and when we can move this forward 🤞

[vikrampm1]

Just checked with the Square team and https://github.com/square/web-payments-quickstart/issues/244 won't be ready until Q1 next year.

[alexflorisca]

Ok /cc'ing @opr for context. This is blocking the Square extension from rendering the buttons in the editor

[opr]

Thanks @alexflorisca - does this impact anything we're trying to ship, or is it just a case of Square not rendering correctly in the editor and the experience not being 100% complete for merchants using it?

[alexflorisca]

This impact payment plugin compatibility with the new express checkout style controls. Square won't be compatible untill the buttons can be rendered in the editor.