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

74. Validating before 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

We're going to take this part to validate this form before we even attempt a payment,

00:05

which we're going to be doing in the next episode. This is really important because we don't want to try and process a payment until we know that this form is completely filled in, whatever data you're accepting and validating. So the first thing that we're going to do over in checkout is go ahead and call the

00:23

validate method within the LiveWire component from this Alpine submit method. How are we going to do that? Well, the first thing that we're going to do is convert this to an async function. We're going to come over to checkout, and we're going to create a kind of proxy to validate

00:39

our form. So we're going to call this maybe call validate, and it's just saying here this and validate. Now we know that we are doing this just up here when we submit the payment through. I think we called this checkout.

00:56

So we're doing this here, which is fine. We can keep it in there as well, but we also want that proxy to do this before we go and actually process a payment. So let's go ahead and call this call validate method directly from in here.

01:08

How do we do that? Well, we're going to go ahead and say await. We're going to use a special LiveWire property to go ahead and access any of the methods or properties that we have on our LiveWire component.

01:20

So we're just going to call call validate, and that's enough to go ahead and trigger that validation. Down here, we're going to go ahead and say console log submit payment or process payment. Now this is going to be called at this point even if validation fails.

01:35

We're going to see how we can cover that in a minute. Okay, let's go ahead and just get rid of our console for a second. Let's go ahead and hit confirm order and pay, and you can see here that the validation has happened exactly as we would expect, and we've got submit payment.

01:51

So we're triggering this validation, but we're also then going ahead and potentially submitting the payment information through the Stripe card form, which at the moment has disappeared. We'll cover that in just a second. Okay, so how are we going to work out if we actually have any errors and whether we want

02:07

to go ahead and submit the payment? Well, to do this, again, we're going to kind of proxy this. So let's go in here and create out a get error count method, and let's go ahead and return. We need to grab the validation error bag from Livewire.

02:26

If we just go over to our base component within Livewire, we've got this validates input trait. Inside of here, we've got this get error bag method, which returns to us the error bag, which could potentially be filled with any errors. So we're going to return this get error bag.

02:43

On its own, that's not going to work, but we're going to use the count property. So this is going to return to us how many errors there are. Now, if there are zero errors, we can go ahead and continue to process the payment. So once again, down here, what we're going to do is maybe just assign this.

02:58

So error count, I'm going to await on get error count, console log the error count, and we should see how many errors we get. Okay, let's go over and let's go up to the top here, hit confirm order and pay. This will be a little bit slow, but you can see that we've got four errors, 1, 2, 3, 4.

03:22

Now, if we go ahead and fill all this information in, so let's just enter some details in here, A, B, C, hit confirm, we get zero. Well, in our case, we get one because this is already an account in use. So let's try that again.

03:39

And there we go, we get zero. So we know now that we can compare this error count with zero and then only submit the payment if this is the case. So what I'm going to do is just go ahead and create an if statement out in here and just

03:52

do an early return. So if error count is greater than or equal to one, then just return and do nothing. We can improve on this later. Okay, let's go over and just give this a refresh, hit confirm order and pay.

04:07

And you can see the validation errors come in, but we don't submit the payment. Let's go ahead and fill in all of this information once again, A, B, and C, hit that. And there we go, we get the submit payment. So although this is a little bit of a roundabout way to do things, it means that we don't go

04:26

ahead and submit the payment until we know that we've got all of the information filled in our validation rules. Because we're now bringing in Alpine here to actually set Stripe up and process a payment, we need to talk between the Alpine and Livewire components.

04:41

Okay, so the payment form, as you can see at the moment, has disappeared. Now the reason for that is when Livewire is re-rendering this, this is disappearing because it was previously set up with Alpine. Now for this, what we can pretty much do is just go over to our card element, let's find

05:00

that on the page, and just do a wire ignore on this. So Livewire doesn't replace this out when it does a patch of the DOM. So what we can do now is just check and make sure that this stays in here. If we hit confirm order and pay, we get all of our error messages, but all of this stays

05:17

in here because Livewire is ignoring it. And once again, we can go ahead and fill all of this information in. And once we've done that, and that is successful, we still have our payment form, and we can go on and submit the payment, which is exactly what we're doing in the next episode.

Episode summary

In this episode, we focus on making sure our checkout form is fully validated before we even attempt to process a payment. It's all about preventing any unnecessary calls to the payment processor (like Stripe) until we're confident the user's form input is correct.

You'll see how we:

Hook up the validation process to run first when you try to submit the form.
Write a little "proxy" method to trigger Livewire's validation from Alpine.
Check for validation errors right after, and only move forward if there aren't any.
Prevent the payment process from even starting if there are any problems with the input data.

We also make sure the Stripe card form doesn't disappear when the Livewire component updates, thanks to wire:ignore—super useful!

In short, by the end of this episode, you’ll have the form validating on submit, preventing payments if there are any errors, and keeping everything looking smooth on the frontend. Next up: actually processing the payment!

Episode discussion

No comments, yet. Be the first!