Laravel 8 Razorpay Payment Gateway Integration Example

In this tutorial you will learn about the Laravel 8 Razorpay Payment Gateway Integration Example and its application with practical example.

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

Table Of Contents−

Razorpay Payment Gateway
Laravel 8 Razorpay Payment Gateway Integration Example

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 8 is a breeze.

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

SInstall Laravel 8 App
Connecting App to Database
Create Model & Migration

Make Routes
Create Controller & Methods
Create Blade View

Start Development Server
Run This App

Install Laravel 8

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

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

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

Make sure you have composer installed.

Setup Database Credentials

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=lara8blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara8blog

DB_USERNAME=root

DB_PASSWORD=

Create Model & Migration

Now, we have to define table schema for payments table. Open terminal and let’s run the following command to generate a migration along with model file to create payments table in our database.

php artisan make:model Payment -m

1	php artisan make:model Payment -m

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

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();
 });
 }

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();

});

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

After, the migration executed successfully the payments table will be created in database.

Create Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/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']);

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']);

Create Controller By Artisan Command

Now, lets create a controller for Razorpay Payments. Create a controller named RazorpayController using command given below –

php artisan make:controller RazorpayController

1	php artisan make:controller RazorpayController

Once the above command executed, it will create a controller file RazorpayController.php in app/Http/Controllers/ directory. Open the RazorpayController.php file and put the following code in it.

app/Http/Controllers/RazorpayController.php

<?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');
     }
 
 }

<?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');

}

Create Blade Views

In this step, we will create view/blade file razorpay payment processing. Lets create a blade file “razorpay.blade.php” in “resources/views/” directory and put the following code in it respectively.

resources/views/razorpay.blade.php

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

<div class="row">
<div class="col-md-4">
<figure class="card card-product">
<div class="img-wrap"><img src="//www.your-site.com/wp-content/uploads/2019/04/logo.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.your-site.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.your-site.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<br>  </h4>
<p class="h5 text-white">Thank you for being here </p>
<br>
<p><a class="btn btn-warning" target="_blank" href="//your-site.com/"> your-site.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": "your-site",
"description": "Payment",
"image": "//www.your-site.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": '1234567890',
"email":   'your-site@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

<!doctype html>

<head>

<title>Laravel 8 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>

<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<br> </h4>

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

<br>

<p><a class="btn btn-warning" target="_blank" href="//your-site.com/"> your-site.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": "your-site",

"description": "Payment",

"image": "//www.your-site.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": '1234567890',

"email": 'your-site@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>

Get your secret key from razorpay payment gateway dashboard and put the key in script tag section like this => “key”: “rzp_test_ddgdfgdfgdg”,

Then visit resources/views and Create a new blade view file name thankyou.blade.php. Then put the following code into it:

<!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.your-site.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.your-site.com/"> Yoursite.com

</div>

</article>

</body>

</html>

Run 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/product

1	http://localhost:8000/product

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Razorpay Payment Gateway Integration Example

Razorpay Payment Gateway