Build a Pay Once For Access App
This episode is for members only

Sign up to access "Build a Pay Once For Access App" right now.

Get started
Already a member? Sign in to continue
Playing
07. Confirming the card payment

Episodes

0%
Your progress
  • Total: 1h 11m
  • Played: 0m
  • Remaining: 1h 11m
Join or sign in to track your progress

Transcript

00:00
By the end of this episode, we'll have actually processed a payment and the payment intent that we have created will be updated with a complete status and we'll have received the money. Now, all of this happens on the client side. We don't need to pass any kind of token through to our backend to process the payment. We just need to pass through the secret for that payment intent
00:21
to our client side and the payment will be handled in the client. Okay, so this all happens over in confirmCardPayment. Now, let's go ahead and make this async because we need to await on the confirmation of our card based on the details that have been provided and we do this by awaiting on this stripe which is why we went ahead and set this as a property and we go ahead and say
00:47
confirmCardPayment. Now, into here, we're going to go ahead and pass as the first argument to this the client secret from our payment intent. Now, we're not passing that down at the moment. So, if we head back over to our payment index controller, if we remember a little bit earlier when we died and dumped on our payment intent, if we just give that another refresh, we've got
01:10
this client secret property in here. So, that's what we need to pass down to our view so we can use that within the card. So, let's go ahead and just call this payment intent and secret maybe and let's go ahead and access the payment intent and just grab the client secret from this and of course that should be an array on object and that's pretty much all we need to do. In fact,
01:32
let's actually go ahead and pass the entire payment intent object down. That just gives us a little bit more flexibility in the future if we need to access anything else from this. So, now that we're passing the payment intent down, what we can now do is in this first argument say payment intent and client secret and that's the first step to getting this working. The next thing that we
01:56
need to pass into here is an object of options and really all we need in here is the payment method option. So, this is a card payment. So, we're going to go ahead and reference the card element. Again, that's why we set that to a property within here when we created it and really importantly, the billing details. Now, it's really important you include as much information in here as you
02:20
can. So, you might have another input in here that you attach more information from. What I'm going to do just for now is include the email. So, we can go ahead and say auth user and email just for now. Right, let's test this out by giving this page a refresh and just viewing the page source and if we just come down here to let's just find my email address. There we go. So, we've got the
02:46
payment intent secret inside of like this first option and then we've got my email address in here under the billing details. That's all we need to do. So, when we now click make payment, that's going to go ahead and try to confirm the card payment. Let's give this one more refresh and let's click this and give it a try. Now, you'll notice that what's happening here is
03:08
Stripe is automatically validating this when we call confirm card payment. Now, this will not validate things like a card error. So, it won't show any error if there are no funds available or if the card gets declined for any reason. We're going to do that a little bit later but let's go ahead and just try and make a payment here. So, I'm going to go ahead and refresh the payment
03:29
section here. Of course, we've got a huge amount of these payment intents at the moment which we'll clear up later but this should be the one that we are going to go ahead and confirm. So, we can enter any of the test card details from Stripe in here. I'm just going to do 4242 all along and then just enter some details in here and I'm going to hit make payment and just wait for that to go
03:50
through. Now, nothing's going to really happen on the page at the moment because we don't have any kind of process of doing anything after this but if we head over to our payment section now, we should see that this has now succeeded. It's updated the email address, we've got the money basically in our account with all of the information here and that's pretty much it. Now, at the moment,
04:11
of course, we still can't access the members area because we're going to implement a web hook. So, once this does succeed, it notifies our app that the payment has been successful. So, Stripe is going to reliably tell us that this payment has succeeded. Just going back to the benefits of the payment intents API, if we were to try to make this payment again, you can see that we actually
04:32
get an error back here and if we were to log this error out, it would tell us that this payment intent has basically already been successful and we've already made a payment. So, it means that we don't end up with any duplicate payments. So, now that we have successfully made a payment, let's figure out what we need to do to handle any kind of errors like declines, that kind of stuff.
15 episodes•1 hr 11 mins

Overview

Let's do payments right with the Stripe Payment Intent API, and build an app where customers can pay to access a members area.

We'll cover setting up a Payment Intent, process payments correctly with authorization, handle declines, and securely respond to a Stripe webhook to upgrade a member.

This course is for you if:

  • You want to process payments to upgrade customers for access
  • You need to learn how to properly process one-off payments with Stripe
  • You need a refresher on the Payment Intents API
Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!