Sending a card token to the server

- [Instructor] Now the last piece that we need to do is we need to open up that subscriptions new again, and we need to change this form's URL. So currently, it points to /your-charge-code which is not anything that we have in our rails application, and it's not very descriptive anyways. So we want to change this to a rails form_tag and this is going to generate a tag that also includes our CSRF token. So we want this form to actually point to the user's subscription, so we want to point it to that URL. We want to include the CSRF token, so we have to use a rails form_tag. And we also want to submit as a POST request, and we need to include this payment-form id on it as well. So we're going to basically just convert this to a rails form_tag. So we can just say form_tag for subscription_path, we can pass in the id of payment-form and a do block, and this should convert our form to the new rails version. So right now you see that it points to charge code. If we refresh our page we should see that if we re-inspect that, this should now have a /subscription action as well as a couple other tags. So we have a UTF8 checkmark that gets submitted as well as our CSRF authenticity token, so that rails can protect you from CSRF attacks. So this gives us a couple benefits, we get to use the rails helpers for security, and we get to post this token to our subscription path. So now it's time to test to make sure that this form submission goes over to rails correctly, and we can receive that token. So the first thing's first is we need to make sure that this is not commented out, want to enable that. And then we want to also go into our subscriptions controller and add a create action. So this will be where we create the user's subscription, but for now we're just going to leave it empty and just see if rails can respond to that correctly. Now if we hop back to our application we can submit this form. And while it didn't do anything visually, we can look at the rails logs and we'll see that we viewed that page, and then the next thing is that we received a POST request to subscription, which means that our form submitted correctly. And most importantly, we now have a Stripe token that we can use to charge our user server-side. So this is successfully converting the credit card number to a Stripe token and then sending that token over to us. And you'll notice that there is no credit card number that we are receiving in rails, which is a good thing. If you ever notice that, check your form and make sure that you do not have name attributes in the HTML. So that is a sign that if you ever put a name on these inputs you will receive those server-side and that would be bad. Now one last thing that would be nice is that if this received the credit card details that we can save. So, for example, we can save your last four digits of your credit card number, your expiration month and year, and the brand of the card. And those are the fields that we created before so that we can show you the current card that you have on file. Now this is important, so that we can show you that, and you can know which credit card's going to be charged next month. And that only takes a small update to our JavaScript file. So if we open this up again, we can actually console.log the response. And if we print this out, you'll be able to see all the details of the credit card that we submitted that you are allowed to save. Once you submit that form you can see this object prints out in the console and it's actually got a lot of information in here that you can save. And the stuff that we are most interested in is the credit card brand, the last four digits and the expiration year and month. So, you can grab these out and then send those over to the server the exact same way as we had penned the Stripe token. So we're going to add those lines in order to grab the brand, the expiration month and year, and the last four digits. So these are pretty straight forward, we're going to do the exact same thing and append these input tags. And we'll say type is hidden, name equals card_brand, and we can set the value to that for response.card.brand. And you can see that by saying this object is the response.card.brand will return us Visa. So this will set that and we can grab the last ones here. So we can say last four, expiration month, expiration year, and these will simply be expiration month, expiration year, and card_last4. And last we need to close off all these parentheses at the end. Now we've named each of these specifically to match our db schema user columns. So when we created our user table, we added some fields for the card brand, card last four and card expiration. And those four values are submitted with the exact same names so that we can save them to our user model and keep track of that really easily. Hopping back in the browser, we can refresh the page and hit Submit again, and this time we should see in our logs that we not only receive the Stripe token, but we receive the card brand, the expiration month, the year and the card last four digits. So all of this is working and submitting successfully to the server. Now the last thing we want to check with our JavaScript is to make sure that our form is successfully handling errors properly. So if we delete the expiration month, and we submit payment you should see this error show up, which will come from the JavaScript error handling, and lets you know what the problem with the card is. Now this is all being handled by the JavaScript by default, so this is the response.error so this is the error being inserted into that field here. And this is re-enabling the Submit button so you can try again. So this time if we say 12 but we don't pass in a CVC, we'll see that the security code is now invalid instead of the expiration month. So that means that our JavaScript error handling is working correctly and our server-side submissions are working so we can safely jump into the server-side processing of the subscriptions.