Laravel 8 Razorpay Payment Gateway Integration Example

Laravel 8 Razorpay Payment Gateway Integration Example

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *