Making Users Pay – Building a Site with Stripe and Devise

I took the One Month Rails tutorial and I’m continuing to build out the site. I wanted to add a credit card charge for a SaaS model business and I’d heard great things about Stripe, so I used them. The One Month Rails tutorial basically builds a Pinterest clone and uses Devise for a User model and authentication. Here is an example from the OMR creator. http://omr-pinteresting.com/

Stripe has great documentation and there are tutorials out there, but nothing was perfect for Devise + Stripe, and I’m also working with Rails 4 and Ruby 2, to make things a little more interested.

I started by building a single credit card charge setup from the Stripe tutorial. https://stripe.com/docs/checkout/guides/rails This works well and is fairly straightforward. The one tricky piece for me was pushing through the ENV variables. It was fairly straightforward to do this manually when you start the rails server (below), but getting the ENV variables in there automatically at setup was harder.

PUBLISHABLE_KEY=pk_foo SECRET_KEY=sk_bar rails s

The answer was to get the ENV variables into my ~/.bash_profile which took some yak shaving, but here is the best place to start.  http://stackoverflow.com/questions/7501678/set-environment-variables-on-mac-os-x-lion

So far things have been easy, but we just followed the Stripe tutorial, there is no User involved yet. For simplicity, maybe user experience, I want:

  • The User to enter their credit card at signup,
  • A single payment plan (for now),
  • Every User to give a credit card.

So if the person is a User and can login, then they have paid with a credit card. Stripe has really good subscriptions built in, and again, their documentation is really good, but the documentation isn’t the complete picture and it takes some thought to bring in the Devise setup. https://stripe.com/docs/tutorials/subscriptions

I found an interesting tutorial that outlined how I wanted things to work, although simply copying and pasting into my app wasn’t going to work and the tutorial is incomplete. http://blogs.clogeny.com/stripe-integration-with-rails-application/ It helped me understand a few of the processes better and seemed to have the right approach.

The approach is to add the credit card forms to the signup page. When the user presses submit, Stripe Javascript grabs the credit card information and submits it to Stripe (my app never sees it) and returns a token which is entered into a hidden field in the form. The JS then submits the form to create a User. Finally we run an after_create callback on the User model to charge the card and subscribe the User (and Stripe Customer) to the subscription plan.

I found myself continuously referencing the Stripe tutorials along with the guide from Clogeny.
Stripe = https://stripe.com/docs/checkout/guides/rails and https://stripe.com/docs/tutorials/subscriptions
Clogeny = http://blogs.clogeny.com/stripe-integration-with-rails-application/

Following the Clogeny process with some corrections and different ideas…

Step 1: Stripe Gem- Installing the gem should be done already if you’ve built the single charge from the Stripe guide.

Step 2: ENV variables  - These should already be done from the single-charge test. You also want to follow best practices for ENV variable and not put the in code that might end up on github. Also pay attention to the different variable names in this guide. It looks like the Stripe.api_key (Clogeny) is related to the Stripe secret key, but the initializer is different in the Clogeny guide. I stuck with the initializer code from the Stripe guide.

Step 3: Include the JS in your layouts file. I needed to change the syntax to get mine to work. Here is the code that worked for me.

app/views/layouts/application.html.erb

Step 4: Add the Stripe publishable_key to the application page. Mine looks much different from the Clogeny guide.

app/views/layouts/application.html.erb (same page as above)

I’m not sure how much the order matters, but you can see my code here https://github.com/mikesabat/capecod/blob/stripe_setup/app/views/layouts/application.html.erb At this point I would load the signup page and see if the publishable_key shows up when you Inspect the page elements.

Step 5: New User Form – Now we are getting somewhere. We want to add the hidden field and the credit card form to our signup page. I already had the User model form built so I tried to match the styles as much as possible.

App/views/devise/registrations/new.html.erb

Step 6: JS for CC form – This had me confused for a week or so. We are adding Javascript to handle the form that we just created. To review, when the user clicks submit the JS will pause the form, take the credit card information and submit it to Stripe. Stripe will reply with the credit card token, fill it to the hidden field in the form and then submit the form.

I created a file for this app/assets/javascript/charges.js.coffee

Step 7: Controllers – It was a little tricky figuring out Controller actions, once the form is submitted. Devise doesn’t create a User Controller, so this takes a little work to figure things out. We need to add a stripe_card_token to the User Model, but we can’t just list that as attr_accessible. Rails 4 introduces strong parameters and setting up attributes on the Devise User is a little different. Here is the documentation. https://github.com/plataformatec/devise#strong-parameters

This code in app/controllers/application_controller.rb will let the app add or edit parameters on the User Model during signup and edit actions.

Step 8: User Model – Before the user is created Stripe is grabbing the credit card information, supplying a token and we attach that token to the User Model as the User is created. We still need to subscribe the User to the subscription plan and charge the card. Stripe has great documentation on this https://stripe.com/docs/tutorials/subscriptions I’d recommend creating the plan on the dashboard, as it is so easy.

My code matches Stripe’s example pretty closely, but there are two differences. First, I don’t have the API key in my model, but it still works. Second, for the :plan attribute, Stripe wants the ID number, not the plan name. I think their documentation is incorrect in that respect.

app/models/user.rb

Once this is set up you should be able to test out the signup process and see the charges and Customers being added on Stripe.

Step 9: Error Messages – After putting through a number of successful transactions and watching the fake money pile up on Stripe, I decided to test out a bad credit card number and I didn’t see what I expected. My normal debugging methods didn’t work because the problem was in the JS and nothing appeared on the server logs. A friend helped me make this work.

Here is the code in app/assets/javascripts/charges.js.coffee – specifically what is coming after the ‘else’ – if it’s a bad credit card.

This says that if Stripe does not return a 200 status (good credit card), then we should find the div with class=stripe_error and display it. It will look for this div on the User registration page.

App/views/devise/registrations/new.html.erb

There is some tricky stuff, specifically ‘style=’display:none” in the div, and canceling that in the JS, but if you copy what I have it should work well.

This is a lot of information, and I hope it helps. There is still more (like getting this to run on Heroku), but this is a good start. If you’re building something cool and this helps, please link to it in the comments. Here is the code for my app so far.  https://github.com/mikesabat/capecod

If you made it this far, please give me an upvote on HN https://news.ycombinator.com/item?id=6910591

About these ads
This entry was posted in rails. Bookmark the permalink.

8 Responses to Making Users Pay – Building a Site with Stripe and Devise

  1. Pingback: Making Users Pay. Stripe + Devise in a Rails 4 App | Enjoying The Moment

  2. Matthew says:

    Hi – this is great stuff except I keep on getting the
    error undefined method `stripe_card_token’ for #
    when i try to access my form – any idea why?

    • mikesabat says:

      Hi Matthew,

      Sorry that it’s taken me so long to reply. It’s really hard to help without a lot more information. Have you made stripe_card_token a field on your User model? Have you allowed this field to be added – attr_accessible?

  3. Just wanted to thank you for writing this Stripe tutorial. It really saved me a lot of time today.

  4. Preston says:

    Thanks for the tutorial! I was definitely getting frustrated attempting to integrate Stripe with Devise. Your tutorial helped me get past that and back into a happy place!

  5. preeminentproductions says:

    Awesome! Thank you for this. How are things going for you, as far as learning Rails goes? I’m beginning to learn Rails, with a web app idea in mind. Finding it a bit hard some days, but not going to give up. I’ll definitely bookmark this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s