Javascript 无法访问变量&；设置条带连接（烧瓶）

我正在构建一个Flask marketplace应用程序（使用Stripe），用户可以选择他们想要支付的金额（想想募捐者）

在整个结帐过程中，我很难正确地移动必要的数据，我真的需要一些帮助

一旦用户输入他们想捐赠的金额，捐赠金额和他们想捐赠的活动的所有者将被发送到下面的

/pay

路径，在那里他们可以看到一个表单，通过“提交付款”按钮输入他们的卡详细信息

文件payment\u form.html有一个简单的条带格式，如下所示：

<form method="post" id="payment-form" class="sr-payment-form">
    <div class="sr-form-row">
        <label for="card-element">Credit or debit card</label>
        <div style="width: 30em" id="card-element"></div>
    </div>
    <div>
        <span style="width: 30em; height: 2em; letter-spacing: 0em" id="card-errors" role="alert"></span>
    </div>
    <button id="card-button" style="width: 33em;">Submit Payment</button>
</form>

此脚本获取以下Flask API

/pay\u now

，并应返回

clientSecret

变量以及完成事务所需的其他数据

@app.route('/pay_now', methods=['GET','POST'])
def create_payment():
    intent = stripe.PaymentIntent.create(
        payment_method_types=['card'],
        amount="1000", #need to pass dollar amount here calculated in /pay route
        currency="usd",
        transfer_data={'destination': owner.stripe_id}, #need to pass owner from /pay route
        application_fee_amount="100")
    )
    client_secret = intent.client_secret
    return jsonify({"client_secret": client_secret})

所以，基本上，我的困境是，我把捐赠金额和活动负责人作为/pay路径中的变量。但是，当我从JavaScript调用

/pay\u now API

时，我需要在创建stripe.PaymentIntent对象时访问它们，然后我需要将

clientSecret

变量传递回我的JavaScript文件，以便

confirmCardPayment（）

实际完成付款

如果我的方法不合理，我也愿意接受不同的方法

---

我不熟悉条纹&不熟悉烧瓶中的api。这里的任何帮助或解释都会非常有用。提前谢谢

您只想发布到您的

/pay\u now

路线，在该帖子的正文中，您应该包括您的用户打算捐赠的金额。然后，在创建PaymentIntent并返回要在客户机上确认的客户机机密时，就可以简单地将该金额包括在内

您可能希望首先在客户端和服务器上进行一些检查，以确定金额是否合理（例如，如果有人输入-1，则该金额将被正确拒绝）

响应解析为JSON后，

条带.confirmCardPayment

代码应进入

然后

获取请求的解析程序：

fetch("/pay_now", {
    method: "POST",
    body: JSON.stringify({
      amount: amount, // get this from the form
    }),
    headers: {
      "Content-Type": "application/json"
    },
  })
  .then(response => response.json())
  .then(data => {
    stripe.confirmCardPayment(data.clientSecret, {
      payment_method: {
        card: card,
        billing_details: {
          name: name, // get this from the form, like you did with the amount
        }
      }
    })
  .then(function(result) {
    if (result.error) {
      console.log(result.error.message);
    } else {
      if (result.paymentIntent.status === 'succeeded') {
        // display success message
      }
    }
  });

---

谢谢你的评论。我有几个后续问题。。。如何从发送到JavaScript文件的

/pay

路径中获取

amount

变量？我知道如何使用Jinja将其输入html，但不确定如何在JavaScript中实际使用该变量。另外，你能解释一下为什么我们使用POST而不是GET吗？我们正在将数据发送到路由

/pay\u now

，但我们也在获取

客户机的机密

，因为我们需要它在JavaScript中用于stripe.confirmPayment（）。

@app.route('/pay_now', methods=['GET','POST'])
def create_payment():
    intent = stripe.PaymentIntent.create(
        payment_method_types=['card'],
        amount="1000", #need to pass dollar amount here calculated in /pay route
        currency="usd",
        transfer_data={'destination': owner.stripe_id}, #need to pass owner from /pay route
        application_fee_amount="100")
    )
    client_secret = intent.client_secret
    return jsonify({"client_secret": client_secret})

fetch("/pay_now", {
    method: "POST",
    body: JSON.stringify({
      amount: amount, // get this from the form
    }),
    headers: {
      "Content-Type": "application/json"
    },
  })
  .then(response => response.json())
  .then(data => {
    stripe.confirmCardPayment(data.clientSecret, {
      payment_method: {
        card: card,
        billing_details: {
          name: name, // get this from the form, like you did with the amount
        }
      }
    })
  .then(function(result) {
    if (result.error) {
      console.log(result.error.message);
    } else {
      if (result.paymentIntent.status === 'succeeded') {
        // display success message
      }
    }
  });