Stripe Checkout in Rails with the Pay gem

[Music] hey guys this episode we're going to be talking about how to use stripe checkout in your rails application to handle one time and subscription payments in your rails app and you don't even really have to build anything because all of the payments functionality is done on stripe so this is really really handy we redirect from our rails app to stripe all of the payments are handled there and then they redirect the user back to your application if they cancel or if they finish successfully and all you have to do is listen to web hooks for when those charges succeed so let's take a look at the stripe checkout example here if we pull this up what we'll see is we will redirect to a page that looks just like this with our product on the left side that the user is purchasing and some information on the right side so we can enable google pay apple pay payments with cards and it will collect all that information set up the stripe elements and handle all of that automatically for us and we don't have to build any of that so this is a great quick way to add payments to your rails application and that's what we're going to do today so i have built the pay gem which handles all the payments for jumpstart pro and a bunch of other applications and i've also added stripe checkout functionality to pay recently so we're going to be adding this to our application and using this for stripe checkout so first things first we're going to install the page m and the stripe gem make sure that those are ready to go and running and pay is going to see that stripe is installed and enable the stripe functionality and we're going to run the migrations for those so first is the migrations for pay which is going to keep track of the charges and subscriptions and then our pay user generator here is going to add a migration for a column for pay data on the user so it's going to keep track of the stripe customer id and things like that on the user model and then we can run railsdb migrate to create those database columns and tables and we'll be all good to go now i've got a rails application that already has that done and i've got it running here but before we get into that i want to run rails credentials edit development or environment equals development and we're going to open up our rails credentials so that we can add our stripe api keys there in a way that um that pay will find them so inside of here pay is going to look for a key of stripe and then it's going to look for public key private key and the signing secret and so this is your public key from stripe this is your secret key on stripe you paste those in and your signing secret is for verifying web hooks now in development we have the stripe cli command that we can use you're going to need to install this of course but if we run this it's going to listen for web hooks and then forward them to our local host 3000 and then pay when it is installed will mount automatically to slash pay slash web hook stripe to connect and listen to the stripe web hooks and if you run this command in development it's going to spit out a webhook signing secret which you can copy and paste into your development signing secret line that's going to allow it to verify that those api or the web hooks actually came from the stripe api and verifies those and make sure that they're secure you're going to have different keys for all of these in staging and production and whatever so go ahead and fill out those rails credentials i'll do that off screen and i'll talk to you in a second all right so now that that is installed we can open up our editor and start setting up our code so first things first let's go to the head tag and make sure that we have the stripe javascript included here i've already added this but just add the script source https js.stripe.com v3 and that's going to make sure that the stripe javascript is available for the client-side stuff that you'll need to do so from here we need to create a couple routes we're going to create a checkout route and this is going to be where we send the user to checkouts show and this is going to create the strike checkout session we need to create that server side with our private key and it's going to give us a secret that we can then use in our javascript to redirect to that stripe checkout page now stripe also has a billing portal which we can set up as well and this is the kind of pair of the stripe checkout session so you can subscribe with a stripe checkout session but in the billing portal you can actually edit your subscription and update your card and cancel your subscription all from that page and it looks very similar and it's really really handy so we're going to be setting that up as well so while we're here let's do a route for that so pay is automatically going to find our keys in the credentials so we don't need to do any setup for those things our user model when we ran that command is going to include the pay billable module on the user which will give us a bunch of methods that we can use to create our stripe customer and our checkout session and so on so let's go into controllers and add our checkouts controller.rb and we'll say class checkouts controller and here it's from applicationcontroller we'll have a before action to authenticate user because we want to be able to store that as a customer and we'll need the email address to do that in stripe and so here we can say currentuser.pro equals stripe that's going to tell pay that our payment processor is stripe and then we can say currentuser.customer to actually create the stripe customer on the api and that's going to allow us to create a checkout session from our current user payment processor this is from the pay billable module that will give us the stripe payment processor and we can call checkout on it and we can give it a few options so mode is going to be payment we're going to make a one-time payment um in this example and then we're going to have a line item for this so we'll say line items and we can give this a string for the product that we want the user to purchase now if you go into stripe you can create products here i've created a t-shirt and it has a price of fifteen dollars so we can paste in this price as our line items and that's going to set up our stripe checkout session to uh tell the user they're purchasing that product so now we can go into app views and we'll add checkouts show.html.erb and inside of there we can have our uh review page where we have you know this is what you're going to be buying are you ready to check out maybe this is like your shopping cart page and you're going to render that stripes checkout session as a button so this is going to link to that and we've got a helper that is built into um into pay that will help with that so we're going to say pay stripe checkout button locals the session will be the at checkout session that we just created and the title of this will be check out which will display on the button so now if we go to our rails app and we start that up so let's run a rail server and once this is up we'll make sure that we are logged in as a user and we can go to that checkout route and i'm logged in already so we'll see the checkout button and this redirects us to stripe so we go to checkout.stripe.com it has our t-shirt and our amount and we can fill out any information um here or pay with google pay or apple pit so i'm going to go fill out the credit card information and then we'll be able to check out you'll see it's already pre-populated the email address because we have that attached to our stripe customer and it can pre-populate that for us and save the user some trouble and now that we have that we can click pay and it's going to actually charge our card and it will succeed and redirect us back to our rails application once that's finished so you can customize that return url so that you can send them to a thank you page or something and it will redirect accordingly there and you're also in your stripe your stripe listen uh command you're gonna see that there was a payment intent created and a payment intent succeeded these are events for that checkout session that just happened the payment intent succeeded is viewable on the web and you can see that this was for that t-shirt for 15 and it shows you the charges that were associated with that payment intent so a payment intent is a way for stripe to keep track of the user's trying to check out and it can have multiple payment or multiple charges they might fail for example and it will keep track of all of that together and this is useful for sca so if the bank says hey we need to verify that this is the real user um of the account trying to use that card then it will have a pop-up that says you know confirm this with your bank and all of that is done um by stripe for you and you don't have to build any of that so the payment detents are kind of a layer or wrapper around your charges and your charges are the actual payment inten payment attempts um to charge your card so they're kind of two very similar concepts but the page m is going to listen to that web hook and actually record the charges that were listed here so it's going to be able to store those in the database for you and we can run rails console and look at the last paid charge and here you'll see the last paid charge was this id 1idc e and if we go here we should see that same id so it's actually saved this charge in our database automatically for us so pay is keeping track of those subscriptions and charges and that way you can have them in your database so you can render those out and everything that you might like so let's go back to our rails app here and let's check out the billing portal so first things first we're going to want to change this to be a subscription so we'll have mode subscription and our line items here are going to be a subscription in our stripe account so i've got some other products here we have a test subscription and we can grab say this default one for ten dollars a month and we can paste that in as our line item and that's going to be what the user will see in the checkout session so let's go ahead and check out one more time this will create that button for us redirect us to stripe we're going to see subscribe to test subscription i'll fill out this and subscribe and you'll notice the button says subscribe as well it knows that it's doing a subscription and then once this is filled out we will have a subscription created in our database through the web hook so here i will subscribe with our credit card information and our user is going to be redirected back to the homepage on success and our stripe listen is going to have a whole bunch of items here listed now so we have a subscription that was created we have charge for that that succeeded invoice changes payment intents and so on there's quite a bit of stuff that happens when you create a subscription in stripe so now we should be able to go to our rails console and look at the pay subscription dot last and we'll see that there is a subscription for that user and this we can look up in stripe so if we want to say uh test subscriptions pass in that id oops type that wrong um subscriptions slash that and that will pull up the subscription that we just created uh right now so that keeps track of everything for us automatically using the page m and then our code can say okay it looks like you have a subscription you're good to go you can access these parts of the app that subscribers can so we didn't have to build hardly any code for that in our rails application all of that kind of magically works because the web hooks are handled by the pay gen now let's add our billing controller so that the user can actually edit that subscription so whatever billing controller application controller before action authenticate user and our show is going to create a billing portal object here so for this we're going to have a portal session this is going to be current user dot payment processor dot billing portal and basically this will create a portal session for us and then store that to a variable and then we'll create a link to that just like we did with the stripe checkout session so then under app views we can make a billing show.html.erb billing show and here we can say billing and then link to the billing portal and this is going to be our portal session dot url so this is a little bit more straightforward we can just link to that we don't have to use the stripe.js to render out the button for stripe checkout so that's why we had the partial for the stripe checkout session but we can do a simple link for the building portal so let's go to slash billing that will create our billing portal link we can click on that and it will take us to our session we can see that we're subscribed to that 10 a month test subscription it's our card that we added we can change the card we can update our billing info we can add our address or our tax id and things like that and all of this is handled right here we can also see that we are charged ten dollars for that subscription so this will actually link us to the invoice so we can download that um we can download the invoice the receipt all of that is listed here which is super duper nice we don't have to build any of that in our application the user can click return to pay that will take you back to the application and you can update your plan here so if you have other plans available it will show you monthly yearly and you can switch those right here you can also cancel your subscription if you would like and that is going to do exactly what it sounds like so this is the quickest way to add payments to your rails application you don't have to do hardly anything to make this work and it's just kind of magical experience to add payments again stripe definitely got more complicated with the custom elements and everything because of sca which makes sense but that's why they've introduced stripe checkout and it is really really great this is definitely something that if jumpstart pro didn't already have all the custom integrations to make it all feel native in your application i'd probably be using stripe checkout for that if i didn't have the custom integration already done in jumpstart so that is it for stripe checkout i hope you enjoyed this and you can use this to now start another product and make some money and build some cool stuff so i hope you enjoyed this and i will talk to you guys in the next one peace you

Channel: GoRails

Views: 4,881

Keywords: Ruby, Ruby on Rails, Rails, Javascript, HTML, CSS, Servers, Databases, Screencast, Tutorial, Rails 6, Action Text, Active Support, Action Mailbox, Webpacker, Active Storage, Active Record, rails testing, ruby on rails testing, ruby testing, devise, rails devise

Id: MKWq_soCzsQ

Length: 17min 49sec (1069 seconds)

Published: Wed Apr 07 2021