#114 Payment Gateway Basics with Stripe


Learn how to add a merchant services to your Ruby on Rails application in the first part of this series. We will be looking at adding a subscription service using Stripe Elements.
rails payments 20:54

Early Bird Pro Subscription Pricing!

From now until Mar 01, 2018, save on the Pro Membership!
Get the Pro Membership for $9.00 USD per month while you maintain an active subscription.

  • Student & Teacher
  • $9.00 / month
  • Valid School Email Required
  • Same Access as Pro
  • Subscribe Now
  • Pro Membership

    Early Bird until Mar 01, 2018

  • $9.00 $15.00 / month
  • Access to Pro Episodes
  • Invite to Slack Channel
  • Priority Episode Suggestions
  • Ad Free
  • Subscribe Now
  • Teams
  • starts at $75.00 / month
  • 5 Users Minimum
  • $15.00 / user / month
  • Same Access as Pro
  • Subscribe to Teams
there are turning to ah to add a turn around and the trilogy it's right which is a white merchant services so putting your application you can have customers in your eighty kills about their credit card and in a complaint in secure way be able to transfer that information to your merchant services in this case tried to charge of the credit card then you'll get feedback from the website and you'll be able to them for some other kind of actions and strive towards it remained different ways to that we're going to look at the repayments subscriptions and connect payments that's going to be a one time payment that the user is able to charge their credit card on itself like em forster something like that and he says corruption is for a whimpering to have the payment so like the sas model for a web application and with the kinect that's a good weekend applicable etc getting him sellers or new website then they have their own clayton said they wouldn't charge for but in this case in this example would be looking at these subscriptions oliver in a few travis said we will look it take into a single payment soviet vatican voicing your son had a shopping cart they you'd then be able to fill out those orders as well set to start us off of this episode at a while controller with the index you then also every user model using a device and it's just a very simple and basic set up a you find on the front page of there really sell offers sign up for an account all year in a username and then a password and then my counters now authentic in it so what we want to do is to be able to create described by them they might be old is ascribed to this application and they connect them with the payment processor to take in the payments in in charge the card then come back and then give them access to the portion of the application that they had paid for so once you create a count on strike him all game you can see that you had this view testing data and you want to make sure the always had this triggered or enabled when every year just passing on the application and honor the a p and such and you'll see that yeah the publish a bulky and then you also at the secret key role in a copy these then the mentors secrets them off while because we're gonna need to be able to use these accumulated with the strike processor so within our secret so yeah mall fall or if you use in rails five to within the credentials yeah more file you would just simply put in the strike public key then also the stripe hi vicky so with america take initial ice ers and create a file called strike out or be within your own sub which is good you could strike at a pr it equals two are rails applications secrets regain credentials if your brows planted in the strike by the key said now we need to create some kind of plan so whenever is the user is signing up for is to scratch and owners are for they're going to be associated to a plan and i'm going to do this within the tv and in the seed star be so would you call a strike plan to name create you so make a p i called out to strive to create the subscription so we did me a pass in the name and the name and is going to cause ascribe are the we also need to get there said plan i'd be and i'm just gonna call this ascribe rig him but just lower case he then had to pass in a in trouble and this animal was going to be something like daily monthly or yearly this case only be just like mom even need to specify the currency and our currency there will be accepting his usb and then you need to specify the amount of this plan and the amount is in sets so nine hundred will be nine dollars a month and within our gym fall will also need to add the gym strike the shredder robot or research wills application and they're within the application each email we need to include the jobs with shots self and that's going to just be a jobs which include fact we pointed the h t t p s j s on strike telecom they were on a user version three a p i they're within our jobs which we will be communicating with the savior i'm so we didn't need ago and it has an arm and attack here in this is what disorder contents of our stride public key so we can create attack will call this matter of air will give us a name and his name will be important because we're better references later when i called this the strike public key and i'm going to set the contents to the whales application secrets but try public key and again it's here and browse five to the new changes to credentials snacks will create a subscriptions controller it within your urges quite have a new ip any create action they're also going ad in the bill for action authentic a user this is from devices so this means that in order to access is part of the application you can add to first be authenticated and so within our new action in the view we get what to create the form or they can get some adequate card information i just get a form with it because we're not going to be passing in any ken i'm all here because we never want to store the credit card information within our application that would entail whole budget pc a complaint said we just someone to get into we want strive to have to worry about all of that stuff the opacity your l men were just in opposes back to our subscriptions path there would be met the post because we're connie post method this will hit the creator action there we won the id so hard id what are they just call the payment for 'em we need to set the idea that forum because wouldn't be using that within the java script to communicate with strike so with that as for me this could be very basic where we just have a form row within here we have a label for heart ailment and there we have a dev tank with the id card element there we have a mother did a bad call card enters this is just going to be for the purpose of displaying any kind of errors within our credit card and then of course we had the forms submit this will just called his metaphor of them were gonna hijack this request of the jobs good today and make our form submission over to the strike processor and then get the response took him back said they did this tripe elements is something simple like a form builder where it's going to inject indeed credit card number twenty eight had that and they give as in the month year the cbc years security code and the zip code and so on are at java script subscriptions a coffee pot and i am getting these coffee or because it is easier to type out all of rawalpindi java script equivalent in the show notes prefers going to whistle on the troubling slowed the matches so whenever we agreed to page that has the elements that we need to interact with the strike gain weight than his coin to be able to run a person that will do is set to try public key gordon is said this public he tested the med attack where we called it the strike public key within our application that aged here melt away when they get the attribute the content in a semi using j crew does all the village office what we've been initially strike with calling stripe there we get as in the strike public key there were going to create our helmets saline center elements equal to the stripe them with ezra were gonna call the elements function then with the cars became creates and styles or if he did this with the mirror c s s one elite is going for now but i'll show you how you think required in there with the car were going to have four elements that create one images call this card like a bad summer so there we need to clear before next week when i was so whenever that form is submitted the weavers sinclair or form an ashes getting the elemental idea de payment for 'em and if you remember within our foreign threats will we it said our id to that we can add a kid in western so whenever the forum is submitted we want to call the function we're going to pass in the event that ever say i'm going to do is call the event and prevent the fault this will keep the form from being submitted we then create a token from strike will pass in our car that we declare before ms can add the card information as well as the cbc code the expiration in the zip code and this comes back true there we want to do something with the results at the results aired out and a good they're out for number reasons then we want to prevented from submitting the poor many ways and then we would want to display summers to the user and i'm just going up is the same here where we have for their element which is getting the id card errors that were setting the tax content to the results daughter down message otherwise if it did not air out there we want to call some kind of function here and with that bullshit we would want to pass and he was old took it so the results hope it is taking the credit card bill was entered by the user it it's admitted to strive to create a token in a way strike now has the card information so we no longer need to mess around with that card strikers are invalidated that it is a great card number but not necessarily if there are any catacombs with the card like insufficient funds or anything like that instead it just validate said this is the actual format for a card is well as being a credit card so it's not expired it's also going to check the cbc number as well as the zip code as well so the function that we're going to create and scanner call it the strike took a hammer the with the strike took in him are running a cake and a good miller going to get her form therefore making news as the pavement form their own going to create a hidden and put his head in it but as they were going to be passed and just the tokens valued to or rails application so we just said that they will hit unemployed to the doctor may create element employed with it said the type who are making a hidden we give the name in the name is strike up and and the value is he took it might be that we got from being struck create token then on their forum which ended in the child they will and can be hidden in but we think all forms of med this will submit our payment for 'em so that that we have our car created all we have the handling down we still need to melt this card within our view so we can call card amount that we need them out this to a id and within a few police had created the card element then to display the errors we want to display the errors within the card error section or that dev tank so we're going to add a a good listener so would they have the car died at the event listener we wanna listen to an average changes the weekend as in the event and so i'm just going to create the best player in matches getting the card errors id the event has an error that we would want to change the best players tax content to go to the event that aired out message otherwise we would just one is that the content people to nothing it said now with sensible we have so far but before we do we do need to commit or routes to create the resources subscriptions we only went ahead the new concrete actions and and are welcome index while we were to create only twenty kansas quiet nail this is just going to point to the news is gretchen path which in turn would it be subscriptions controller in the new action it would finish right documentation they have a lot of different has scarred say you're able to use only did they have tasker thinking news but they also as some cards that would generate some errors so free sample you can use for it in a budget zero zero two and this will mimic a charge be in decline but in our case been suspended because standard visa card and we're gonna try this out as a goal met travel occasionally freshening and being not then the kid what a quick pieces credibility you so now we have the card number or a weekend in our in our current information if we had changes sweeping valid number it then picks it up in there we have our part is invalid the same way if we enter and a cold expiration date then we will get better as well but then as we're not getting error on the cbc or the zip code it's an exorcist gretchen scoop smaller and if he uses in your own application called recommend extracting all of this logic out into its own service object that we need to create a customer and because we're using device we have access to the current user that we need to create something where we can get the strike customer said the scanner method we could create down year or so we have a ruckus were equal to the eagles strike cause summer where we can retrieve there we need to retrieve the strike by the misread baby is going to be on the current user so we can eat this or something within our database we only want to do this in the current user has a strike by d they don't have the strike id that we want to create the customer so is set the customer equal to stripe cause or create action that we need a pass in the email we do have the current users email it said this is going to create a strike customer then with this week in color current news or the weekend update the current user and then we could have said the strike i'd be the weekend said this to the strike cause murdoch i'd be this is going to get the idea took it for that customer so this is a bit much better control or so i'll usually want to check this out into a user model or something similar to so i can just call the current user does strike cause we're if the strike like he does not exist then as we create the cars were in their return the strike customer so i created a new migration which is using the rails generate migration neck all this and try to get to users the images created the two columns the strike lady and there are also going to need a stripes is gretchen id so it begins to have an active subscription then this value will be sent and then get paid users os was struck customer then this value be set so someone can be a stretch cost more than i have the stripes is gretchen maybe they started the process but maybe the card was declined so their id god created as a customer but they are not been given a subscription and so with the drug user model we can create airstrike customer method the first thing i'm going to do is i i'm just going to pass and they returned this is going to look for any current cost more so we ever strike tacos market retrieve know we win it has in the strike i'd be which is what the user attributes know we only want to do this if the strike ideas present so then anything below this is basically evasion and customer does not exist according to the colored years or so we can create air strike customer of the unequal this to the strike customer may we can create the customer off of the email and so we'll get a object back from strike the weekend to simply update the current user strike by the martinez said this to the strike cause we're gonna bite the man we want this method to return these sharp customer of the next time this is called it's going to just simply stop with this line their return the strike cause i'm so that horses questions controller and error create action we didn't create the subscription and and said the sequel to our customer which wish now have from our previous step in this cause was gonna create a subscriptions and decreases swisher we need to pass in the source and the source that were appointed take is from our predators think you might that this is coming directly from the java script said that so we had the striped how can they need me to specify what plan b. users would use ascribed to say if you have multiple options that you're able to take it that information here and whatever these red selected as whether to be charged for but in our case which is going to create these ascribe are even update our current user but we want to assign to the user the stripes is gretchen id we wanna set this to these subscription i i'd be we can save the current user that we can redirect 'em to the bread that they're just make up for us ascribe to so the main issue here is what we could create peace is gretchen there is a chance that it's going to fail and if it fails for whatever reason the card was declined or the big rejected the pavement then you going to get an error on the page and said it does bring in there it would be better to handle would like the application knew that this could happen to our window raptors and they began then i'm going to rescue new set of rescuing with something like exception 'cause as could be pretty bad prisoners and not ripping is why this could fail on a rescue whenever there's a strike partner then what to call the flash alert incentives to the error message we then render our action you again and that should do it it's a back in our application and refreshing we didn't as with the invalid cbc good not just then some on and any random cbc good in any random second so what isis web mail we did see that the courts attorney could is incorrect but we go back to wireless of testing numbers eighteen grab a valid number we in despair whatever information and tribal know that when passing they should return ballot so there we get redirected for with that but we have things versus scrapping it's a coming over to our payments weekend and see are blocked request them we can see these successful long and with the block from quest you look at it and then you can see the else block by role and over on the cdc check you see that it failed on the passing past you can see that all the checks the past and within the cause my information you can see the card attached now struggle never gave me the full card information it's only going to ever show you the last for the expiration type of card and then the postal code has this information is not considered sensitive and it is something that if you want eighty could safely store within your application and then scrolling down because he get the caesar has an active subscriptions ascribe are for nine dollars i'm on that they've had one payment and then the next them boys will be on february fourteenth one month from now so within our user model we can also create another method just attack if a user is ascribed i'll just call this method described this is going to check for the stripes description might be they're making this shack we know that anyone who has the stripes description id has a active subscription answer that are welcome in next weekend changes links description because if someone is ascribe a wee wee bit silly want to show the obese is quite know didn't so we could just now call are occurring user says cried that the ares ascribed the word is quite a display some tax otherwise we'd am putting the brink uses cried so that two application know if we were to bring fresh you see that we ever says scribe and if we log out a we had the option to use ascribe that because i'm not signed and it's for score to make me sign in or sign up before and allow me to use ascribe and to finish up the episode where the shares on the styling they you can do with these discussions not as good as his tenure and then show you what looks like but the main bed is a new one to override the stripe element class and then the strike element that shares focused fashion russian valid many web kid on the field and so you could take your credit card input from looking something like this a refresher they need to look at something like this which is much more presentable and especially if you bat shit two hundred other form elements look but that's all for this episode thank you for watching