Razorpay Payment Gateway Integration in Laravel and VueJS 2

Learn in this step-by-step tutorial how Razorpay Payment Gateway Integration in Laravel and VueJS 2 can make your app powerful.

In this latest technology world, the combination of Laravel and VueJS is unbeatable and very powerful to make any high-end application that runs smooth. There is an increasing need for e-commerce/content-driven websites. You now need a payment gateway to make easy transactions. So here is the way to integrate Razorpay payment gateway to your Laravel 6/7/8 versions along with VueJS. Without further, let’s get started with the Razorpay Payment Gateway Integration in Laravel and VueJS 2.

Initial Set-Up: Laravel and NPM Dependencies Installation

First of all, you need a fresh Laravel version and node dependencies installed to get started; run the below commands mentioned one by one to install the required stuff.

composer create-project laravel/laravel razorpay-demo
cd razorpay-demo
composer require laravel/ui
php artisan ui vue
npm install
npm run dev

Run this command

npm i vue-loader

Then in the separate terminal, run the Laravel server by using the following command

php artisan serve

Include /js/app.js and app tag in the view

Your app.js file will be compiled and saved to public/js/app.js. Make sure to also have a root element with an id of the app to your HTML scaffolding. Otherwise, Vue won’t know where to mount the components.

// resources/views/app.blade.php

<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>

VueJS Set-Up: Razorpay Payment Gateway Integration in Laravel and VueJS 2

// resources/js/app.js

import App from './App.vue'; const app = new Vue({ el: '#app', template: "", components: { App, }, });

Create App.vue File

This file contains the Payment data for now; in your real-time application, you need to pass the user information and amount on the “pay” button click.

// resources/js/App.vue

Copy the code.

Create Razorpay Account

Create an Account from here: https://razorpay.com

Get id and secret from here: https://dashboard.razorpay.com/app/keys

Open .env file and add RazorPay key and secret to it

// .env

RZ_KEY_ID=YOUR_KEY
RZ_SECRET=YOUR_SECRET

Set-Up and Install Razorpay Package

Use the below command to install RazorPay package

RZ_KEY_ID=YOUR_KEY
RZ_SECRET=YOUR_SECRET

Create config file to access .env values and use the below code.

// config/values.php

env('RZ_KEY_ID', 'YOUR_KEY'),
  'razorpaySecret' => env('RZ_SECRET', 'YOUR_SECRET'),
];

Create Razorpay Controller

Use the below command to create a controller.

php artisan make:controller RazorPayController

// app/Http/Controllers/RazorPayController.php

order->create([
     'receipt' => '123',
     'amount' => $request->amount * 100,
     'currency' => 'INR'
   ]); // Creates Razorpay order
 
   $data = [
     "key"               => Config("values.razorpayKey"),
     "amount"            => $request->amount * 100,
     "order_id"          => $orderData['id'],
   ];
   return response()->json($data, 200);
 }
 
 function verify(Request $request)
 {
   $success = true;
   $error = "Payment Failed!";
 
   if (empty($request->razorpay_payment_id) === false) {
     $api = new Api(Config("values.razorpayKey"), Config("values.razorpaySecret"));
     try {
       $attributes = [
         'razorpay_order_id' => $request->razorpay_order_id,
         'razorpay_payment_id' => $request->razorpay_payment_id,
         'razorpay_signature' => $request->razorpay_signature
       ];
       $api->utility->verifyPaymentSignature($attributes);
     } catch (SignatureVerificationError $e) {
       $success = false;
       $error = 'Razorpay Error : ' . $e->getMessage();
     }
   }
 
   if ($success === true) {
     // Update database with success data
     // Redirect to success page
     return redirect('/');
   } else {
     // Update database with error data
     // Redirect to payment page with error
     // Pass $error along with route
     return redirect('/');
   }
 }
}

Add Routes

Moving further in our tutorial: Razorpay payment gateway integration. Let’s add routes for displaying the Razorpay page and verifying requests. Open the routes/web.php file and use the below code.

// routes/web.php

use App\Http\Controllers\RazorPayController;
 
Route::view('/pay/razorpay', 'razorpay');
Route::post('/pay/verify', [RazorPayController::class, 'verify']);

Now, add an API route to access through VueJS. For that use the following code.

// routes/api.php

use App\Http\Controllers\RazorPayController;
 
Route::post('payment/razorpay', [RazorPayController::class, 'razorpay'])->name('paymentRazorpay');

Create Razorpay View

This is the Razorpay gateway, users will enter the credentials and will pay using various methods. Here you can enter your company/personal details like name, description, and logo to show users who they are paying.

// resources/views/razorpay.blade.php

Copy the code.

You can also prefill user data if you have already; you need to add this under options.

Check Transaction

The user interface will look something like this.

Now it’s time to check the payment transaction; for that, visit RazorPay Dashboard.

Here is the reference image:

The entire source code is available here: razorpay-payment-gateway-integration-example. Use the below command to clone the repository and play around with it.

git clone https://github.com/keyurkansara/razorpay-laravel-vue.git

Conclusion

I hope the tutorial: Razorpay payment gateway integration has helped you as expected. Feel free to contact us with questions, suggestions, or feedback. You can visit VueJS and Laravel tutorials pages and explore more about both the technology individually. Each tutorial will provide you with a github repository so that you can play around with the code.

Bacancy has a skilled set of developers who has expertise with backend and frontend development. Our dedicated full-stack developers analyze the project requirements and problems from front-end and back-end perspectives, providing the optimum solution. Are you looking for developers who have both frontend and backend experience? If yes, then without wasting a second, contact us and hire fullstack developers.