发卡网源码集成了各个常见渠道的支付网关，为在线商品自动售发提供一站式自动服务的源码系统，本文介绍采用thinkphp开发一套企业级多商户发卡网系统。
仓库源码：fakaysw.top
创建发卡网源码内核Node.js：
$ mkdir node-stripe-payment-gateway
$ cd node-stripe-payment-gateway
$ npm init --yes
$ npm install express stripe
Express ： Express 是最小且灵活的 Node.js Web 应用程序框架。
Stripe： Stripe Node 库提供了对 stripe API 的便捷访问。
package.json 看起来像：
{
"name": "node-stripe-payment-gateway",
"version": "1.0.0",
"description": "Implementing stripe payment gateway in node.js",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"author": "jahangeer",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"stripe": "^8.156.0"
}
}配置支付路径
在根目录下，创建index.js文件
const express = require("express");
const app = express();
const path = require("path");
const stripe = require("stripe")("Add your secret key");
const YOUR_DOMAIN = "localhost:8080";
// static files
app.use(express.static(path.join(__dirname, "views")));
// middleware
app.use(express.json());
// routes
app.post("/payment", async (req, res) => {
const { product } = req.body;
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: [
{
price_data: {
currency: "inr",
product_data: {
name: product.name,
images: [product.image],
},
unit_amount: product.amount * 100,
},
quantity: product.quantity,
},
],
mode: "payment",
success_url: `${YOUR_DOMAIN}/success.html`,
cancel_url: `${YOUR_DOMAIN}/cancel.html`,
});
res.json({ id: session.id });
});
// listening...
const port = process.env.PORT || 8080;
app.listen(port, () => console.log(`Listening on port ${port}...`));
样式.css /views/style.css
.container {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: #f5f5f5;
}
.product {
width: 250px;
padding: 10px;
height: auto;
background-color: white;
border-radius: 5px;
border: 2px solid black;
}
.product_img {
width: 100%;
height: 250px;
object-fit: contain;
border-bottom: 1px solid black;
}
.description {
display: flex;
justify-content: space-between;
}
#btn {
width: 100%;
padding: 10px;
}
结帐用户界面
/views/checkout.html
<div class="product">
<div class="description">
<h3>iPhone 12</h3>
<h4>₹ 100.00</h4>
</div>
<button type="button" id="btn">BUY</button>
</div>
<script type="text/javascript">
// Create an instance of the Stripe object with your publishable API key
var stripe = Stripe("Add your publishable key");
var checkoutButton = document.getElementById("btn");
checkoutButton.addEventListener("click", function () {
fetch("/payment", {
headers: {'Content-Type': 'application/json'},
method: "POST",
body: JSON.stringify({
"product": {
"name": "iPhone 12",
"image": "/4668/as-images.apple.com/is/iphone-12-purple-select-2021?wid=470&hei=556&fmt=jpeg&qlt=95&.v=1617130317000",
"amount": 100,
"quantity": 1
}})
})
.then(function (response) {
return response.json();
})
.then(function (session) {
return stripe.redirectToCheckout({ sessionId: session.id });
})
.then(function (result) {
// If redirectToCheckout fails due to a browser or network
// error, you should display the localized error message to your
// customer using error.message.
if (result.error) {
alert(result.error.message);
}
})
.catch(function (error) {
console.error("Error:", error);
});
});
</script>
交易成功界面
/views/success.html
<div class="product">
<img
src="/png-vector/20191104/ourmid/pngtree-checkmark-icon-green-color-png-image_1952984.jpg"
alt="succes tick mark"
class="product_img"
/>
<h3 style="text-align: center" >Transaction Successful</h3>
支付取消UI
/views/cancel.html
<div class="product">Forgot to add something to your cart? Shop around then come back to pay!</div>
