Skip to main content

Subscribe to GoRails to get access to this episode and all other pro episodes, and new awesome content every month.

Subscribe Now
Only $19/month

Unlimited access. Cancel anytime.

19 Stripe Elements Javascript

Episode 197 · July 10, 2017

Learn about Stripe's new v3 Javascript library, Stripe Elements, and how to implement it for an even nicer credit card form

Payments Javascript


Subscribe or login to view the transcript for this episode.



Great tutorial! Seems that the new elements library is easy to use. I was wondering how would I go about implementing Stripe Elements in a e-commerce site with a React Front-End and a Rails API backend. Any ideas / suggestions ?


The below error is thrown in the console from the code in your repo. It looks like its being called on other pages as well.
```Uncaught Error: The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().```

funnelvisionaus on

Hi Andrew, your JS is running before the page has finished rendering. You need to move the <script> to below the HTML on the page, or put it in jQuery and wait for the DOM to stop loading.


I have an error where the iframe is not being displayed. Clicking the Submit Payment button shows the Your card number is incomplete error message. I also see the error reported by Andrew. Looking at Stackoverflow there seem to be a number of current issues with Stripe and Turbolinks.


Hi, I'm watching this as part of the Stripe MasterClass.

In subscriptions.js, my 'public_key' variable works. But when I then declare the 'stripe' variable, it doesn't seem to know what 'Stripe' is, because 'Stripe(public_key)' returns undefined. Any hints? Thanks.

Two errors are happening with Turbolinks and Stripe Elements v3 as this tutorial stands. One was mentioned above. I'll post the 2nd one at some point. I'd look at your example application and navigate around a little - you'll see them.


 hi Chris ,i followed the tutorial but only the stripe_id and customer_id are saved in the user database , the card infos are all nil i help need.  i am using stripe element
UPDATE "users" SET "stripe_id" = ?, "stripe_subscription_id" = ?, "updated_at" = ? WHERE "users"."id" = ?  [["stripe_id", "cus_Cx4IDGQ7HlS7DY"], ["stripe_subscription_id", "sub_Cx4IrtnieqN82q"], ["updated_at", "2018-05-29 15:54:32.368665"], ["id", 1]]
as you can see not card info is saved

put the logs show the card info in the params
Started POST "/subscription" for at 2018-05-29 16:54:25 +0100
Processing by SubscriptionsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"aZgXCURZ/mVziIEGuRAdJ+oI9RrX44IY4rYwhH2t4AieyfNk/fg==", "stripeToken"=>"tok_1yxdg........wxcu", "user"=>{"card_brand"=>"Visa", "card_exp_month"=>"4", "card_exp_year"=>"2024", "card_last4"=>"4242"}}
 help needed

def create
customer = if current_user.stripe_id?
customer = Stripe::Customer.create(
source: params[:stripeToken],
plan: 1,)
card_last4: params[:card_last4],
card_exp_month: params[:card_exp_month],
card_type: params[:card_brand],
card_exp_year: params[:card_exp_year]
  redirect_to root_path

Login or create an account to join the conversation.