Laravel checkout page with signup account

Laravel checkout page with signup account

Integrating a payment gateway is a critical aspect of any e-commerce application. In this guide, we will walk through the process of creating a checkout system in Laravel using Stripe. We’ll cover setting up Stripe, creating the necessary controllers, handling the payment process, and setting up routes.

Checkout.blade.php

<head>
<title>Checkout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>

<br/>

<?php

$service_orders_details = DB::table('service_orders')->where('order_id', $order_id)->get();

foreach($service_orders_details as $t_details){
$service_template_id = $t_details->service_template_id;
$service_plan_id = $t_details->service_plan_id;
$do_you_want_hosting = $t_details->do_you_want_hosting;
}


$template_details = DB::table('service_templates')->where('id', $service_template_id)->get();
$service_plan_exists = DB::table('service_orders')->where('order_id', $order_id)->where('do_you_want_hosting', 1)->exists();


foreach($template_details as $t_details){
$thumbnail = $t_details->thumbnail;
$category = $t_details->category;
$theme_title = $t_details->theme_title;
$description = $t_details->description; 
$short_description = $t_details->short_description; 
$cost = $t_details->cost;
}

$a=[];
array_push($a, $cost);


$plan_title = '';
$plan_cost = '0.00';
$plan_domain = '';


$service_plan_details = DB::table('service_plan')->where('id', $service_plan_id)->get();

foreach($service_plan_details as $t_details){
$plan_title = $t_details->plan_title;
$plan_cost = $t_details->plan_cost;
$plan_domain = $t_details->plan_domain;
}

array_push($a, $plan_cost);


?>
<br/>

<div class="container" id="main-checkout-product-info"><div class="row">
<div class="order-1 order-md-2 col-lg-5 col-md-6 right">
<div class="d-block d-sm-none">
<div class="checkout-logo">

</div>
<hr>
</div>


<div id="cart-item" class="position-relative">

<div class="payment-info-loading" style="display: none;">
<div class="payment-info-loading-content">
<i class="fas fa-spinner fa-spin"></i>
</div>
</div>


<!-- template product details -->

<div class="checkout-products-marketplace" id="shipping-method-wrapper">
<div class="mt-3 bg-light mb-3">

<div class="p-2" style="background: antiquewhite;">
<img src="{{asset('uploads')}}/{{$thumbnail}}" alt="Stouffer" class="img-fluid rounded" width="30">
<span class="font-weight-bold"> &nbsp; Template</span>
<div class="rating_wrap">
<div class="rating">
<div class="product_rate" style="width: 80%"></div>
</div>
</div>
</div>

<div class="p-3">

<div class="row cart-item">
<div class="col-3">
<div class="checkout-product-img-wrapper">
<img class="item-thumb img-thumbnail img-rounded" src="{{asset('uploads')}}/{{$thumbnail}}" height="60px">
</div>
</div>

<div class="col">
<p class="mb-0">{{$theme_title}}</p>
<p class="mb-0">
<small><?php echo substr($short_description, 0, 100); ?></small>
</p>


</div>

<div class="col-auto text-end">
<span id="template_cost0" style="display:none;">{{$cost}}</span>
<p><span id="template_cost">{{$cost}}</span> INR</p>
</div>
</div>

</div>

<hr>

</div>

</div>
<!-- premium services start -->

<div class="checkout-products-marketplace" id="shipping-method-wrapper">
<div class="mt-3 bg-light mb-3">

<div class="p-2" style="background: antiquewhite;">
<img src="https://thumbs.dreamstime.com/b/whatsapp-logo-messenger-icon-realistic-social-media-logotype-whats-app-button-transparent-background-272905341.jpg" alt="Stouffer" class="img-fluid rounded" width="30">
<span class="font-weight-bold"> &nbsp; Premium Services</span>
<div class="rating_wrap">
<div class="rating">
<div class="product_rate" style="width: 80%"></div>
</div>
</div>
</div>

<div class="p-3">

<div class="row cart-item">
<div class="col-3">
<div class="checkout-product-img-wrapper">
<img class="item-thumb img-thumbnail img-rounded" src="{{asset('uploads')}}/{{$thumbnail}}" height="60px">
</div>
</div>

<div class="col">
<p class="mb-0">Whatsapp Support</p>
<p class="mb-0">
<small>You will get premium support like whatsapp support</small>
</p>


</div>

<div class="col-auto text-end">
<p><span id="premium_cost">0</span> INR</p>
</div>
</div>

</div>

<hr>

</div>

</div>
<!-- other services start -->

<div class="checkout-products-marketplace" id="shipping-method-wrapper">
<div class="mt-3 bg-light mb-3">

<div class="p-2" style="background: antiquewhite;">
<img src="https://thumbs.dreamstime.com/b/whatsapp-logo-messenger-icon-realistic-social-media-logotype-whats-app-button-transparent-background-272905341.jpg" alt="Stouffer" class="img-fluid rounded" width="30">
<span class="font-weight-bold"> &nbsp; Other Plan</span>
<div class="rating_wrap">
<div class="rating">
<div class="product_rate" style="width: 80%"></div>
</div>
</div>
</div>

<div class="p-3">




<?php

foreach($service_orders_details as $sd){

$arr = explode(",",$sd->other_plan_ids);

foreach($arr as $ar){
$other = DB::table('other_service_plan')->where('id', $ar)->get();
$otherSum = DB::table('other_service_plan')->where('id', $ar)->sum('cost');

foreach($other as $d){

array_push($a, $d->cost);
?>

<div class="row cart-item">
<div class="col-3">
<div class="checkout-product-img-wrapper">
<img class="item-thumb img-thumbnail img-rounded" src="https://www.dhanush.com/wp-content/uploads/2019/03/Managed-Services-1366x1106.png" height="60px">
</div>
</div>

<div class="col">
<p class="mb-0"><?php echo ucfirst($d->product_name); ?></p>
<p class="mb-0">
<small>Quantity : {{$d->qty}}</small>
</p>


</div>

<div class="col-auto text-end">
<input type="hidden" name="other_cost" class="other_cost" value="{{$d->cost}}">
<p><span id="premium_cost">{{$d->cost}}</span> INR</p>
</div>
</div><hr/>

<?php } } } 



?>



</div>

<hr>

</div>

</div>
<!-- hosting buying details -->

<script>

$(document).ready(function(){

let totalInput = $('#totalInput').val();
let subtotalInput = $('#subtotalInput').val();

$('#numberOfPages').change(function(){
let numberOfPages = $(this).val();

if(numberOfPages >= 5){
let total = numberOfPages - 5;
let amt = total*500;
// alert(amt);
let start_value = $('#template_cost0').text();
let sv = Number(start_value);
$('#template_cost').text(amt+sv);
$('#total').text(Number(totalInput)+amt);
let actualcost = Number(totalInput)+amt;
$('#subtotal').text(Number(subtotalInput)+amt);
$('#actualcost').val(actualcost);

}
});


});


$(document).ready(function() {

$('#premium_services').change(function() {

let subtotalInput = $('#subtotalInput').val();
let totalInput = $('#totalInput').val();
let premium_services = 500;

if($(this).is(":checked")) { 
$('#premium_cost').text(premium_services);
let initVal = $('#subtotal').text();
let initValTotal = $('#total').text();
$('#subtotal').text(Number(initVal)+premium_services);
$('#total').text(Number(initValTotal)+premium_services);
let actualcost = Number(initValTotal)+premium_services;
$('#actualcost').val(Number(actualcost));
}
else{
let initVal = $('#subtotal').text();
let initValTotal = $('#total').text();
$('#premium_cost').text(0);
$('#subtotal').text(Number(initVal-premium_services));
$('#total').text(Number(initValTotal-premium_services));
let actualcost = Number(initValTotal-premium_services);
$('#actualcost').val(actualcost);
}


});

});

</script>


<?php

if($service_plan_exists){
?>

<div class="checkout-products-marketplace" id="shipping-method-wrapper">
<div class="mt-3 bg-light mb-3">

<div class="p-2" style="background: antiquewhite;">
<img src="{{asset('uploads')}}/{{$thumbnail}}" alt="Stouffer" class="img-fluid rounded" width="30">
<span class="font-weight-bold"> &nbsp; Hosting Plan</span>
<div class="rating_wrap">
<div class="rating">
<div class="product_rate" style="width: 80%"></div>
</div>
</div>
</div>

<div class="p-3">

<div class="row cart-item">
<div class="col-3">
<div class="checkout-product-img-wrapper">
<img class="item-thumb img-thumbnail img-rounded" src="{{asset('uploads')}}/{{$thumbnail}}" height="60px">
</div>
</div>

<div class="col">
<p class="mb-0">{{$plan_title}}</p>
<p class="mb-0">
<small>{{$plan_domain}} Domain</small>
</p>


</div>

<div class="col-auto text-end">
<p>{{$plan_cost}} INR</p>
</div>
</div>

</div>

<hr>

</div>

</div>


<?php } ?>

<div class="mt-2 p-2">
<div class="row">
<div class="col-6">
<p>Subtotal:</p>
</div>
<div class="col-6"><input type="hidden" value="<?php echo array_sum($a); ?>" id="subtotalInput">
<p class="price-text sub-total-text text-end"> <span id="subtotal"><?php echo array_sum($a); ?></span> INR</p>
</div>

