Laravel 8 razorpay payment gateway integration example; In this tutorial, you will learn how to integrate a razorpay payment gateway in laravel 8 app.
In this lrazorpay payment gateway integration in laravel 8 example tutorial will use the javascript lib of the razorpay payment gateway for payment deduction.
And as well as, will implement a simple script code for payment deduction and payment success. Before start razorpay payment gateway integration in laravel 8 tutorial, you need to create razorpay account and get secret app key from razorpay app. So, you can visit this link and create razorpay app.
Razorpay Payment Gateway Integration in Laravel 8
- Step 1: Install Laravel 8 App
- Step 2: Connecting App to Database
- Step 3: Create Model & Migration
- Step 4: Make Routes
- Step 5: Create Controller & Methods
- Step 6: Create Blade View
- Step 7: Start Development Server
- Step 8: Run This App
Step 1: Install Laravel 8 App
In this step, download or install the latest laravel 8 app by using the following command, so open terminal and execute the following command:
composer create-project --prefer-dist laravel/laravel RazorpayDemo
Step 2: Connecting App to Database
In this step, visit laravel 8 app root directory and open .env file. Then add the database details:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Step 3: Create Model & Migration
In this step, create table name Payment and it’s migration file. use the below command.
php artisan make:model Payment -m
It command will create one model name Payment and also create one migration file for the Payment table. After successfully run the command go to database/migrations/Payments.php file and replace function, below here :
public function up()
{
Schema::create('payments', function (Blueprint $table) {
$table->increments('id');
$table->string('r_payment_id');
$table->string('product_id');
$table->string('user_id');
$table->string('amount');
$table->timestamps();
});
}
Next, migrate the table using the below command. It will create two new tables in the database.
php artisan migrate
Step 4: Make Route
In this step, create three routes and add on this routes in web.php file. So, visit /routes/web.php file and add the following routes in web.php:
use App\Http\Controllers\RazorpayController;
Route::get('product', [RazorpayController::class, 'index']);
Route::get('paysuccess', [RazorpayController::class, 'razorPaySuccess']);
Route::get('razor-thank-you', [RazorpayController::class, 'RazorThankYou']);
Step 5: Create Controller
In this step, open terminal and execute the following command to create a controller name RazorpayController:
php artisan make:controller RazorpayController
After successfully create controller go to app/controllers/RazorpayController.php and put the below code :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Payment;
use Redirect,Response;
class RazorpayController extends Controller
{
public function razorpayProduct()
{
return view('razorpay');
}
public function razorPaySuccess(Request $Request){
$data = [
'user_id' => '1',
'product_id' => $request->product_id,
'r_payment_id' => $request->payment_id,
'amount' => $request->amount,
];
$getId = Payment::insertGetId($data);
$arr = array('msg' => 'Payment successfully credited', 'status' => true);
return Response()->json($arr);
}
public function RazorThankYou()
{
return view('thankyou');
}
}
Step 6: Create Blade view
In this step, create a blade view file name razorpay.blade.php and add the following code into it.
So, visit resources/views & create razorpay.blade.php file. Then add the following code into it:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 8 Razorpay Payment Gateway - Tutsmake.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<style>
.card-product .img-wrap {
border-radius: 3px 3px 0 0;
overflow: hidden;
position: relative;
height: 220px;
text-align: center;
}
.card-product .img-wrap img {
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
.card-product .info-wrap {
overflow: hidden;
padding: 15px;
border-top: 1px solid #eee;
}
.card-product .bottom-wrap {
padding: 15px;
border-top: 1px solid #eee;
}
.label-rating { margin-right:10px;
color: #333;
display: inline-block;
vertical-align: middle;
}
.card-product .price-old {
color: #999;
}
</style>
</head>
<body>
<div class="container">
<br>
<p class="text-center">More article on <a href="https://www.geeksforgeeks.org/">Tutsmake.com</a></p>
<hr>
<div class="row">
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.geeksforgeeks.org/wp-content/uploads/2019/03/c05917807.png"></div>
<figcaption class="info-wrap">
<h4 class="title">Mouse</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
</div>
<!-- rating-wrap.// -->
</figcaption>
<div class="bottom-wrap">
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now" data-amount="1000" data-id="1">Order Now</a>
<div class="price-wrap h5">
<span class="price-new">₹1000</span> <del class="price-old">₹1200</del>
</div>
<!-- price-wrap.// -->
</div>
<!-- bottom-wrap.// -->
</figure>
</div>
<!-- col // -->
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.geeksforgeeks.org/wp-content/uploads/2019/03/vvjghg.png"> </div>
<figcaption class="info-wrap">
<h4 class="title">Sony Watch</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
</div>
<!-- rating-wrap.// -->
</figcaption>
<div class="bottom-wrap">
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right buy_now" data-amount="1280" data-id="2">Order Now</a>
<div class="price-wrap h5">
<span class="price-new">₹1280</span> <del class="price-old">₹1400</del>
</div>
<!-- price-wrap.// -->
</div>
<!-- bottom-wrap.// -->
</figure>
</div>
<!-- col // -->
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.geeksforgeeks.org/wp-content/uploads/2019/03/jhgjhgjg.jpg"></div>
<figcaption class="info-wrap">
<h4 class="title">Mobile</h4>
<p class="desc">Some small description goes here</p>
<div class="rating-wrap">
<div class="label-rating">132 reviews</div>
<div class="label-rating">154 orders </div>
</div>
<!-- rating-wrap.// -->
</figcaption>
<div class="bottom-wrap">
<a href="javascript:void(0)" class="btn btn-sm btn-primary float-right order_now" data-amount="1280" data-id="3">Order Now</a>
<div class="price-wrap h5">
<span class="price-new">₹1500</span> <del class="price-old">₹1980</del>
</div>
<!-- price-wrap.// -->
</div>
<!-- bottom-wrap.// -->
</figure>
</div>
<!-- col // -->
</div>
<!-- row.// -->
</div>
<!--container.//-->
<br><br><br>
<article class="bg-secondary mb-3">
<div class="card-body text-center">
<h4 class="text-white">Welcome to Tutsmake.com<br> </h4>
<p class="h5 text-white">Thank you for being here </p>
<br>
<p><a class="btn btn-warning" target="_blank" href="//geeksforgeeks.org/"> Tutsmake.com
<i class="fa fa-window-restore "></i></a>
</p>
</div>
<br><br><br>
</article>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var SITEURL = '{{URL::to('')}}';
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('body').on('click', '.buy_now', function(e){
var totalAmount = $(this).attr("data-amount");
var product_id = $(this).attr("data-id");
var options = {
"key": "rzp_test_SYm5UF3bsPxKKR",
"amount": (totalAmount*100), // 2000 paise = INR 20
"name": "Tutsmake",
"description": "Payment",
"image": "//www.geeksforgeeks.org/wp-content/uploads/2018/12/cropped-favicon-1024-1-180x180.png",
"handler": function (response){
window.location.href = SITEURL +'/'+ 'paysuccess?payment_id='+response.razorpay_payment_id+'&product_id='+product_id+'&amount='+totalAmount;
},
"prefill": {
"contact": '9988665544',
"email": '[email protected]',
},
"theme": {
"color": "#528FF0"
}
};
var rzp1 = new Razorpay(options);
rzp1.open();
e.preventDefault();
});
/*document.getElementsClass('buy_plan1').onclick = function(e){
rzp1.open();
e.preventDefault();
}*/
</script>
</body>
</html>
Get Your secret key from razorpay payment gateway dashboard and put the key in script tag section like this => “key”: “rzp_test_5kdfjkdJFKR”,
Then visit resources/views and Create a new blade view file name thankyou.blade.php. Then add the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Thank You - Tutsmake</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body class="">
<br><br><br><br>
<article class="bg-secondary mb-3">
<div class="card-body text-center">
<h4 class="text-white">Thank you for payment<br></h4>
<br>
<p><a class="btn btn-warning" target="_blank" href="https://www.geeksforgeeks.org/"> Tutsmake.com
<i class="fa fa-window-restore "></i></a></p>
</div>
<br><br><br>
</article>
</body>
</html>
Step 7: Start Development Server
In this step, open terminal and execute the following command to start the development server:
php artisan serve
Step 8: Run This App
Now open browser and fire the following URL on it:
http://localhost:8000/product
Conclusion
Laravel 8 razorpay payment gateway integration tutorial, You have leaned how to integrated razorpay payment gateway in laravel 8 app using razorpay javascript library.
Recommended Laravel Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
