This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
75. Submitting a payment

Episodes

0%
Your progress
  • Total: 8h 42m
  • Played: 0m
  • Remaining: 8h 42m
Join or sign in to track your progress
01. Introduction and demo
9m 42s
0%
02. Installing Laravel, Breeze and Livewire
4m 47s
0%
03. Creating categories
9m 4s
0%
04. Recursively displaying categories
8m 21s
0%
05. Product model and migration
2m 50s
0%
06. Showing a product
7m 50s
0%
07. Product variation setup
10m 26s
0%
08. Creating the product selector
10m 34s
0%
09. Loading child variation dropdowns
4m 28s
0%
10. Faking adding the final variation
9m 33s
0%
11. Setting up product stock
4m 34s
0%
12. Calculating variation stock levels
9m 1s
0%
13. Adding product images with MediaLibrary
8m 50s
0%
14. Creating the product gallery
7m 28s
0%
15. Providing a fallback image
2m 56s
0%
16. Adding media to product variations
3m 37s
0%
17. Creating the cart model
3m 37s
0%
18. Registering the cart service
6m 34s
0%
19. Creating a cart session
11m 4s
0%
20. Showing the cart in the navigation
9m 19s
0%
21. Caching the cart instance
3m 2s
0%
22. Adding items to the cart
14m 1s
0%
23. Creating the notification component
8m 5s
0%
24. Showing the user's cart
6m 50s
0%
25. Outputting cart items
4m 50s
0%
26. Showing variation specifics
8m 8s
0%
27. Updating item quantity
8m 2s
0%
28. Removing an item from the cart
6m 1s
0%
29. Calculating the cart summary
8m 7s
0%
30. Showing the category products page
5m 1s
0%
31. Indexing products in Meilisearch
8m 32s
0%
32. Hooking up products to categories
4m 15s
0%
33. Building the product browser
13m 32s
0%
34. Showing child categories
1m 51s
0%
35. Indexing product variations for filtering
8m
0%
36. Outputting variations for filtering
12m 52s
0%
37. Hooking up product filters with Livewire
7m 48s
0%
38. Filtering products
12m 24s
0%
39. Filtering by price
9m 50s
0%
40. Adding global navigation search
7m 50s
0%
41. Handling products that are not live
3m 22s
0%
42. Price range category fix
1m 18s
0%
43. Scaffolding the checkout page
8m 6s
0%
44. Listing shipping options
9m 3s
0%
45. Calculating the cart totals
2m 52s
0%
46. Validating the account form
9m 10s
0%
47. Validating the shipping form
5m 47s
0%
48. Saving the shipping address
8m 4s
0%
49. Selecting a saved shipping address
6m 39s
0%
50. Fix shipping address error for non authenticated users
1m 7s
0%
51. Redirecting if the cart is empty
2m 42s
0%
52. Checking for quantity changes
7m 11s
0%
53. Syncing if quantities have changed
11m 59s
0%
54. Flashing a message when quantities have changed
5m 48s
0%
55. Setting up for orders
5m 17s
0%
56. Creating an order
13m 24s
0%
57. Attaching variations to order
6m 13s
0%
58. Reducing stock after ordering
2m 56s
0%
59. Meilisearch filter query fix
1m 33s
0%
60. Showing the order confirmation page
7m 39s
0%
61. Attaching orders for registering guest users
5m 17s
0%
62. Scaffolding the orders page
5m 30s
0%
63. Filling in order variation details
5m 24s
0%
64. Returning the order status
4m 39s
0%
65. Detecting order status changes
10m 49s
0%
66. Sending the order status change email
5m 12s
0%
67. Sending an order confirmation email
2m 47s
0%
68. Handling deleted cart records
4m 44s
0%
69. Transferring the guest cart
2m 44s
0%
70. Creating a presenter for the order status
4m 31s
0%
71. Setting up Stripe
3m 43s
0%
72. Creating and updating a PaymentIntent
16m 21s
0%
73. The Stripe card form
3m 35s
0%
74. Validating before payment
5m 34s
0%
75. Submitting a payment
6m 40s
0%
76. Checking for a successful payment
5m 47s
0%
77. Handling Stripe client errors
3m 11s
0%
78. Entangling Stripe customer data
2m 18s
0%

Transcript

