How to Integrate Razorpay Payment Gateway in Laravel 10

How to Integrate Razorpay Payment Gateway in Laravel 10

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.

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 *