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
08. Handling card errors

Episodes

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

Transcript

00:00
A really important part of a payment flow is, of course, letting the user know
00:04
if their card was declined. At the moment, that's just not going to happen because we have no way to handle this. So let's go over and just do this first of all directly here.
00:12
And then we'll look at doing this within the UI, which is going to be really easy with Alpine. So when we use Confirm Card Payment, we get back an object of data.
00:22
And what we can do is go ahead and destructure this and put in the payment intent from this, but also any error that occurred. So we can go ahead and access this error object.
00:34
Now, what we can do is just at the bottom here, we can go ahead and just console log out on error, or, of course, wrap this in an if statement, which we're going to be doing in a moment.
00:43
So let's go ahead over to the Stripe documentation and look at this decline payment section. And we can just grab a card number, which will just give us either a generic decline
00:53
and insufficient funds decline. So let's go ahead and grab that one. So I'm going to go ahead and just paste this in. Remember, by refreshing this page,
01:00
we're creating a new payment intent. So let's go ahead and enter some details in here. Doesn't matter what we do. Hit Make Payment.
01:08
And what we should see is something console logged out, which is a card error. And, of course, we have a decline code in here. We also have a message, which is safe to show to the user.
01:21
So now we need to figure out how to get this on the page so we can actually show the user. To do this, we're going to go ahead and create another property inside of this object here.
01:30
And we're going to call this card error, which means we can access this really easily within our template. And down here, we are going to go ahead and wrap this error in an if statement to check if it happened.
01:45
So we're just going to say if error. So if we get any error in here, then we first of all probably want to check if it's a card error, because if it's another error, like the fact
01:54
that this has already been paid, we may not want to show this to the user. So in here, let's just nest this if and say if error.type equals card error.
02:07
And let's just triple equals that. Then we want to go ahead and set this card error to the error message, which we saw dumped out in the console just here.
02:19
So that should then set that card error to the message we get back from Stripe. Now, otherwise, we want to go ahead and submit this form to redirect the user, which we're
02:29
going to do in the next episode. OK, so we now want to show this card error somewhere on the page. So we can do this directly with our form,
02:37
because remember, this entire form is an Alpine component. And you can really do this anywhere. It doesn't really matter. I'm just going to keep this super simple by creating
02:46
our div in here to show this. So we're only going to show this using the x show if we have a card error. And the text for this element is going
02:57
to be the card error itself if that exists. And then we can just add some classes to this to style it up, like maybe give it a red color and set the margin top to 2.
03:08
OK, so this should now work. Let's go over, give this a refresh, grab this insufficient funds decline code, and enter anything.
03:19
Hit Make Payment, and there we go. Your card has insufficient funds. Now, this isn't showing us red at the moment, because we haven't done an npm run dev.
03:30
But you can go ahead and do that or run npm run watch. OK, so there's one additional thing that we want to do here. If, for example, my card was declined, and then I wanted to go ahead and choose
03:42
a card that did work, this message is going to stay here. So what we want to do really as part of the process of confirming a card payment is set this card error back to null before we do anything,
03:57
just to kind of have a fresh start before the user does anything. So let's just give this a refresh and try this one more time.
04:04
Let's grab this insufficient funds card and enter some details. Hit Make Payment. We should see that error now in red,
04:13
because we've rebuilt our assets. And now I'm just going to go ahead and use 4242 all along and enter some more details. Hit Make Payment.
04:23
That goes. And then it should successfully process the payment. We can test that by coming over to Payments. And there it is.
04:30
We got them two failed ones that we've just seen and a succeeded one just here. So there we go. That is a very simple handling of card decline errors.

Episode summary

In this episode, we're tackling a really important part of any payment flow: letting the user know when their card is declined. Up until now, our checkout doesn't give any feedback if something goes wrong with the card, so let's fix that together.

First, we'll see how Stripe's confirmCardPayment can give us information about errors, including when a card is declined. We'll use some test card numbers from Stripe's docs to deliberately trigger card declines, and then log out the error information so we know what kind of feedback we can give.

Next, we'll update our UI. We'll store any card error message in our Alpine component and show it directly on the page. That way, if something goes wrong—like insufficient funds—the user immediately sees a friendly message explaining what happened.

We'll also make sure to clear out the error message when the user tries again, so they're not stuck seeing an old error if their next attempt works.

Finally, we test things out by running through a failed payment (with a red error message), then a successful one to make sure everything is working smoothly. Now we've got a user-friendly and reactive error system for card payments! 🚦

Episode discussion

No comments, yet. Be the first!