00:00
OK, now we're actually going to go ahead and submit a payment.
00:03
So you're going to want to make sure you have opened your payments page over in Stripe under test mode. And we'll see these roll in as we go ahead and create them. OK, so what we want to do is over in our checkout template,
00:17
just at the console log that we've got here, actually go ahead and confirm a card payment. So to do this, we're going to go ahead and await on the Stripe instance that we set up earlier with our init method.
00:30
And we're going to go ahead and say confirm card payment. Now into this, the first argument is going to be our payment intent client secret, which we already know we have down here under our card element. And that is here.
00:45
So let's go ahead and grab that. Go back up to the top. And let's put that as our first argument. And I'm just putting that down.
00:53
So it's a little bit clearer. Now the second argument is going to be an object with anything that you need to pass through in here. You can check out the Stripe docs to find out the kind of information
01:04
you can pass through in here. But we're going to pass through a payment method object. And we know that we are charging a card. So we're going to pass in the card element that we also created earlier
01:17
and set up here because we need to reference that again. Now the next thing and really important are the billing details. Now you're going to want to fill in as much of this information as you can. For now, though, I'm just going to go ahead and pass in the email address.
01:30
Now we don't quite have this at the moment. So I'm going to go ahead and fake this by just passing in my email address. So I can see that over on the Stripe payment dashboard. But we'll go ahead and change this in a later episode.
01:42
So this actually sends through the user's email address, whether they're a guest or whether they're already signed in. OK. So back from this, we're going to get an object of lots of different things.
01:55
But we want to specifically extract out or destructure out the payment intent itself. That's going to give us back the payment intent with a new successful status if this charge has been successful or if not, an error. So just underneath here, let's go ahead and console log both of these out.
02:14
So payment intent and error, just to see what's in both. OK. Let's go ahead and process a payment. Just to quickly recap, remember we're validating.
02:26
And only if we don't have any errors in our form are we going ahead and trying this charge. So let's go over and just test this out. So I'm going to give the page a refresh. We'll hit Confirm Order and Pay.
02:37
Of course, at this point, no payment gets sent through. Let's go ahead and just fill in some details in here. And let's go ahead and add a fake address. And let's fill in our card number.
02:48
Now, for this, you can use 4242 all the way along just to add in some fake data. There are lots of different cards that you can try for failures, which we're going to be looking at later. And also 3D Secure, which we'll be looking at later as well.
03:02
OK. So now that I've updated all of these validation errors and I've given a correct card, let's hit Confirm Order and Pay. And let's wait for this to go through.
03:11
OK. So once that's done, if we just head up here, we look like we've got an error here. So let's have a look. OK.
03:19
Yeah. So we've not passed this in correctly because, of course, what we're going to need to do is put this in single quotes. It's trying to look for a variable name with that client secret.
03:30
So let's try this out again. We'll keep the console open now. And let's go ahead and pass in an email address and a fake address. And again, we'll just use 42, which is just a successful card all the way along.
03:43
Hit Confirm Order and Pay. And we should now see the payment intent just here, which is this first object, and then undefined for the error because, of course, we don't have any errors. So if we take a look at this here, we've got the correct amount.
03:57
So this is exactly what we saw dumped out earlier on our server. And if we scroll all the way down here, we've got a status of succeeded. Now, if we head over to our payment dashboard here and we just give this a refresh, we should see, once this loads, a successful charge of $180.
04:16
And, of course, the customer email has been filled. That's what we manually put in here earlier. And, of course, you can add a first name, last name, and any other billing details you need in here.
04:26
OK. So we've successfully processed our payment, but we do need to handle errors. Let's just set up for this now. So if errors, then we're going to want to go ahead and show an error on the page.
04:38
Otherwise, we're going to want to go ahead and grab the payment intent ID. So grab payment intent ID, which we technically already have, set it to a property within Livewire, and then call the checkout method, I think we called it, to actually go ahead and process the order.
04:56
Because at the moment, we're processing a payment, but we're not actually processing the order. So, of course, the user is just going to be stuck over on the checkout. Now, notice, if we try and click this again, this is the whole point of a payment intent,
05:10
you can see here that, first of all, we're getting an error. That is probably just because this has not been updated. But if we did try to do this again, so if we just give the page an entire refresh, remember, we've already processed that payment.
05:24
We've still got the same payment intent over in our cart. But if we go ahead and try this charge again, it's not going to allow us to do it. So we've already been charged. But you can see here, if we just scroll all the way up.
05:39
Oh, yeah. So we've got errors is not defined. So that is error. Let's just double check that.
05:43
Yeah. So let's go over. And let's once again, and hopefully, finally, see that we can't be charged more than once for this particular cart session, which we've already technically and potentially created
05:56
an order for. So let's do this again and hit confirm. And there we go. So we get a 400 back.
06:03
If we look at the response from this and dive into it, you can see that we've got a payment intent unexpected state. You cannot confirm this payment intent because it has already been succeeded after being previously confirmed.
06:16
So Stripe is not letting us charge again, because at this point, it's pretty much assumed that the order has been created, or at least we've taken the payment. That's the most important thing. We don't want to charge the customer twice.
06:29
OK, so we've pretty much scaffolded this up. Obviously, the next thing we want to do is call checkout and make sure that this goes through. Let's do that in the next episode.
78 episodes8 hrs 42 mins

Overview

Build a robust e-commerce platform with a Laravel and Livewire. Features products with unlimited and flexible variations, a product browser with filters and price range slider, global product search, guest checkout, shipping and payment implementation, order status tracking and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!