Building TALL - Flexible billing with Stripe

VIDEO DESCRIPTION:

Play, download and edit the free video Building TALL - Flexible billing with Stripe.

A full day of work compressed into one hour. I implement a very flexible Billing page using Stripe with Laravel Livewire.

I don't fully endorse this video format, it's probably too fast to really follow, but it has been a learning experience.

I am happy with the outcome of the feature though. I can send them a link, with no login required, and then users can easily select between payment amounts, or enter their own amount.

00:00 00. Introduction - The End Result first

STRIPE PORTAL SETUP (TRIAL + ERROR)
02:20 01. Setting Up Stripe Billing Portal
05:15 02. Creating the required Terms and Privacy pages
05:30 03. Researching Stripe Billing Portal
05:49 04. Adding the "Manage Billing" button
06:13 05. Adding the "Manage Billing" routes and Controller
06:38 06. Add a migration to add stripe_id to "accounts"
06:58 07. Add the Stripe PHP package
07:22 08. Wire up the Manage Billing Button
08:13 09. Create first Stripe Client and Session
09:16 10. Setup Stripe Test environment
09:35 11. Redirecting to Stripe Billing
10:27 12. Can Stripe Billing allow for variable amounts?
11:31 13. Uh oh

STRIPE CHECKOUT SETUP
11:52 14. Stripe Checkout might be a better solution?
12:11 15. Switching to Stripe Checkout!
12:36 16. Stripe Checkout Client and Session
13:21 17. Redirecting to (and creating) internal Checkout page
13:48 18. Adding Stripe Javascript
15:32 19. Update Pay Online button & routes

CUSTOMER PAYMENT PAGE
17:35 20. Get Customer's current balance
18:20 21. Display and format Payment Options
22:38 22. Add input for Custom Payment
23:27 23. Add real value for Annual Payment
24:34 24. Additional payment options styling
25:15 25. Adding Alpine JS to update payment button
27:23 26. Learning about Alpine JS x-if
28:23 27. Adding migration for uuid to "accounts" to get account payment url
30:00 28. Payment options styling and cleanup

PAYMENT WORKFLOW
33:17 29. Moving the Stripe Javascript to the "review payment" page
33:54 30. Adding the Stripe Checkout button to the review page
34:21 31. Add forms to submit payments for review
35:50 32. Wiring up Checkout button
36:19 33. Customizing the Stripe Session
36:43 34. Reviewing the payment flow

INTRODUCING LIVEWIRE TO IMPROVE FLOW
37:01 35. Switching to a Livewire component
38:17 36. Replacing Alpine with Livewire
38:37 37. Removing forms and review payment page
38:45 38. Getting custom payments working in Livewire
39:17 39. Adding Checkout button on payment options page
40:06 40. Refreshing and building the Stripe Checkout Session on payment change
46:01 41. Adding Livewire actions for other payment options

STRIPE JAVASCRIPT
48:05 42. Connecting the Checkout button to the correct Stripe Session
49:48 43. Making the Checkout button redirect to Stripe
50:23 44. Customizing Stripe Session

FINAL TESTING, STYLING, DEBUGGING
52:01 45. Finishing touches styling on the payment options
52:53 46. Adding "Payment Successful" page
53:44 47. Success page details and styling
57:10 48. Debugging it on the Live server
58:00 49. Adding a "Thank you!" note to the wonderful customer
59:08 50. Debugging real customer balances
60:23 51. Review and styling based on state
62:30 52. Wrap-up and notice about payments
63:03 53. Full workflow walkthrough!

Download, play and edit free videos and free audios from Building TALL - Flexible billing with Stripe using RedcoolMedia.net web apps