Razorpay Payment Gateway Integration in Laravel 10

by

Razorpay payment gateway integration in Laravel 10; Through this tutorial, i am going to show you how to integrate razorpay payment Laravel 10 app.

In this example tutorial, I will use javascript lib of the razorpay payment gateway for payment deduction. And after successfully payment duduction, i will redirect to store payment info in database.

Laravel 10 Razorpay Payment Gateway Integration

Use the below given steps to integrate razorpay payment gateway in Laravel 10 apps:

  • Step 1 – Installing Laravel 10 Application
  • Step 2 – Create account in Razorpay and generate key and secret
  • Step 3 – Database Configuration
  • Step 4 – Creating Payment Model & Migration
  • Step 5 – Create Routes
  • Step 6 – Creating RazorPay Controller
  • Step 7 – Create Blade View
    • Create Directory Name Razorpay
    • Create Payment Blade View
    • Create Thank You Blade View
  • Step 8 – Start Development Server
  • Step 9 – Run This App On Browser

Step 1 – Installing Laravel 10 Application

In step 1, open your terminal and navigate to your local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install laravel latest application using the following command:

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

Step 2 – Create account in Razorpay and generate key and secret

In step 2, Create razorpay account. Then generate key and secret.

Step 3 – Database Configuration

In step 3, open your downloaded laravel app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 4 – Creating Payment Model & Migration

In step 4, open command prompt and navigate to your project by using the following command:

cd / blog

Then create model and migration file by using the following command:

php artisan make:model Payment -m

The above command will create two files into your laravel razorpay payment gateway integration tutorial app, which is located inside the following locations:

  • /app/Models/Payment.php
  • /database/migrations/create_payments_table.php

So, find create_payments_table.php file inside /database/migrations/ directory. Then open this file and add the following code into function up() on this file:

    public function up()
    {
        Schema::create('payments', function (Blueprint $table) {
            $table->id();
            $table->string('r_payment_id');
            $table->string('user_id');
            $table->string('product_id');
            $table->string('amount');
            $table->timestamps();
        });
    }

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

php artisan migrate

Step 5 – Create Routes

In step 5, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

use App\Http\Controllers\RazorPayController;

Route::get('razorpay', [RazorPayController::class, 'index']);
Route::get('payment-process', [RazorPayController::class, 'process']);
Route::get('payment-success', [RazorPayController::class, 'success']);

Step 6 – Creating RazorPay Controller

In step 6, create razorpay payment controller by using the following command:

php artisan make:controller RazorPayController

The above command will create RazorPayController.php file, which is located inside /app/Http/Controllers/ directory.

So open RazorPayController.php file and add the following code into it:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Payment;

class RazorPayController extends Controller
{
	 public function index()
	 {
	   return view('razorpay.index');
	 }

	 public function process(Request $request)
	 {
		 $payInfo = [
		           'user_id' => '1',
		           'product_id' => $request->product_id,
		           'r_payment_id' => $request->payment_id,
		           'amount' => $request->amount,
		        ];

		Payment::insertGetId($payInfo);  

        return redirect('payment-success');
     }

	 public function success()
	 {
	   return view('razorpay.success');
	 }
}

Step 7 – Create Blade View

In step 7,

  • create directory name razorpay inside resources/views directory.
  • Create Payment Blade View name index.blade.php inside resources/views/razorpay directory. Then add the following code into it:
