Build a shopping cart with Laravel Cashier and Vue

In this 55 minute video, I'll show you how to create a basic e-commerce site powered by a Vue SPA and Laravel API, which takes payments through Stripe thanks to the Laravel Cashier package.

You'll learn how to:

- Seed a database with fake products and categories
- Populate a Vue frontend application with products from our API
- Collect user location and credit card information
- Make charges to a customer's payment method with Cashier

- 0:00 Intro
- 0:46 Migrations and Data Structure
- 7:35 Database Seeding
- 15:45 Scaffolding the API
- 18:20 Building the Vue Frontend
- 38:00 Installing Stripe and Cashier
- 43:55 Processing a Payment
- 53:40 Conclusion

[uniqueprogramming]

I was always afraid of payment but you make it look like extremely easy. Thanks man for this amazing content. Please next upload subscription with cashier.

[davidrowlands]

For people who got an error around the 11 minute mark because of Str::slug($name). The video did not show that the module was being imported because it is done automatically in his editor.

You need to import the Str module at the top of the file:
use Illuminate\Support\Str;

so that your code looks like this:

use App\Models\Category;
use
use Illuminate\Support\Str;

[fizoul]

Sir, you are a treasure, thank you very much for these videos, I have never watched a tutorial that is that organized, fast, and simple as this one, I have learned a lot in a short time, plus you write nice clean code with good practices, and we can see how much experience you have through that, much love and admiration <3

[DevNightly]

Is there a way to autofill the card details on the card element? I am storing the card details in my database.

[apptimegr]

Premium content. Just to the point. Nicely made! 👏

[alexlytle]

This dude is the fastest typer i have ever seen

[flutter]

what if the base route has a segment? How do I provide vue routes in the routes js file ?

[musawirhussain]

Error in cents.
Hello, I am seeing the amount I am charging isn't the same on stripe.
I charged for 420 EUR and on the stripe, it shows 4Eur.
please help me with this

[TysonLondon]

This is some A+++ Content here! Thanks :) I love the speed of this video too!

[LinhPham-iufr]

Thank your for the video. Can I ask a question. How can I setup the terminal inside phpstorn that has command completion like you?

[pradeepspace]

Wow Andrew, This is a fantastic content. Thanks for sharing this video 🙂

[faizanakbar]

I have done exactly everything from the video but the summary page won't load. I checked stripe, it is getting successful requests under 'Developer' tab but nothing in payments. I have done exactly the same from the video, I copied the code when the transaction wasn't taking place and still no use. Its been 2 days and I cannot figure it out. I checked console log and it shows some error regarding 'reduce'.

[peterbraganza]

Amazing video, so concise and to the point. Love It....more videos like these please !!!.

[igerardogc]

Excellent video, what IDE did you use to develop that app? And what plugin do you use for the html tag breadcrumb.

[jai]

I tried following this, but the credit card form does not appear. I don't know whats wrong

[andrewang]

When I do

products.find(product => product.slug === route.params.slug);

Sometimes the data is loaded, and sometimes not. Does anyone know the reason? I suppose it'd be something related to the lifecycle as the Products/Show page is loaded before the find() function is done. It may be because I have over 700 products in the database. Any possibility that I can ask the page to wait until the find() function is done?

[fatimabartels]

How to add an image to this? coz its all blank image.. thank you

[JohnnyBigodes]

I know that for learning it is better to type everything by myself, but on this video you could really use the autocompletion of PHPStorm, so that new people on your channel is not bothered to see you typing everything. That would also show the power of the autocompletion in PHPStorm.

With autocompletion I mean:
- HTML scaffold
- Autocomplete classes
- Import class namespaces
and so on.

[pady]

thanks for the video. everything worked in dev, however when i deployed my demo with strip still in test mode. when i do npm run dev and then deploy the strip still works but as soon as i do npm run prod and deploy i get 'IntegrationError: Missing value for Stripe(): apiKey should be a string." Any suggestion as to why would be appreciated. Even when i hard code the key in it still doenst recognise it despite being a string..

[alenieto]

Which extension makes the arrows like that?