Laravel 7/6 Razorpay Payment Gateway Integration Tutorial

In this tutorial you will learn about the Laravel 7/6 Razorpay Payment Gateway Integration Tutorial and its application with practical example.

In this Laravel 7/6 Razorpay Payment Gateway Integration Example tutorial, I’ll show you how to integrate Razorpay payment gateway in laravel 7/6. In this tutorial you will learn to integrate Razorpay in laravel 7/6. In this step by step tutorial I’ll share laravel 7/6 Razorpay integration example.

Table Of Contents−

Razorpay Payment Gateway
Laravel 7/6 Razorpay Payment Gateway Integration Tutorial

Razorpay Payment Gateway

Razorpay is one of the popular payment gateway, that allows us to accept payment from your customer. Razorpay is very simple, hassle free and easy to integrate payment gateway. Integrating Razorpay payment gateway in laravel 7/6 is a breeze.

In this tutorial, you will learn to integrate Razorpay payment gateway in your laravel 7/6 project. Follow this step by step tutorial to learn Razorpay payment gateway integration in laravel 7/6.

Install Laravel App
Setup Database
Model & Migration

Make Route
Create Controller & Methods
Create Blade View

Start Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

composer create-project --prefer-dist laravel/laravel RazorpayDemo

1	composer create-project --prefer-dist laravel/laravel RazorpayDemo

Step 2: Setup Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

  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

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: Model & Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Payment -m

1	php artisan make:model Payment -m

The above command will create a model name Payment and also create a migration file for the Payment table. Now, 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('payment_id');
 $table->string('user_id');
 $table->string('amount');
 $table->timestamps();
 });
 }

public function up()

{

Schema::create('payments', function (Blueprint $table) {

$table->increments('id');

$table->string('payment_id');

$table->string('user_id');

$table->string('amount');

$table->timestamps();

});

}

Before we run php artisan migrate command go to app/providers/AppServiceProvider.php and put the below code :

…
 use Illuminate\Support\Facades\Schema;
 ….
 function boot()
 {
     Schema::defaultStringLength(191);
 }
 …

…

use Illuminate\Support\Facades\Schema;

….

function boot()

{

Schema::defaultStringLength(191);

}

…

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 4: Make Route

Now we will create following routes in the web.php file. Go to app/routes/web.php file and create following routes in it. The first route is to list products and second route is to store payments_id and user information provided by the razorpay payment gateway.

routes/web.php

Route::get('product', 'RazorpayController@index');
  Route::post('paysuccess', 'RazorpayController@paysuccess');
  Route::post('razor-thank-you', 'RazorpayController@thankYou');

Route::get('product', 'RazorpayController@index');

Route::post('paysuccess', 'RazorpayController@paysuccess');

Route::post('razor-thank-you', 'RazorpayController@thankYou');

Step 5: Create Controller

Now, lets create a controller named RazorpayController using command given below –

php artisan make:controller RazorpayController

1	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\Payment;
 use Redirect,Response;
 class RazorpayController extends Controller
 {
 public function razorpayProduct()
 {
 return view('payments.razorpay');
 }
 public function razorPaySuccess(Request $Request){
 $data = [
           'user_id' => '1',
           '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('payments.thankyou');
 }
 }

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Payment;

use Redirect,Response;

class RazorpayController extends Controller

{

public function razorpayProduct()

{

return view('payments.razorpay');

}

public function razorPaySuccess(Request $Request){

$data = [

'user_id' => '1',

'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('payments.thankyou');

}

Step 6: Create Blade view

Now we will create some blade view file name razorpay.blade.php and where we will show product list. Go to resources/views & create razorpay.blade.php file.

Get Your secret key from razorpay payment gateway dashboard and put the key in script tag section,

<!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 6 Razorpay Payment Gateway</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.yoursite.com/">yoursite.com</a></p>
<hr>
<div class="row">
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.yoursite.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.yoursite.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.yoursite.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 yoursite.com<br>  </h4>
<p class="h5 text-white">Thank you for being here </p>
<br>
<p><a class="btn btn-warning" target="_blank" href="//yoursite.com/"> yoursite.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": "yoursite",
"description": "Payment",
"image": "//www.yoursite.com/wp-content/uploads/2018/12/cropped-favicon-1024-1-180x180.png",
"handler": function (response){
$.ajax({
url: SITEURL + 'paysuccess',
type: 'post',
dataType: 'json',
data: {
razorpay_payment_id: response.razorpay_payment_id , 
totalAmount : totalAmount ,product_id : product_id,
}, 
success: function (msg) {
window.location.href = SITEURL + 'razor-thank-you';
}
});
},
"prefill": {
"contact": '9988665544',
"email":   'devfeedly21@gmail.com',
},
"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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

<!doctype html>

<head>

<title>laravel 6 Razorpay Payment Gateway</title>

<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>

<br>

<p class="text-center">More article on <a href="https://www.yoursite.com/">yoursite.com</a></p>

<hr>

<h4 class="title">Mouse</h4>

<p class="desc">Some small description goes here</p>

<div class="label-rating">132 reviews</div>

<div class="label-rating">154 orders </div>

</div>

</figcaption>

<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>

</div>

</figure>

</div>

<h4 class="title">Sony Watch</h4>

<p class="desc">Some small description goes here</p>

<div class="label-rating">132 reviews</div>

<div class="label-rating">154 orders </div>

</div>

</figcaption>

<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>

</div>

</figure>

</div>

<h4 class="title">Mobile</h4>

<p class="desc">Some small description goes here</p>

<div class="label-rating">132 reviews</div>

<div class="label-rating">154 orders </div>

</div>

</figcaption>

<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>

</div>

</figure>

</div>

</div>

</div>

<h4 class="text-white">Welcome to yoursite.com<br> </h4>

<p class="h5 text-white">Thank you for being here </p>

<br>

<p><a class="btn btn-warning" target="_blank" href="//yoursite.com/"> yoursite.com

</p>

</div>

</article>

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": "yoursite",

"description": "Payment",

"image": "//www.yoursite.com/wp-content/uploads/2018/12/cropped-favicon-1024-1-180x180.png",

"handler": function (response){

$.ajax({

url: SITEURL + 'paysuccess',

type: 'post',

dataType: 'json',

data: {

razorpay_payment_id: response.razorpay_payment_id ,

totalAmount : totalAmount ,product_id : product_id,

success: function (msg) {

window.location.href = SITEURL + 'razor-thank-you';

}

});

"prefill": {

"contact": '9988665544',

"email": 'devfeedly21@gmail.com',

"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>

Go to resources/views and Create a new blade view file name thankyou.blade.php. It is used for showing after payment success.

<!DOCTYPE html>
<html>
<head>
<title>Thank You - yoursite</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.yoursite.com/"> yoursite.com  
<i class="fa fa-window-restore "></i></a></p>
</div>
<br><br><br>
</article>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Thank You - yoursite</title>

</head>

<h4 class="text-white">Thank you for payment<br></h4>

<br>

<p><a class="btn btn-warning" target="_blank" href="https://www.yoursite.com/"> yoursite.com

</div>

</article>

</body>

</html>

Step 7: Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/
 Or direct hit in your browser
 http://localhost/RazorpayDemo/product

http://localhost:8000/

Or direct hit in your browser

http://localhost/RazorpayDemo/product

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7/6 Razorpay Payment Gateway Integration Tutorial

Razorpay Payment Gateway