Checking for a successful payment: Build an E-Commerce Platform

00:10

So let's go ahead and look at calling checkout and then making sure the payment intent that we saw logged out in the console earlier has a status of succeeded. So for this, we could do pretty much what we did up here

00:22

and use wire call validate. So let's go down here, pretty much just paste this in, but of course, switch this out. That's pretty much all we need to do here.

00:32

We know at this point, the payment has succeeded and we check out. So if we head back over to our checkout component and we go to that checkout method that we created,

00:42

this is going to validate the data again, whether you want to do that or not, it's up to you, but I would recommend doing that again on the server side before you start to do anything.

00:51

And then here, we're just doing everything we've already looked at, creating the shipping address, processing the order and sending out all of the emails. But really importantly here, what we want to do

01:01

is grab the payment intent and make sure that the status is succeeded. If the card fails for any reason, and we do end up submitting this checkout method,

01:11

we do not want to create the order. Really, really important. So for this, we're going to go ahead and say, if not this get payment intent,

01:21

which is the method that we created earlier, that returns that object and we can grab the status out here and we can check if it does not equal succeeded. So let's go ahead and add that in.

01:31

Now, if it doesn't equal succeeded spelled correctly, then that's an error. So let's just die dump and say failed. And we can go ahead and flash a message here later,

01:41

but let's just check this out. Now, just to test this, I'm going to go ahead and switch this out to check if it does equal succeeded just to make sure that this is being called correctly.

01:51

Now, for all of this to work in our kind of testing phase, we need to get rid of this payment intent ID over in our car. We've not quite cleared that out yet,

01:59

which we are going to need to do. Let's save the changes on this just so we kind of start fresh with a new payment intent, which hasn't had a successful charge.

02:08

So I'm going to go ahead and again, enter just some fake information here, A, B and C, and let's enter our card number all the way along.

02:18

And let's go ahead and hit confirm order and pay. And we should see that die dump because by the time we call that checkout method, we should see that status equal to succeeded.

02:28

Now, at the moment, of course, it doesn't work because this requires the cart to be passed in. Let's do that once again and come back over here,

02:36

get rid of this payment intent just to start fresh and come over. Now, you'll notice there is a bit of a delay here, of course, because a payment is being processed.

02:44

It's going to take a little while. We'll maybe update the UI a little bit later to disable this or show some sort of loading indicator. That's always best practice to do that.

02:54

So let's go ahead and enter our information and let's go and enter our card number. And now we should see that die dump because the status should be succeeded.

03:04

And of course, we're going to update that to check if it's not succeeded. So there we go. We've got failed.

03:10

So let's switch this back to not. So we know now that if this does not equal succeeded, there is no way that this order can be created. The payment intent can't be modified by the user.

03:21

So this is a really safe way to check this. Now, if this does fail for any reason, of course, we're going to want to alert the user. So we're going to use dispatch browser event

03:31

and we're going to dispatch our notification just at the top of the page to say that it's failed or you could grab the error bag and specifically add an error message.

03:39

It's entirely up to you. So we're just going to say your payment failed. Something like that. The user would rarely see this

03:48

because on the client side, if this fails, we're going to handle flashing them errors. Okay, there we go. Let's go through the entire process

03:57

by getting rid of the payment intent ID and we'll go through and actually create a proper order. Okay, so let's go and log in as my account just so we can see that order being created.

04:10

Let's head over to the cart. Let's just check out orders now. We've got a few in here. So let's just bump the quantity up to two.

04:18

And if we come over to our cart and check out, we should now be able to go ahead and enter our card and hit confirm order and pay. Of course, this is going to take a little while.

04:32

If we keep an eye on the dashboard, we'll see that successful payment. And the reason that this isn't working is because we don't have mail hog running

04:42

so it cannot send the email. So I'd recommend going ahead and making sure you have mail hog up and running before you do this.

04:51

Let's go ahead and do that now actually just so we know that this is working. So let's go ahead and just run mail hog and we'll try this one more time.

04:59

So let's get rid of the payment intent ID, save that out, come back over here, go ahead and add something to our cart. And let's bump this right up to maybe five

05:13

just so we know that this is working. And let's go ahead and enter our card details, hit confirm order and pay. And once that payment comes through,

05:26

we'll be redirected over to our orders page without order because we know that the payment has definitely come through via that payment intent. And there we go.

05:37

We know that we are successfully processing a payment, checking that and verifying it when we submit this through and creating the order only when we get a successful payment.

Sign up to access "Build an E-Commerce Platform" right now.

Episodes

Transcript

Episode summary

Episode discussion