In this tutorial you will learn about the Laravel 9 Razorpay Payment Gateway Integration Tutorial with Example and its application with practical example.
In this Laravel 9 Razorpay Payment Gateway Integration Tutorial with Example tutorial, I’ll show you how to integrate Razorpay payment gateway in laravel 9. In this tutorial you will learn to integrate Razorpay in laravel 9. In this step by step tutorial I’ll share laravel 9 Razorpay 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 9 is a breeze.
Laravel 9 Razorpay Payment Gateway Integration Example
In this tutorial, you will learn to integrate Razorpay payment gateway in your laravel 9 application. Follow this step by step tutorial to learn Razorpay payment gateway integration in laravel 9.
- Install Laravel 9
- Connecting App to Database
- Create Model & Migration
- Make Routes
- Create Controller & Methods
- Create Blade View
- Start Development Server
- Run This App
Install Laravel 9
First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command
1 |
composer create-project --prefer-dist laravel/laravel lara9blog |
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.
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=lara9blog 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.
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 –
1 2 3 4 5 6 7 8 9 10 11 |
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.
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
1 2 3 4 5 |
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 –
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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 9 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> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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> |
Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
1 |
http://localhost:8000/product |