</div>

<div class="row">
<div class="col-6">
<p>Tax:</p>
</div>
<div class="col-6 float-end">
<p class="price-text tax-price-text">0.00 INR</p>
</div>

</div>
<div class="col-6">
<!-- <p>Shipping fee:</p> -->
</div>

<div class="col-6 float-end">
<!-- <p class="price-text shipping-price-text">$0.00</p> -->
</div>

</div>

<?php array_push($a, 0); ?>

<div class="row">
<div class="col-6">
<p><strong>Total</strong>:</p>
</div>

<div class="col-6 float-end"><input type="hidden" value="<?php echo array_sum($a); ?>" id="totalInput">
<p class="total-text raw-total-text" data-price="13.86"> <span id="total"><?php echo array_sum($a); ?></span> INR </p>
</div>
</div>
</div>
</div>

<hr>
<!-- start coupen code -->

<div class="mt-3 mb-5">
<div class="checkout-discount-section">
<!-- <a href="#" class="btn-open-coupon-form">You have a coupon code?</a> -->
</div>

<div class="coupon-wrapper" style="display: none;">
<div class="row promo coupon coupon-section">

<div class="col-lg-8 col-md-8 col-8">
<input type="text" name="coupon_code" class="form-control coupon-code input-md checkout-input" value="" placeholder="Enter coupon code...">
<div class="coupon-error-msg">
<span class="text-danger"></span>
</div>
</div>

<div class="col-lg-4 col-md-4 col-4 text-end">
<button class="btn btn-md btn-gray btn-info apply-coupon-code float-end" data-url="http://127.0.0.1:8000/coupon/apply" type="button" style="margin-top: 0;padding: 10px 20px;><i class="><i class="fa fa-gift"></i> Apply</button>
</div>

</div>
</div>

<div class="clearfix"></div>

</div>

<!-- end coupen code -->


</div>
<!-- Left sidebar start -->

<?php

$service_orders_details = DB::table('service_orders')->where('order_id', $order_id)->get();

foreach($service_orders_details as $t_details){
$service_template_id = $t_details->service_template_id;
$service_plan_id = $t_details->service_plan_id;
$do_you_want_hosting = $t_details->do_you_want_hosting;
}


$template_details = DB::table('service_templates')->where('id', $service_template_id)->get();
$service_plan_exists = DB::table('service_orders')->where('order_id', $order_id)->where('do_you_want_hosting', 1)->exists();

foreach($template_details as $t_details){
$thumbnail = $t_details->thumbnail;
$category = $t_details->category;
$description = $t_details->description; 
$cost = $t_details->cost;
}


$service_plan_details = DB::table('service_plan')->where('id', $service_plan_id)->get();

foreach($service_plan_details as $t_details){
$plan_title = $t_details->plan_title;
$plan_cost = $t_details->plan_cost;
$plan_domain = $t_details->plan_domain;
}


?>
<!-- checkout details end -->

<div class="col-lg-7 col-md-6 left">
<div class="d-none d-sm-block">
<hr>
</div>

<form method="post" action="{{route('checkoutdata')}}" enctype="multipart/form-data">

@csrf

<!-- checkout details start -->

<input type="hidden" name="order_id" value="{{$order_id}}">
<input type="hidden" name="thumbnail" value="{{asset('uploads')}}/{{$thumbnail}}">
<input type="hidden" name="category" value="{{$category}}">
<input type="hidden" name="total_cost" value="<?php echo array_sum($a); ?>" id="actualcost">
<input type="hidden" name="plan_title" value="{{$plan_title}}">
<input type="hidden" name="plan_domain" value="{{$plan_domain}}">
<input type="hidden" name="service_template_id" value="{{$service_template_id}}">
<input type="hidden" name="service_plan_id" value="{{$service_plan_id}}"> 
<input type="hidden" name="do_you_want_hosting" value="{{$do_you_want_hosting}}">

<div class="form-checkout">


<div>
<h5 class="checkout-payment-title">Order information</h5><hr>


<div class="address-form-wrapper ">

<!-- customer details from user auth start -->

<div class="row">
<div class="col-12">
<div class="form-group mb-3 ">
<label>Number of pages in your website</label>
<input type="number" name="numberOfPages" id="numberOfPages" class="form-control address-control-item address-control-item-required checkout-input" value="5"> 
</div>

@error('numberOfPages')
<div class="alert alert-danger">{{$message}}</div>
@enderror
</div>
</div>


<div class="row">
<div class="col-12">
<div class="form-group mb-3 ">

<div class="togglebutton">
<label>
<input type="checkbox" name="premium_services" value="yes" id="premium_services">
Do You Want Premium Services
</label>
</div>


