Attach Stripe.js using the defer attribute

Take a look at: https://stripe.com/docs/js/including:

Include the Stripe.js script on each page of your site—it should always be loaded directly from https://js.stripe.com, rather than included in a bundle or hosted yourself.

To best leverage Stripe’s advanced fraud functionality, include this script on every page, not just the checkout page. This allows Stripe to detect suspicious behavior that may be indicative of fraud as customers browse your website.

Thanks for your prompt response! Would you accept a MR to defer the include?

https://stripe.com/docs/js/including

Sure!

@rattusrattus, what are the implications of this? Is it possibly deferring will break existing code? Just curious why they have that note re: code execution order.

The test failures are likely because of the deferral.

One possible middle ground would be to NOT defer/async on checkout pages to ensure current behavior, and defer/async on all other pages, since that is more of a "nice to have".

I've run the pipeline on the proposed MR.

The PHPUnit tests are failing because of the defer.

It also introduces a phpcs test failure.

At a minimum, we should NOT defer on the checkout pages that require the stripe scripts, e.g. checkout pages with the payment_information and/or review panes.

@TomTech @rszrama

Yes, that's why defer/async wasn't added earlier.
I think we need to update the JS to wait for the "Stripe" object to load, as done here (see waitForSdk) https://git.drupalcode.org/project/commerce_square/-/blob/8.x-1.x/js/com...

This has now been resolved as part of 🐛 Regression: Allow sites to opt out from global stripe js loading Active .

Note the issue with this MR is that the defer was only applied to the base stripe script. It needs to be applied to ALL stripe scripts, so that the scripts execute in the correct order.

It would take more work to implement async.

We can't have async on the checkout pages, as the scripts need to load in the correct order, but it would be nice to have async on the non-checkout pages.

We would likely need to define the stripe library twice. One as defer on the checkout pages, and another as async on the non-checkout pages. (And would need to ensure we don't load the async one on the checkout pages, so it doesn't load out of order.)

Automatically closed - issue fixed for 2 weeks with no activity.