How to use stripe elements without wepacker in rails 7?

Question

I'm using Rails 7.0.0.alpha2 and I'd like to integrate stripe element (consume from stripe). I don't have a webpacker but I have hotwire together to importmap (responsible for javascript packages) and stimulus(Javascript Framework)

I am a bit lost as I have not been able to normally use javascript to integrate stripe internally to my application

If someone has used stripe elements together with rails 7 (or together with stimulus js) and could give me some help I would be very grateful

Answer 1

You need to pin the package with ./bin/importmap pin @stripe/stripe-js

Then you will be able to load it with import { loadStripe } from '@stripe/stripe-js' wherever you want to use it; I suggest a Stimulus controller. If you prefer to set it up with vanilla and you are unsure how to load custom files see this

For particular stripe-js usage questions, please refer to the docs

Once you have an instance of Stripe, you can create an Elements instance and so a card(or the element you need)

Answer 2

I have a setup with Rails 7, Hotwire Stimulus, Hotwire Turbolinks and importmaps. I tried to use Stripe together with importmaps, by pinning it like this:

./bin/importmap pin stripe

And in the Stimulus controller I imported it like this:

import Stripe from 'stripe';

Unfortunately, I got a lot of errors. For example this one TypeError: stripe.elements is not a function. That's why I had to integrate it the old way. I removed Stripe completely from my importmaps and import it now in the HTML header likes this:

<% if session[:menu].to_s.eql?( 'orga/settings/payment' ) %>
  <script src="https://js.stripe.com/v3/" data-turbolinks-track="reload"></script>
<% end %>

I still have a Stimulus controller for Stripe and in the connect() I'm initializing the form. All the JavaScript which used to be in the HTML page, now is in the Stimulus controller. That works fine. I hope my answer is helpful.