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


Transcripts

Subscribe or login to view the transcript for this episode.

Discussion


Gravatar

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 ?


Gravatar

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().```

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


Gravatar

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.


Gravatar

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.


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

Gravatar

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

subscription_controller.rb
def create
customer = if current_user.stripe_id?
Stripe::Customer.retrieve(current_user.stripe_id)
else
customer = Stripe::Customer.create(
email: current_user.email
)
end
subscription=customer.subscriptions.create(
source: params[:stripeToken],
plan: 1,)
current_user.update(
stripe_id:customer.id,
stripe_subscription_id:subscription.id,
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
end</pre>

Login or create an account to join the conversation.