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