Integration of razorpay payment gateway in Laravel app is very easy. Through this, you can integrate the payment system into your Laravel system. So that any user can make payment easily. So, In this tutorial, you will learn how to integrate a Razorpay payment gateway in Laravel 10 app.
How to Integrate Razorpay Payment Gateway in Laravel 10
By using the following steps, you can integrate a Razorpay payment gateway in Laravel 10 apps:
- Step 1: Installing Laravel 10 New Setup
- Step 2: Connecting Database to App
- Step 3: Create File for Model & Migration
- Step 4: Add Routes
- Step 5: Create Controller & Methods
- Step 6: Create Blade View
- Step 7: Start Development Server
- Step 8: Run This App
Step 1: Installing Laravel 10 New Setup
First of all, Open your terminal or command prompt.
Then execute the following command into it to install new Laravel 10 app into your system:
composer create-project --prefer-dist laravel/laravel RazorpayDemo
Step 2: Connecting Database to App
Once you have installed laravel apps into your system. Then open your project in any text editor.
And then visit your laravel app root directory and open the .env file. And add the database details like following:
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 File for 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: Add Routes
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 10 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.tutsmake.com/">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.tutsmake.com/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.tutsmake.com/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.tutsmake.com/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="//tutsmake.com/"> 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.tutsmake.com/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.tutsmake.com/"> 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 10 razorpay payment gateway integration tutorial, You have leaned how to integrated razorpay payment gateway in Laravel 10 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.
