发卡网源码集成了各个常见渠道的支付网关，为在线商品自动售发提供一站式自动服务的源码系统，本文介绍采用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 看起来像：

彩虹发卡网源码（基于thinkphp简洁发卡网源码开源）_html

{

  "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>&#8377 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>