Laravel 8 Razorpay Payment Gateway Integration

Razorpay payment gateway integration in laravel 8. In this post, i would like to show you how to integrate razorpay payment laravel 8 app.

In this example post, 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.

And in this post, you will learn step by step on how to integrate razorpay payment gateway in laravel 8 app.

Razorpay Payment Gateway Integration in Laravel 8

  • Step 1 – Installing Laravel 8 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 8 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 8 latest application using the following command:

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

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 8 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 / Laravel8Razorpay

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 8 razorpay payment gateway integration tutorial app, which is located inside the following locations:

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

So, find create_payments_table.php file inside Laravel8Razorpay/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 Laravel8Razorpay/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 8</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 8 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 8 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 8 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

When you fire the above url on the browser, you will see the image below:

Testing Card Credential

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

Leave a Comment