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...