Skip to content
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions lib/generators/solidus_stripe/install/install_generator.rb
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,18 @@ def install_solidus_starter_frontend_support
template engine.root.join(path), path
end
end

storefront_layout_path = Rails.root.join("app/views/layouts/storefront.html.erb")

if storefront_layout_path.exist?
insert_into_file(
storefront_layout_path.to_s,
"\n <script async src='https://js.stripe.com/v3/'></script>",

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this approach?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comes straight outta importmaps-rails https://github.com/rails/importmap-rails/blob/main/lib/install/install.rb#L1-L9 and is in line with Stripe advising to load the JS on every page to better support fraud prevention. The stripe-js imported in .js files on the other hand is just a thin layer that will load this same file if it's not already available, so we can have the global script tag marked as async and at the same time use a comfy import in our JS files.

before: %r{\s*</head>},
)
end

run 'bin/importmap pin @stripe/stripe-js'
end
end

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Controller } from '@hotwired/stimulus'
import { loadStripe } from '@stripe/stripe-js'

export default class extends Controller {
static values = {
Expand All @@ -24,8 +25,8 @@ export default class extends Controller {
return document.querySelector(this.radioSelectorValue)
}

connect() {
this.stripe = Stripe(this.publishableKeyValue)
async connect() {
this.stripe = await loadStripe(this.publishableKeyValue)
this.setupPaymentElement()
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
<script src="https://js.stripe.com/v3/"></script>

<% intent = payment_method.intent_for_order(current_order) %>

<div
Expand Down