Laravel 和 VueJS 2 中的 Razorpay 支付網(wǎng)關(guān)集成

言鼎科技 2023-06-27 421

初始設(shè)置：Laravel 和 NPM 依賴項安裝

首先，您需要一個新的 Laravel 版本和安裝的節(jié)點依賴項才能開始；運行下面一一提到的命令來安裝所需的東西。


作曲家創(chuàng)建項目 laravel/laravel razorpay-democd razorpay-演示作曲家需要 laravel/uiphp 工匠 ui vuenpm 安裝npm 運行開發(fā)

注意：如果你遇到這個錯誤
“找不到模塊'webpack/lib/rules/DescriptionDataMatcherRulePlugin'”

運行這個命令


npm i vue-loader

然后在單獨的終端中，使用以下命令運行 laravel 服務(wù)器


php 工匠服務(wù)

在視圖中包含 /js/app.js 和 app 標(biāo)簽

您的 app.js 文件將被編譯并保存到 public/js/app.js。確保在您的 HTML 腳手架中也有一個帶有應(yīng)用程序 ID 的根元素。否則，Vue 將不知道在哪里掛載組件。

// 資源/views/app.blade.php


<div id="app"></div><script src="{{ asset('js/app.js') }}" defer></script>
Laravel 和 VueJS 2 中的 Razorpay 支付網(wǎng)關(guān)集成

擁有同時具有前端和后端洞察力的開發(fā)人員可以作為您項目的資產(chǎn)。

全棧開發(fā)人員可以看到更大的圖景并相應(yīng)地編寫代碼，從而減少故障排除時間、問題和錯誤。{ 休息; } 搜索循環(huán)并立即聯(lián)系我們！

試試我們的 15 天無風(fēng)險試用

VueJS 設(shè)置：在 Laravel 和 VueJS 2 中集成 Razorpay 支付網(wǎng)關(guān)

// 資源/js/app.js


從'./App.vue'導(dǎo)入應(yīng)用程序；const app = new Vue({
  埃爾：'#app'，
  模板： ”",
  成分： {
    應(yīng)用程序，
  },});

創(chuàng)建 App.vue 文件

該文件目前包含付款數(shù)據(jù)；在您的實時應(yīng)用程序中，您需要在“支付”按鈕點擊時傳遞用戶信息和金額。

// 資源/js/App.vue


<模板>
  <section class="付款">
    <分區(qū)>
      <span>金額：</span>
      <input type="text" v-model="amount" />
      <button type="button" @click="razorPay">用Razorpay支付</button>
    </div>
  </節(jié)></模板>

創(chuàng)建 Razorpay 帳戶

從這里創(chuàng)建一個帳戶：https://razorpay.com

從這里獲取 ID 和密碼：https://dashboard.razorpay.com/app/keys


打開 .env 文件并向其中添加 RazorPay 密鑰和密碼

//.環(huán)境


RZ_KEY_ID=YOUR_KEYRZ_SECRET=你的秘密

設(shè)置和安裝 Razorpay 包

使用以下命令安裝 RazorPay 包


作曲家需要 razorpay/razorpay

創(chuàng)建配置文件以訪問 .env 值并使用以下代碼。

// 配置/values.php


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

創(chuàng)建 Razorpay 控制器

使用以下命令創(chuàng)建控制器。


php artisan make:控制器 RazorPayController

// 應(yīng)用程序/Http/Controllers/RazorPayController.php


訂單->創(chuàng)建（[
     '收據(jù)' => '123',
     '金額' => $request->金額 * 100,
     '貨幣'=>'INR'
   ]); // 創(chuàng)建 Razorpay 訂單
 
   $數(shù)據(jù)= [
     "key" => Config("values.razorpayKey"),
     "金額" => $request->金額 * 100,
     "order_id" => $orderData['id'],
   ];
   返回響應(yīng)()->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();
     }
   }
 
   如果（$成功===真）{
     // 使用成功數(shù)據(jù)更新數(shù)據(jù)庫
     // 跳轉(zhuǎn)到成功頁面
     返回重定向（'/'）;
   } 別的 {
     // 使用錯誤數(shù)據(jù)更新數(shù)據(jù)庫
     // 錯誤重定向到支付頁面
     // 將 $error 與路由一起傳遞
     返回重定向（'/'）;
   }
 }}

添加路線

在我們的教程中更進一步：Razorpay 支付網(wǎng)關(guān)集成。讓我們添加用于顯示 Razorpay 頁面和驗證請求的路由。打開 routes/web.php 文件并使用以下代碼。

// 路由/web.php


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

現(xiàn)在，添加一個 API 路由以通過 VueJS 訪問。為此，請使用以下代碼。

// 路由/api.php


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

創(chuàng)建 Razorpay 視圖

這是 Razorpay 網(wǎng)關(guān)，用戶將輸入憑據(jù)并使用各種方法進行支付。您可以在此處輸入您的公司/個人詳細信息，例如名稱、描述和徽標(biāo)，以向用戶顯示他們正在付款的人。

// 資源/視圖/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 ?>"></表格>

您還可以預(yù)填用戶數(shù)據(jù)（如果已經(jīng)存在）；您需要在選項下添加它。


預(yù)填充： {
  名稱：“用戶名”，
  電子郵件：“用戶電子郵件”，
  電話：“用戶聯(lián)系方式”}

檢查交易

用戶界面看起來像這樣。


現(xiàn)在是檢查支付交易的時候了；為此，請訪問RazorPay 控制面板。

這是參考圖像：


完整的源代碼可在此處獲得：razorpay-payment-gateway-integration-example。使用以下命令克隆存儲庫并使用它。


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

結(jié)論

希望教程：Razorpay 支付網(wǎng)關(guān)集成對您有所幫助。如有任何問題、建議或反饋，請隨時與我們聯(lián)系。您可以訪問VueJS和Laravel 教程頁面，并分別探索有關(guān)這兩種技術(shù)的更多信息。每個教程都會為您提供一個 github 存儲庫，以便您可以使用代碼。

Bacancy 擁有一批熟練的開發(fā)人員，他們具有后端和前端開發(fā)方面的專業(yè)知識。我們專業(yè)的全棧開發(fā)人員從前端和后端的角度分析項目需求和問題，提供最優(yōu)的解決方案。您是否正在尋找具有前端和后端經(jīng)驗的開發(fā)人員？如果是，請立即聯(lián)系我們并聘請全棧開發(fā)人員。

言鼎科技

The End