In this episode, we're focusing on handling errors from Stripe on the client side. Since users are charged directly from the client, we need a way to show them if something goes wrong during the payment process. We'll start by testing a simple scenario: what happens when a card is declined.
We walk through using one of Stripe's test card numbers that's set up to simulate a declined transaction. First, we add a product to the cart, fill out the form with the test card, and try to process the payment. In the console, we notice we get a 402 error from Stripe, but currently we're not actually showing any user-friendly error messages.
To fix this, we jump into the checkout page's Blade template and set up a mechanism—similar to our earlier notification component—to flash an error message to the user. Now, whenever an error like 'card declined' happens, the message is displayed clearly on the page. You can control the appearance and duration of the error however you want. We give it a test drive with the declined card number, and the message shows up as expected!
Beyond declined cards, Stripe's test environment lets us try more complex scenarios too, like 3D Secure authentication flows. We briefly try a 3D Secure test card, see the authentication dialog pop up, and successfully step through the flow. While we notice our checkout page is still missing a loading spinner (we promise to add that soon!), at this point you can experiment with various Stripe test cards to make sure all edge cases are nicely handled for your customers.