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

73. The Stripe card form

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

Okay, so before we actually pass the payment intent secret into our card form to process a payment We actually need the card form and for that, of course, we're going to use stripe.js

00:11

so the first thing that we're going to do is head over to the docs and we're going to grab the Script snippet for this and we're going to pop this in app.blade.php Now this does get called on every single page of your site, but this is what stripe recommends to prevent against fraud So we add this to our script section come over to our site and that is stripe loaded in great

00:33

Okay. So the next thing to do is actually set this up for this We're going to use Alpine and we're going to attach this to our entire form with an init method So we can go ahead and set this up when this form loads up We'll also use Alpine to submit this form for us

00:48

So we can do things like validate the entire area here before we start to process a payment Okay, so for this we're going to go ahead and initialize Alpine with X data and inside of here We're going to go ahead and create out an init method that goes ahead and initializes Alpine as we've already seen or runs When this is initialized, okay, so in here, we're going to need some properties

01:11

So let's create out a stripe property at the top to hold our stripe instance for this we're going to go ahead and just set this to a New stripe instance into this we're going to need our Publishable key which we set earlier over in config and stripe. So for this we can just go ahead and directly put this in with blade

01:31

so config and Stripe key and that's pretty much it. We now have a stripe instance ready to start creating our our form elements So let's go ahead and say elements this stripe

01:46

Elements and then we're going to go ahead and create our card element Which we're also going to attach up here because we're going to need to reference that later. So we're going to say this Card element, which is what we're going to see on the page and we're going to go ahead and create out a Card element. That's it. Now. We need to go ahead and mount it to the page

02:07

So down here where we have our stripe card form, we need to create out a div with maybe an ID of Card element. I think that's what's in the documentation and we're going to mount it into here. Let's just comment out this client secret Before we go ahead Okay, so we're going to go ahead and mount it this card

02:27

element and Mount and we're just going to pass in the selector for that card Element and that's it Now if we come over and give this a refresh

02:38

We should see our stripe card form and we can fill this in with any data that we need just while we're here Let's hook up the submission of this form So when we do submit this we don't go ahead and call checkout immediately But instead we defer to a submit method directly within here

02:58

So let's go ahead and create out a submit method and what we're actually going to do is later on Using live wire call that checkout method from within Alpine. So for now, let's just go ahead and console log Submit and that's just change that around to go ahead and call submit now Of course, we can't use live wire to do this

03:20

So we're just going to change this to X on submit prevent and of course that will now call the Alpine method in here Let's go over and just check this out Of course by bringing up our console to keep an eye on this and when I click this, there we go You

Episode summary

In this episode, we're starting to set up the Stripe card form for our site, getting ready to accept payments. We kick things off by heading over to the Stripe documentation and grabbing the JavaScript snippet for Stripe.js. This script is essential for security and has to be included on all pages, just like Stripe recommends.

After adding the Stripe script, we move on to building our payment form using Alpine.js. We initialize Alpine on the form and create an init method, letting us set up everything we need as soon as the form loads. Inside this, we create a Stripe instance using our publishable key (sourced from our config), and then set up the Stripe Elements API to create the actual card input field.

We add a div to the form for the Stripe card element and mount the card field on the page so it's ready for users to type in their card details. Finally, we hook the form submission up to an Alpine method, making sure we prevent the default submission so we can later handle everything via Livewire. For now, submitting the form just logs to the console, but this sets us up nicely for integrating the payment process in the next steps.

Episode discussion

No comments, yet. Be the first!