Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel10project>composer create-project laravel/laravel laravel10project
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Create Model and Migration
C:\xampp\htdocs\laravel\laravelproject>php artisan make:model Product -m
A new file named Product.php will be created in the app directory and database/migrations directory to generate the table in our database
app/Models/Product.php
//app/Models/Product.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = ['product_name', 'photo', 'price', 'product_description'];
}
database\migrations\create_products_table.php
//database\migrations\create_products_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('product_name');
$table->text('product_description');
$table->string('photo');
$table->string('price');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('products');
}
};
Database Migration php artisan migrate
C:\xampp\htdocs\laravel\laravel10project>php artisan migrate
Migration table created successfully.
check database table
Create Controller
php artisan make:controller ProductsController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller ProductsController
app/Http/Controllers/ProductsController.php
//
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
class ProductsController extends Controller
{
public function index()
{
$products = Product::all();
return view('products', compact('products'));
}
public function cart()
{
return view('cart');
}
public function addToCart($id)
{
$product = Product::findOrFail($id);
$cart = session()->get('cart', []);
if(isset($cart[$id])) {
$cart[$id]['quantity']++;
} else {
$cart[$id] = [
"product_name" => $product->product_name,
"photo" => $product->photo,
"price" => $product->price,
"quantity" => 1
];
}
session()->put('cart', $cart);
return redirect()->back()->with('success', 'Product add to cart successfully!');
}
public function update(Request $request)
{
if($request->id && $request->quantity){
$cart = session()->get('cart');
$cart[$request->id]["quantity"] = $request->quantity;
session()->put('cart', $cart);
session()->flash('success', 'Cart successfully updated!');
}
}
public function remove(Request $request)
{
if($request->id) {
$cart = session()->get('cart');
if(isset($cart[$request->id])) {
unset($cart[$request->id]);
session()->put('cart', $cart);
}
session()->flash('success', 'Product successfully removed!');
}
}
}
View Blade Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
font-awesome
https://cdnjs.com/libraries/font-awesome/4.7.0
resources/views/layout.blade.php
//resources/views/layout.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Shopping Cart add to cart with Stripe Payment Gateway</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<div class="dropdown">
<button id="dLabel" type="button" class="btn btn-primary" data-bs-toggle="dropdown">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> Cart <span class="badge bg-danger">{{ count((array) session('cart')) }}</span>
</button>
<div class="dropdown-menu" aria-labelledby="dLabel">
<div class="row total-header-section">
@php $total = 0 @endphp
@foreach((array) session('cart') as $id => $details)
@php $total += $details['price'] * $details['quantity'] @endphp
@endforeach
<div class="col-lg-12 col-sm-12 col-12 total-section text-right">
<p>Total: <span class="text-success">$ {{ $total }}</span></p>
</div>
</div>
@if(session('cart'))
@foreach(session('cart') as $id => $details)
<div class="row cart-detail">
<div class="col-lg-4 col-sm-4 col-4 cart-detail-img">
<img src="{{ asset('img') }}/{{ $details['photo'] }}" />
</div>
<div class="col-lg-8 col-sm-8 col-8 cart-detail-product">
<p>{{ $details['product_name'] }}</p>
<span class="price text-success"> ${{ $details['price'] }}</span> <span class="count"> Quantity:{{ $details['quantity'] }}</span>
</div>
</div>
@endforeach
@endif
<div class="row">
<div class="col-lg-12 col-sm-12 col-12 text-center checkout">
<a href="{{ route('cart') }}" class="btn btn-primary btn-block">View all</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
<div class="container">
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@yield('content')
</div>
@yield('scripts')
</body>
</html>
resources/views/products.blade.php
//resources/views/products.blade.php
@extends('layout')
@section('content')
<div class="row">
@foreach($products as $product)
<div class="col-xs-18 col-sm-6 col-md-4" style="margin-top:10px;">
<div class="img_thumbnail productlist">
<img src="{{ asset('img') }}/{{ $product->photo }}" class="img-fluid">
<div class="caption">
<h4>{{ $product->product_name }}</h4>
<p>{{ $product->product_description }}</p>
<p><strong>Price: </strong> ${{ $product->price }}</p>
<p class="btn-holder"><a href="{{ route('add_to_cart', $product->id) }}" class="btn btn-primary btn-block text-center" role="button">Add to cart</a> </p>
</div>
</div>
</div>
@endforeach
</div>
@endsection
resources/views/cart.blade.php
//resources/views/cart.blade.php
@extends('layout')
@section('content')
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width:50%">Product</th>
<th style="width:10%">Price</th>
<th style="width:8%">Quantity</th>
<th style="width:22%" class="text-center">Subtotal</th>
<th style="width:10%"></th>
</tr>
</thead>
<tbody>
@php $total = 0 @endphp
@if(session('cart'))
@foreach(session('cart') as $id => $details)
@php $total += $details['price'] * $details['quantity'] @endphp
<tr data-id="{{ $id }}">
<td data-th="Product">
<div class="row">
<div class="col-sm-3 hidden-xs"><img src="{{ asset('img') }}/{{ $details['photo'] }}" width="100" height="100" class="img-responsive"/></div>
<div class="col-sm-9">
<h4 class="nomargin">{{ $details['product_name'] }}</h4>
</div>
</div>
</td>
<td data-th="Price">${{ $details['price'] }}</td>
<td data-th="Quantity">
<input type="number" value="{{ $details['quantity'] }}" class="form-control quantity cart_update" min="1" />
</td>
<td data-th="Subtotal" class="text-center">${{ $details['price'] * $details['quantity'] }}</td>
<td class="actions" data-th="">
<button class="btn btn-danger btn-sm cart_remove"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
@endforeach
@endif
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align:right;"><h3><strong>Total ${{ $total }}</strong></h3></td>
</tr>
<tr>
<td colspan="5" style="text-align:right;">
<form action="/session" method="POST">
<a href="{{ url('/') }}" class="btn btn-danger"> <i class="fa fa-arrow-left"></i> Continue Shopping</a>
<input type="hidden" name="_token" value="{{csrf_token()}}">
<button class="btn btn-success" type="submit" id="checkout-live-button"><i class="fa fa-money"></i> Checkout</button>
</form>
</td>
</tr>
</tfoot>
</table>
@endsection
@section('scripts')
<script type="text/javascript">
$(".cart_update").change(function (e) {
e.preventDefault();
var ele = $(this);
$.ajax({
url: '{{ route('update_cart') }}',
method: "patch",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("tr").attr("data-id"),
quantity: ele.parents("tr").find(".quantity").val()
},
success: function (response) {
window.location.reload();
}
});
});
$(".cart_remove").click(function (e) {
e.preventDefault();
var ele = $(this);
if(confirm("Do you really want to remove?")) {
$.ajax({
url: '{{ route('remove_from_cart') }}',
method: "DELETE",
data: {
_token: '{{ csrf_token() }}',
id: ele.parents("tr").attr("data-id")
},
success: function (response) {
window.location.reload();
}
});
}
});
</script>
@endsection
Install Stripe Composer https://github.com/stripe/stripe-php
composer require stripe/stripe-php
C:\xampp\htdocs\laravel\my-app>composer require stripe/stripe-php
Create File stripe.php config\stripe.php
//config\stripe.php
<?php
return [
'pk' => env('STRIPE_KEY'),
'sk' => env('STRIPE_SECRET'),
];
Login to your stripe account and copy the STRIPE_KEY and STRIPE_SECRETopen .env file add this
STRIPE_KEY=pk_test_xxxxxxxxxxxxxxxxxxx
STRIPE_SECRET=sk_test_xxxxxxxxxxxxxx
Create Controller StripeController
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller StripeController
app\Http\Controllers\StripeController.php
//app\Http\Controllers\StripeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class StripeController extends Controller
{
public function session(Request $request)
{
//$user = auth()->user();
$productItems = [];
\Stripe\Stripe::setApiKey(config('stripe.sk'));
foreach (session('cart') as $id => $details) {
$product_name = $details['product_name'];
$total = $details['price'];
$quantity = $details['quantity'];
$two0 = "00";
$unit_amount = "$total$two0";
$productItems[] = [
'price_data' => [
'product_data' => [
'name' => $product_name,
],
'currency' => 'USD',
'unit_amount' => $unit_amount,
],
'quantity' => $quantity
];
}
$checkoutSession = \Stripe\Checkout\Session::create([
'line_items' => [$productItems],
'mode' => 'payment',
'allow_promotion_codes' => true,
'metadata' => [
'user_id' => "0001"
],
'customer_email' => "cairocoders-ednalan@gmail.com", //$user->email,
'success_url' => route('success'),
'cancel_url' => route('cancel'),
]);
return redirect()->away($checkoutSession->url);
}
public function success()
{
return "Thanks for you order You have just completed your payment. The seeler will reach out to you as soon as possible";
}
public function cancel()
{
return view('cancel');
}
}
Create View Fileresources/views/cancel.blade.php
//resources/views/cancel.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 10 Shopping Cart add to cart with Stripe Payment Gateway</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class='row'>
<h1>Laravel 10 Shopping Cart add to cart with Stripe Payment Gateway</h1>
<div class='col-md-12'>
<div class="card">
<div class="card-header">
Cancel
</div>
<div class="card-body">
<a href="{{ url('/') }}" class="btn btn-info"> <i class="fa fa-arrow-left"></i> Continue Shopping</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
public/css/style.css
//public/css/style.css
body {
background-color: #f6f6f6;
}
.img_thumbnail {
position: relative;
padding: 0px;
margin-bottom: 20px;
}
.img_thumbnail img {
width: 100%;
}
.img_thumbnail .caption{
margin: 7px;
text-align: center;
}
.dropdown{
float:right;
padding-right: 30px;
}
.btn{
border:0px;
margin:10px 0px;
box-shadow:none !important;
}
.dropdown .dropdown-menu{
padding:10px;
top:10px !important;
width:350px !important;
left:-110px !important;
box-shadow:0px 5px 30px black;
}
.total-header-section{
border-bottom:1px solid #d2d2d2;
}
.total-section p{
margin-bottom:20px;
}
.cart-detail{
padding:15px 0px;
}
.cart-detail-img img{
width:100%;
height:100%;
padding-left:15px;
}
.cart-detail-product p{
margin:0px;
color:#000;
font-weight:500;
}
.cart-detail .price{
font-size:12px;
margin-right:10px;
font-weight:500;
}
.cart-detail .count{
color:#000;
}
.checkout{
border-top:1px solid #d2d2d2;
padding-top: 15px;
}
.checkout .btn-primary{
border-radius:50px;
}
.dropdown-menu:before{
content: " ";
position:absolute;
top:-20px;
right:150px;
border:10px solid transparent;
border-bottom-color:#fff;
}
.productlist {
box-shadow: 0px 10px 30px rgb(0 0 0 / 10%);
border-radius: 10px;
height: 100%;
overflow: hidden;
}
Routes routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StripeController;
use App\Http\Controllers\ProductsController;
//Route::get('/', function () {
// return view('welcome');
//});
Route::post('/session', [StripeController::class, 'session'])->name('session');
Route::get('/success', [StripeController::class, 'success'])->name('success');
Route::get('/cancel', [StripeController::class, 'cancel'])->name('cancel');
Route::get('/', [ProductsController::class, 'index']);
Route::get('cart', [ProductsController::class, 'cart'])->name('cart');
Route::get('add-to-cart/{id}', [ProductsController::class, 'addToCart'])->name('add_to_cart');
Route::patch('update-cart', [ProductsController::class, 'update'])->name('update_cart');
Route::delete('remove-from-cart', [ProductsController::class, 'remove'])->name('remove_from_cart');
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
