如何使用 Fincra 接受在線支付
你有一個網站嗎？您想接受客戶的在線支付嗎？如果您對這些問題的回答是肯定的，那麼 Fincra 是最佳選擇。 Fincra 還提供各種其他服務，例如跨幣種支付和創建虛擬賬戶
通過將 Fincra API 集成到您的應用程序中，您可以為您的特定用例創建任何支付流程。有關如何集成其各種產品和服務的說明，請參閱 Fincra 的文檔。
Fincra 允許您向全球客戶收取付款的一種方式是通過結帳 API。
結帳 API 有標準格式和重定向格式；在本教程中，我們將使用標準方法。標準格式涉及您在應用程序中包含一個 Javascript 文件，該文件將生成一個模式，該模式可用於接收客戶的付款，而無需將他們重定向到另一個頁面。
本教程將教您如何將 Fincra 的結賬 API 集成到您的 NodeJS 應用程序中。
先決條件
要學習本教程，我們需要：
- 對 JavaScript 和 node js 有一些了解，但不是必需的
- 我們還需要一個 Fincra 帳戶來接收或接受來自我們的應用程序的付款。
- 全神貫注
步驟 1 - 創建目錄並安裝依賴項
首先，我們需要創建我們的項目。您可以使用您選擇的任何 IDE。
通過鍵入以下命令創建一個文件夾並初始化 npm
mkdir fincra-app
cd fincra-app
npm init -y
第 2 步 - 創建文件
在我們文件夾的根目錄下，我們將創建三個文件：index.js、index.html 和 app.js。
touch app.js index.js index.html
您的文件夾結構現在應該如下所示。
第 3 步 - 安裝依賴項
我們將安裝幾個依賴項，例如 express、dotenv 和 axios，以及一個開發依賴項，例如 nodemon，以便在我們進行更改時服務器會自動重啟。
npm install dotenv express
npm install nodemon -D
第 4 步 - 創建 Node.js 服務器
我們現在可以通過將以下代碼片段按順序添加到我們的 app.js、index.js 中來創建我們的 Node.js 服務器。
In our app.js
fincra-app/app.js
require("dotenv").config();
const express = require("express");
const app = express();
app.use(express.json());
// your Logic here
module.exports = app;
In our index.js
const http = require("http");
const app = require("./app");
const server = http.createServer(app);
const { API_PORT } = process.env;
const port = process.env.PORT || API_PORT
server.listen(port, () => {
console.log(`Server running on port ${port}`);
});
我們的文件需要環境變量。在運行我們的應用程序之前，我們將創建一個 .env 文件並添加我們的變量。
In our .env
API_PORT=3000
我們將對 package.json 中的腳本對象進行更改，使其看起來像這樣。
"scripts": {
"start": "node index.js",
"dev": "nodemon index.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
上面的代碼已添加到我們的 app.js 和 index.js 文件中。我們為我們的 Node.js 服務器創建了一個 index.js 文件，並使用我們打算使用的路由導入了 app.js 文件。
使用 npm run 命令，我們將在終端中執行 npm dev。
npm run dev
現在服務器已啟動並運行，一切都應該正常工作。
步驟 5 - 創建前端客戶端
讓我們設置前端客戶端以接收客戶付款。
使用下面的代碼片段更新我們之前創建的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Receive Payment With Fincra</title>
<style>
input {
display: block;
margin: 10px 0;
width: 300px;
height: 30px;
padding: 2px 15px;
border: 1px solid #ddd;
border-radius: 3px;
}
button {
display: block;
margin: 10px 0;
color: white;
width: 330px;
height: 50px;
padding: 2px 15px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #844ef1;
font-weight: bold;
}
form {
left: 50%;
top: 30%;
position: absolute;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<form class="form" id="payment-form">
<div class="form-group">
<label for="name"> Name</label>
<input type="text" id="name" />
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="number" id="amount"/>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" />
</div>
<div class="form-submit">
<button type="submit" onclick="payFincra()"> Pay with Fincra</button>
</div>
</form>
<script src="https://unpkg.com/@fincra-engineering/[email protected]/dist/inline-test.min.js"></script></body>
</html>
本例中的注意事項：
- 一個
script標籤用於添加 Fincra JavaScript。這就是將 Fincra 導入代碼的方式 - payFincra onClick 函數鏈接到支付按鈕。這就是 Fincra 支付模式出現的原因。
讓我們將以下 javascript 片段添加到我們的 HTML 文件中
<script>
const paymentForm = document.getElementById('payment-form');
paymentForm.addEventListener("submit", payFincra, false);
function payFincra(e) {
e.preventDefault();
Fincra.initialize({
key: "your public key",
amount: parseInt(document.getElementById("amount").value),
reference: "your unique reference here"
currency: "NGN",
customer: {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
},
onClose: function () {
alert("Transaction was not completed, window closed.");
},
onSuccess: function (data) {
const reference = data.reference;
alert("Payment complete! Reference: " + reference);
},
});
}
</script>
注意以下幾點：
key此處的字段獲取您的 Fincra 公鑰；您可以按照此處的說明獲取它amount這裡的字段是要收集的金額。- 為避免重複嘗試，最好生成唯一的
reference從您的系統中獲取每筆交易。 -
onClose如果用戶在未完成支付的情況下關閉模態框，則調用該方法。 -
onSuccess事務完成時調用方法
這就是我們的 index.html 文件現在的樣子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Receive Payment With Fincra</title>
<style>
input {
display: block;
margin: 10px 0;
width: 300px;
height: 30px;
padding: 2px 15px;
border: 1px solid #ddd;
border-radius: 3px;
}
button {
display: block;
margin: 10px 0;
color: white;
width: 330px;
height: 50px;
padding: 2px 15px;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #844ef1;
font-weight: bold;
}
form {
left: 50%;
top: 30%;
position: absolute;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<form class="form" id="payment-form">
<div class="form-group">
<label for="name"> Name</label>
<input type="text" id="name" />
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input type="number" id="amount"/>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" />
</div>
<div class="form-submit">
<button type="submit" onclick="payFincra()"> Pay with Fincra</button>
</div>
</form>
<script src="https://unpkg.com/@fincra-engineering/[email protected]/dist/inline.min.js"></script>
<script>
const paymentForm = document.getElementById('payment-form');
paymentForm.addEventListener("submit", payFincra, false);
function payFincra(e) {
e.preventDefault();
Fincra.initialize({
key: "your public key",
amount: parseInt(document.getElementById("amount").value),
reference: "your unique reference here"
currency: "NGN",
customer: {
name: document.getElementById("name").value,
email: document.getElementById("email").value,
},
onClose: function () {
alert("Transaction was not completed, window closed.");
},
onSuccess: function (data) {
const reference = data.reference;
alert("Payment complete! Reference: " + reference);
},
});
}
</script>
</body>
</html>
使用以下代碼段，我們可以更新我們的 app.js 以從服務器端呈現 index.html 文件：
require("dotenv").config();
const express = require("express");
const axios = require('axios')
const path = require("path");
const app = express();
app.use(express.json());
// Add the route below
app.get("/pay", (req, res) => {
res.sendFile(path.join(__dirname + "/index.html")); //__dirname : It will resolve to your project folder.
});
module.exports = app;
讓我們在瀏覽器中輸入 http://localhost:4001/pay 看看它是否有效。當我們點擊 Pay With Fincra 按鈕時，我們應該會看到如下內容：
我們將使用測試卡號：4084 1278 8317 2787，有效期：09/22，CVV：123。
支付成功後我們會在瀏覽器上看到響應
第 6 步 - 接收 webhook
我們可以使用以下代碼片段更新我們的 app.js 文件以接收 webhook 響應。在門戶中，您可以為您的 webhook 指定 URL。查看 API 文檔，了解有關 Fincra API webhook 的更多信息。
app.post("/response", async (req, res) => {
const response = req.body.data;
console.log(response)
})
我們應該在我們的日誌中看到類似下面屏幕截圖的內容。請轉到 API 文檔以了解有關以下響應的更多信息
第 7 步 - 驗證付款
根據交易的類型，您可以通過通過引用查詢交易以確認其存在來驗證 Webhook。在這種情況下，我們可以通過引用端點獲取集合或通過引用端點獲取事務來發送獲取請求，以確認事務的狀態。
結論
本教程教我們如何將 Fincra 支付集成到我們的 nodeJs 應用程序中。
參考
芬克拉
Fincra 文檔
我很想在 Twitter 上與你聯繫 |領英
在我的下一篇博客文章中見。保重！！！
