如何将变量描述传递给 Stripe Checkout Express 后端

Question

我正在构建一个允许用户注册和支付活动费用的 Stripe 自定义结帐集成。注册选项非常简单，仅包含 4 个类别 - 价格相同。

我已经成功地将类别标题传递给 Stripe Checkout 弹出窗口中的 description 参数，但是在将相同的描述参数传递给 Stripe API 时遇到了麻烦。

测试充电成功后，Stripe 会返回带有 'description: null' 的对象。

将字符串添加到描述参数会正确返回字符串，但是我希望它返回表单中设置的类别标题。

索引.HTML

   <script>      

        var checkoutHandler = StripeCheckout.configure({
            key: "pk_test_stripeTestKey",
            locale: "auto",
        });

       // var button = document.getElementById("submitButton");
        // button.addEventListener("click", function(ev) {

        function checkout(ev) {
        var description = $('#categoryDesc').val();
        checkoutHandler.open({
        image: "/cj-stripe-icon.jpg",
        name: 'The EVENT 2019',
        description: description, //$("#categoryDesc").val() + " - " + "$130",
        amount: 13000,
        token: handleToken
    });
};
// });

            function handleToken(token) {
                fetch("/charge", {
                    method: "POST",
                    headers: {"Content-Type": "application/json"},
                    body: JSON.stringify(token)
                })
                .then(response => {
                    if (!response.ok)
                        throw response;
                    return response.json();
                })
                .then(output => {
                    console.log("Purchase succeeded:", output);
                    submitToAPI(event);
                    document.getElementById("shop").innerHTML = "<h2>Thank you for registering!</h2><h3>You should receive an email confirmation shortly.</h3>";
                })
                .catch(err => {
                    console.log("Purchase failed:", err);
                })
            }               

            </script>

APP.JS

onst express = require("express");
const stripe = require("stripe")(keySecret);
const bodyParser = require("body-parser");

const app = express();
app.use(express.static("public")); // serves content from the public directory

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.post("/charge", (req, res) => {
  let amount = 13000;

  stripe.customers.create({
    email: req.body.email,
    card: req.body.id
  })
  .then(customer =>
    stripe.charges.create({
      amount,
      currency: "usd",
      description: req.body.description,
      customer: customer.id
    }))
    .then(charge => res.send(charge))
    .catch(err => {
      console.log("Error:", err);
      res.status(500).send({error: "Purchase Failed"});
    });
});

Answer 1

当您在前端获得令牌响应时，我会构建一个新的 Javascript 对象。它应该包含两个属性：(a) 你的代币 ID 和 (b) 一些映射到后端设定价格/服务的 ENUM/描述。

例如。

var payload = {
  tokenId: token.id,
  productId: <<some product id>>
}

然后在您的后端，您应该检索此信息。

例如。

var PRODUCTS = {
  // productId: {description: 'Cat Mittens', price: 2000, ...}
  product1: {description: 'Product #1', price: 1000},
  product2: {description: 'Product #2', price: 2000}
}

if (!(req.body.productId in PRODUCTS)) {
  // Couldn't find the product id in the product list-- raise an error!
}

var product = PRODUCTS[req.body.productId];

这样您就可以在前端和后端之间映射描述。如果您不这样做，恶意的人可能会更改他们正在购买的产品或他们正在购买的产品的描述，甚至可能会更改他们正在购买的产品的价值。所以这里的最佳实践是共享某种枚举。

这让您可以做的另一件很酷的事情是在后端验证令牌。当您尝试使用 Secret API Key 检索令牌时，您可以看到有关令牌的更多详细信息，而当您使用 Publishable API Key 创建它时是看不到的。

希望有帮助！