Laravel 和 VueJS 2 中的 Razorpay 支付网关集成
初始设置：Laravel 和 NPM 依赖项安装
首先，您需要一个新的 Laravel 版本和安装的节点依赖项才能开始；运行下面一一提到的命令来安装所需的东西。
作曲家创建项目 laravel/laravel razorpay-democd razorpay-演示作曲家需要 laravel/uiphp 工匠 ui vuenpm 安装npm 运行开发
注意：如果你遇到这个错误
“找不到模块'webpack/lib/rules/DescriptionDataMatcherRulePlugin'”
运行这个命令
npm i vue-loader
然后在单独的终端中，使用以下命令运行 laravel 服务器
php 工匠服务
在视图中包含 /js/app.js 和 app 标签
您的 app.js 文件将被编译并保存到 public/js/app.js。确保在您的 HTML 脚手架中也有一个带有应用程序 ID 的根元素。否则，Vue 将不知道在哪里挂载组件。
// 资源/views/app.blade.php
<div id="app"></div><script src="{{ asset('js/app.js') }}" defer></script>
拥有同时具有前端和后端洞察力的开发人员可以作为您项目的资产。
全栈开发人员可以看到更大的图景并相应地编写代码，从而减少故障排除时间、问题和错误。{ 休息; } 搜索循环并立即联系我们！
试试我们的 15 天无风险试用VueJS 设置：在 Laravel 和 VueJS 2 中集成 Razorpay 支付网关
// 资源/js/app.js
从'./App.vue'导入应用程序；const app = new Vue({
埃尔：'#app'，
模板： ”",
成分： {
应用程序，
},});
创建 App.vue 文件
该文件目前包含付款数据；在您的实时应用程序中，您需要在“支付”按钮点击时传递用户信息和金额。
// 资源/js/App.vue
<模板>
<section class="付款">
<分区>
<span>金额：</span>
<input type="text" v-model="amount" />
<button type="button" @click="razorPay">用Razorpay支付</button>
</div>
</节></模板>
创建 Razorpay 帐户
从这里创建一个帐户：https://razorpay.com
从这里获取 ID 和密码：https://dashboard.razorpay.com/app/keys
打开 .env 文件并向其中添加 RazorPay 密钥和密码
//.环境
RZ_KEY_ID=YOUR_KEYRZ_SECRET=你的秘密
设置和安装 Razorpay 包
使用以下命令安装 RazorPay 包
作曲家需要 razorpay/razorpay
创建配置文件以访问 .env 值并使用以下代码。
// 配置/values.php
env('RZ_KEY_ID', 'YOUR_KEY'),
'razorpaySecret' => env('RZ_SECRET', 'YOUR_SECRET'),];
创建 Razorpay 控制器
使用以下命令创建控制器。
php artisan make:控制器 RazorPayController
// 应用程序/Http/Controllers/RazorPayController.php
订单->创建（[
'收据' => '123',
'金额' => $request->金额 * 100,
'货币'=>'INR'
]); // 创建 Razorpay 订单
$数据= [
"key" => Config("values.razorpayKey"),
"金额" => $request->金额 * 100,
"order_id" => $orderData['id'],
];
返回响应()->json($data, 200);
}
功能验证（请求$request）
{
$成功=真；
$error = "支付失败！";
如果（空（$request->razorpay_payment_id）=== false）{
$api = new Api(Config("values.razorpayKey"), Config("values.razorpaySecret"));
尝试 {
$属性 = [
'razorpay_order_id' => $request->razorpay_order_id,
'razorpay_payment_id' => $request->razorpay_payment_id,
'razorpay_signature' => $request->razorpay_signature
];
$api->utility->verifyPaymentSignature($attributes);
} 赶上（SignatureVerificationError $e）{
$成功=假；
$error = 'Razorpay 错误：'。$e->getMessage();
}
}
如果（$成功===真）{
// 使用成功数据更新数据库
// 跳转到成功页面
返回重定向（'/'）;
} 别的 {
// 使用错误数据更新数据库
// 错误重定向到支付页面
// 将 $error 与路由一起传递
返回重定向（'/'）;
}
}}
添加路线
在我们的教程中更进一步：Razorpay 支付网关集成。让我们添加用于显示 Razorpay 页面和验证请求的路由。打开 routes/web.php 文件并使用以下代码。
// 路由/web.php
使用 App\Http\Controllers\RazorPayController；
Route::view('/pay/razorpay', 'razorpay');Route::post('/pay/verify', [RazorPayController::class, 'verify']);
现在，添加一个 API 路由以通过 VueJS 访问。为此，请使用以下代码。
// 路由/api.php
使用 App\Http\Controllers\RazorPayController；
Route::post('payment/razorpay', [RazorPayController::class, 'razorpay'])->name('paymentRazorpay');
创建 Razorpay 视图
这是 Razorpay 网关，用户将输入凭据并使用各种方法进行支付。您可以在此处输入您的公司/个人详细信息，例如名称、描述和徽标，以向用户显示他们正在付款的人。
// 资源/视图/razorpay.blade.php
<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">
<input type="hidden" name="razorpay_order_id" id="razorpay_order_id" value="<?php echo request()->order_id ?>"></表格>
您还可以预填用户数据（如果已经存在）；您需要在选项下添加它。
预填充： {
名称：“用户名”，
电子邮件：“用户电子邮件”，
电话：“用户联系方式”}
检查交易
用户界面看起来像这样。
现在是检查支付交易的时候了；为此，请访问RazorPay 控制面板。
这是参考图像：
完整的源代码可在此处获得：razorpay-payment-gateway-integration-example。使用以下命令克隆存储库并使用它。
git 克隆 https://github.com/keyurkansara/razorpay-laravel-vue.git
结论
希望教程：Razorpay 支付网关集成对您有所帮助。如有任何问题、建议或反馈，请随时与我们联系。您可以访问VueJS和Laravel 教程页面，并分别探索有关这两种技术的更多信息。每个教程都会为您提供一个 github 存储库，以便您可以使用代码。
Bacancy 拥有一批熟练的开发人员，他们具有后端和前端开发方面的专业知识。我们专业的全栈开发人员从前端和后端的角度分析项目需求和问题，提供最优的解决方案。您是否正在寻找具有前端和后端经验的开发人员？如果是，请立即联系我们并聘请全栈开发人员。