</div>

@error('premium_services')
<div class="alert alert-danger">{{$message}}</div>
@enderror
</div>
</div>


<!-- customer details from user auth end -->

</div>

</div>
<div><br/>
<h5 class="checkout-payment-title">Customer information</h5><hr>
<input type="hidden" value="" id="save-shipping-information-url">

<div class="customer-address-payment-form">
<div class="form-group mb-3">
<!-- <p>Already have an account? <a href="http://127.0.0.1:8000/login">Login</a></p> -->
</div>


<div class="address-form-wrapper ">

<!-- customer details from user auth start -->

<div class="row">
<div class="col-12">
<div class="form-group mb-3 ">
<input type="text" name="customer_name" id="customer_name" placeholder="Full Name" class="form-control address-control-item address-control-item-required checkout-input" value=""> 
</div>
@error('customer_name')
<div class="alert alert-danger">{{$message}}</div>
@enderror
</div>
</div>

<div class="row">

<div class="col-lg-6 col-12">
<div class="form-group ">
<input type="email" name="customer_email" id="customer_email" placeholder="Email" class="form-control address-control-item address-control-item-required checkout-input" value="">

</div>
@error('customer_email')
<div class="alert alert-danger">{{$message}}</div>
@enderror
</div>

<div class="col-lg-6 col-12">
<div class="form-group ">
<input type="number" name="customer_contact" id="customer_contact" placeholder="Enter mobile number" class="form-control address-control-item address-control-item-required checkout-input" value="">

</div>
@error('customer_contact')
<div class="alert alert-danger">{{$message}}</div>
@enderror
</div>

</div><br/>


</div>

</div>
<br>


<br>

<div class="form-group mb-3 ">
<label for="description" class="control-label">Order notes</label>
<br>
<textarea name="order_notes" id="description" rows="3" class="form-control" placeholder="Notes about your order, e.g. special notes for delivery."></textarea>

</div>


<div class="form-group mb-3">
<div class="row">

<div class="col-md-12 checkout-button-group">
<button type="submit" class="btn btn-warning payment-checkout-btn payment-checkout-btn-step float-end" style="float: right; width:100%">
Proceed To Payment
</button>
</div>

</div>

</div>

</div>
</div></form>
</div>

</div>


Controller.php

function checkoutdata(Request $req){

$req->validate([
'customer_name'=>'required',
'email'=>'required',
'customer_contact'=>'required',
]);

$validated = $req->validate([ 
'email'=>'required',
'password'=>'required', 
]);

if (Auth::attempt($validated)) {
$req->session()->regenerate();

$query = DB::table('service_checkout')->insert([
'order_id' => $req->order_id,
'user_id' => auth()->user()->id,
'thumbnail' => $req->thumbnail,
'template_category' => $req->category,
'total_cost' => $req->total_cost,
'plan_title' => $req->plan_title,
'plan_domain' => $req->plan_domain,
'service_template_id' => $req->service_template_id,
'service_plan_id' => $req->service_plan_id,
'do_you_want_hosting' => $req->do_you_want_hosting,
'customer_name' => $req->customer_name,
'customer_email' => $req->email,
'customer_contact' => $req->customer_contact,
'order_notes' => $req->order_notes,
'payment_status' => 'pending',
'template_url' => $req->url,
]);

return redirect('/project-details')->with('msg','Your order has been placed!'); 
}

else{
$query = DB::table('users')->insert([
'first_name' => $req->customer_name,
'email' => $req->email,
'password' => Hash::make($req->password),
'type' => 'client',
'primary_admin' => 'no',
'status' => 'active',
'role_id' => 2,
'phone' => $req->customer_contact,
'clientid' => 3,
'account_owner' => 'yes',
'project_id' => $req->order_id,
]);

if (Auth::attempt($validated)) { 
$req->session()->regenerate();

$query = DB::table('service_checkout')->insert([
'order_id' => $req->order_id,
'user_id' => auth()->user()->id,
'thumbnail' => $req->thumbnail,
'template_category' => $req->category,
'total_cost' => $req->total_cost,
'plan_title' => $req->plan_title,
'plan_domain' => $req->plan_domain,
'service_template_id' => $req->service_template_id,
'service_plan_id' => $req->service_plan_id,
'do_you_want_hosting' => $req->do_you_want_hosting,
'customer_name' => $req->customer_name,
'customer_email' => $req->email,
'customer_contact' => $req->customer_contact,
'order_notes' => $req->order_notes,
'payment_status' => 'pending',
'template_url' => $req->url,
]);

return redirect('/project-details')->with('msg','Your order has been placed!'); 
}

}
Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Leave a Reply