<!DOCTYPE html>
<html>
<head>
  <title>Razorpay Payment Gateway Integration In Laravel 10</title>

  <meta name="csrf-token" content="{{ csrf_token() }}">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

  <style type="text/css">
    

  .card-product:after {
    content: "";
    display: table;
    clear: both;
    visibility: hidden; }
  .card-product .price-new, .card-product .price {
    margin-right: 5px; }
  .card-product .price-old {
    color: #999; }
  .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 .action-wrap {
    padding-top: 4px;
    margin-top: 4px; }
  .card-product .bottom-wrap {
    padding: 15px;
    border-top: 1px solid #eee; }
  .card-product .title {
    margin-top: 0; }
  </style>

</head>
<body>

<div class="container mt-4">

<br>  <h3 class="text-center">Laravel 10 RazorPay Payment Gateway Integration</h3><hr>

<div class="row">
<div class="col-md-3">
  <figure class="card card-product">
    <div class="img-wrap"> 
      <img src="https://images.unsplash.com/photo-1580910051074-3eb694886505?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=401&q=80">
      
    </div>
    <figcaption class="info-wrap">
      <h6 class="title text-dots"><a href="javascript:void(0)">Good item name</a></h6>
      <div class="action-wrap">
        <a href="javascript:void(0)" class="btn btn-primary btn-sm float-right buy" data-amount="1280" data-id="1"> Order </a>
        <div class="price-wrap h5">
          <span class="price">1280</span>
        </div> <!-- price-wrap.// -->
      </div> <!-- action-wrap -->
    </figcaption>
  </figure> <!-- card // -->
</div> <!-- col // -->
<div class="col-md-3">
  <figure class="card card-product">
    <div class="img-wrap"> <img src="https://images.unsplash.com/photo-1597075095308-0b47fc649175?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=335&q=80%20335w">
    </div>
    <figcaption class="info-wrap">
      <h6 class="title text-dots"><a href="javascript:void(0)">The name of product</a></h6>
      <div class="action-wrap">
        <a href="javascript:void(0)" class="btn btn-primary btn-sm float-right buy" data-amount="280" data-id="2"> Order </a>
        <div class="price-wrap h5">
          <span class="price">280</span>
        </div> <!-- price-wrap.// -->
      </div> <!-- action-wrap -->
    </figcaption>
  </figure> <!-- card // -->
</div> <!-- col // -->
<div class="col-md-3">
  <figure class="card card-product">
    <div class="img-wrap"><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80%20750w"> 
    
    </div>
    <figcaption class="info-wrap">
      <h6 class="title text-dots"><a href="javascript:void(0)">Name of product</a></h6>
      <div class="action-wrap">
        <a href="javascript:void(0)" class="btn btn-primary btn-sm float-right buy" data-amount="300" data-id="3"> Order </a>
        <div class="price-wrap h5">
          <span class="price-new">300</span>
        </div> <!-- price-wrap.// -->
      </div> <!-- action-wrap -->
    </figcaption>
  </figure> <!-- card // -->
</div> <!-- col // -->
<div class="col-md-3">
  <figure class="card card-product">
    <div class="img-wrap"> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=689&q=80 689w">
    </div>
    <figcaption class="info-wrap">
      <h6 class="title text-dots"><a href="javascript:void(0)">The name of product</a></h6>
      <div class="action-wrap">
        <a href="javascript:void(0)" class="btn btn-primary btn-sm float-right buy" data-amount="550" data-id="4"> Order </a>
        <div class="price-wrap h5">
          <span class="price">550</span>
        </div> <!-- price-wrap.// -->
      </div> <!-- action-wrap -->
    </figcaption>
  </figure> <!-- card // -->
</div> <!-- col // -->
</div> <!-- row.// -->

</div> 

</div>
<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', function(e){
    var amount = $(this).attr("data-amount");
    var pId =  $(this).attr("data-id");
    var options = {
    "key": "rzp_test_ZN7Xuta4S6LS5m",
    "amount": (amount*100), // 2000 paise = INR 20
    "name": "LaraTutorials.com - Razorpay Demo",
    "description": "Payment",
    //"image": "",
     "handler": function (response){
     
       window.location.href = SITEURL +'/'+ 'payment-process?payment_id='+response.razorpay_payment_id+'&product_id='+pId+'&amount='+amount;

    },
    "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>
  • Create Thank you Blade View name success.blade.php inside resources/views/razorpay directory. Then add the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Razorpay Payment Integration Thank You - LaraTutorial.com</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/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.laratutorials.com/"> LaraTutorials.com  
<i class="fa fa-window-restore "></i></a></p>
</div>
<br><br><br>
</article>
</body>
</html>

Step 8 – Start Development Server

Finally, open your command prompt again and run the following command to start development server for your laravel razorpay payment gateway integration example:

php artisan serve

Step 9 – Run This App On Browser

In step 9, open your browser and fire the following url into your browser:

http://127.0.0.1:8000/razorpay

Testing Card Credential

 Card No : 4211 1111 1111 1111
 Month : any future month
 Year : any future Year
 CVV : 123

Recommended Laravel Tutorials

Laravel 10 Factory Generate Dummy Data Example
Laravel 10 Generate PDF File using DomPDF
Laravel 10 Amazon S3 File Upload Tutorial
Razorpay Payment Gateway Integration in Laravel 10
Laravel 10 Instamojo Payment Gateway Integration
Laravel 10 Stripe Payment Gateway Integration Example
Laravel 10 Create Custom Helper Functions Tutorial
Laravel 10 Auth with Livewire Jetstream Tutorial
Laravel 10 Send SMS to Mobile with Nexmo
Laravel 10 Install React Auth Tutorial with Example
Laravel 10 Install Vue Auth Tutorial with Example
Laravel 10 Add Text Overlay Watermark on Image Tutorial
Laravel 10 Bootstrap Auth Scaffolding Tutorial with Example
Laravel 10 Socialite Login with Google Gmail Account
Laravel 10 Login with Facebook Account Example
Laravel 10 Socialite Login with Github Example Tutorial
Laravel 10 Autocomplete Search using jQuery UI and Ajax From Database
Laravel 10 File Upload with Progress Bar Tutorial with Example
Laravel 10 Guzzle HTTP GET & POST Request
How to Install and Use CKEditor in Laravel 10
Laravel 10 Summernote Editor Example Tutorial
Laravel 10 Restrict User Access From IP Address
Laravel 10 Get Country, City Name & Address From IP Address

Leave a Comment