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

1. Razorpay
Payment
Gateway
Integration
in Laravel
and VueJS 2
www.bacancytechnology.com

2. 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 ado, let’s get started with
the Razorpay Payment Gateway Integration
in Laravel and VueJS 2.

3. Initial Set-Up:
Laravel and
NPM
Dependencies
Installation

4. 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
Note: If you face this error
“Cannot find module
‘webpack/lib/rules/DescriptionDataMatche
rRulePlugin’”
Run this command
npm i vue-loader

5. Then in the separate terminal, run the
laravel server by using the following
command
php artisan serve

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

7. 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>
Having a developer with both front-end and
back-end insights works as an asset for your
project.
A full-stack developer sees the bigger picture
and codes accordingly, lessening the
troubleshooting time, issues, and bugs. {
break; } the loop of your search and contact us
today!
Try Our 15 Days Risk-Free Trial

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

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

10. Create
App.vue File

11. 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
<template>
<section class="payment">
<div>
<span>Amount:</span>
<input type="text" v-model="amount" />
<button type="button"
@click="razorPay">Pay with
Razorpay</button>
</div>
</section>
</template>
<script>
import axios from "axios";

12. export default {
name: "app",
data() {
return {
amount: 100,
};
},
methods: {
razorPay() {
axios
.post("/api/payment/razorpay", { amount:
this.amount })
.then((res) => {
if (res.data) {
window.location.href = "/pay/razorpay?key="
+ res.data.key + "&amount=" + res.data.amount
+ "&order_id=" + res.data.order_id;
}
})
.catch((err) => {});
},
},
};
</script>

13. Create
Razorpay
Account

14. 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

15. Set-Up and
Install
Razorpay
Package

16. Use the below command to install RazorPay
package
composer require razorpay/razorpay
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'),
];

17. Create
Razorpay
Controller

18. 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'],
];

19. 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
];

20. >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('/');
}
}
}

21. Add Routes

22. 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
AppHttpControllersRazorPayController
;
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.

23. 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
AppHttpControllersRazorPayController
;
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.

24. // routes/api.php
use
AppHttpControllersRazorPayController
;
Route::post('payment/razorpay',
[RazorPayController::class, 'razorpay'])-
>name('paymentRazorpay');

25. Create
Razorpay
View

26. 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
<script
src="https://checkout.razorpay.com/v1/che
ckout.js"></script>
<form name='razorpayform'
action="/pay/verify" method="POST">
<input type="hidden" name="_token"
value="{{ csrf_token() }}">
<input type="hidden"
name="razorpay_payment_id"
id="razorpay_payment_id">
<input type="hidden"
name="razorpay_signature"
id="razorpay_signature">

27. <input type="hidden"
name="razorpay_order_id"
id="razorpay_order_id" value="<?php echo
request()->order_id ?>">
</form>
<script>
var options = {
"key": "<?php echo request()->key ?>",
"amount": "<?php echo request()->amount ?
>",
"currency": "INR",
"name": "YOUR COMPANY NAME",
"description": "YOUR COMPANY
DESCRIPTION",
"image": "YOUR COMPANY IMAGE",
"order_id": "<?php echo request()-
>order_id ?>",
"handler": function(response) {
alert(response.razorpay_payment_id);
alert(response.razorpay_order_id);
alert(response.razorpay_signature)
},

28. "theme": {
"color": "#F37254"
}
};
options.handler = function(response) {
document.getElementById('razorpay_pay
ment_id').value =
response.razorpay_payment_id;
document.getElementById('razorpay_sign
ature').value =
response.razorpay_signature;
document.razorpayform.submit();
};
options.theme.image_padding = false;
options.modal = {
ondismiss: function() {
window.location.href = "/pay?
payment=false"
},
escape: true,
backdropclose: false
};

29. var rzp1 = new Razorpay(options);
rzp1.on('payment.failed',
function(response) {
alert(response.error.code);
alert(response.error.description);
alert(response.error.source);
alert(response.error.step);
alert(response.error.reason);
alert(response.error.metadata.order_id);
alert(response.error.metadata.payment_id)
;
});
rzp1.open();
</script>
You can also prefill user data if you have already;
you need to add this under options.

30. prefill: {
name: “USER NAME”,
email: “USER EMAIL”,
phone: “USER CONTACT”
}

31. Check
Transaction

32. 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:

33. 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

34. Conclusion

35. 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.

36. Thank You
www.bacancytechnology.com