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

76. Checking for a successful 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

If this payment is successful, we now want to call the checkout method within our LiveWire component. We don't actually need to grab the payment intent ID, because we've already got that over in our car.

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.

78 episodes•8 hrs 42 mins•3 years ago

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!