Build an E-Commerce Platform

Sign in Get started

This episode is for members only

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

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

02. Installing Laravel, Breeze and Livewire

03. Creating categories

04. Recursively displaying categories

05. Product model and migration

06. Showing a product

07. Product variation setup

08. Creating the product selector

09. Loading child variation dropdowns

10. Faking adding the final variation

11. Setting up product stock

12. Calculating variation stock levels

13. Adding product images with MediaLibrary

14. Creating the product gallery

15. Providing a fallback image

16. Adding media to product variations

17. Creating the cart model

18. Registering the cart service

19. Creating a cart session

20. Showing the cart in the navigation

21. Caching the cart instance

22. Adding items to the cart

23. Creating the notification component

24. Showing the user's cart

25. Outputting cart items

26. Showing variation specifics

27. Updating item quantity

28. Removing an item from the cart

29. Calculating the cart summary

30. Showing the category products page

31. Indexing products in Meilisearch

32. Hooking up products to categories

33. Building the product browser

34. Showing child categories

35. Indexing product variations for filtering

36. Outputting variations for filtering

37. Hooking up product filters with Livewire

38. Filtering products

39. Filtering by price

40. Adding global navigation search

41. Handling products that are not live

42. Price range category fix

43. Scaffolding the checkout page

44. Listing shipping options

45. Calculating the cart totals

46. Validating the account form

47. Validating the shipping form

48. Saving the shipping address

49. Selecting a saved shipping address

50. Fix shipping address error for non authenticated users

51. Redirecting if the cart is empty

52. Checking for quantity changes

53. Syncing if quantities have changed

54. Flashing a message when quantities have changed

55. Setting up for orders

56. Creating an order

57. Attaching variations to order

58. Reducing stock after ordering

59. Meilisearch filter query fix

60. Showing the order confirmation page

61. Attaching orders for registering guest users

62. Scaffolding the orders page

63. Filling in order variation details

64. Returning the order status

65. Detecting order status changes

66. Sending the order status change email

67. Sending an order confirmation email

68. Handling deleted cart records

69. Transferring the guest cart

70. Creating a presenter for the order status

71. Setting up Stripe

72. Creating and updating a PaymentIntent

73. The Stripe card form

74. Validating before payment

75. Submitting a payment

76. Checking for a successful payment

77. Handling Stripe client errors

78. Entangling Stripe customer data

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.

Episode summary

In this episode, we're finally getting to the fun part—submitting a payment! We'll walk through setting up the code to actually confirm a card payment using Stripe in test mode. You'll see how to pass in the payment intent client secret and include billing details, like the customer's email, to ensure Stripe gets all the info it needs.

We'll try out a sample payment using those classic Stripe test cards (hello, 4242 4242 4242 4242!) and see how the response from Stripe tells us if it all worked or if there was an error. As we go, we'll also talk about handling any errors, so users know if something's gone wrong, and make sure they can't accidentally pay twice for the same order.

You'll also get a peek at the Stripe dashboard to check that the payment went through, and we'll prep the code to process the order only after a successful payment. Stick around—next up, we'll tie the payment and the order together so the process is seamless!

Episode discussion

No comments, yet. Be the first!