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