javascript - 如何将 strip 自定义结帐 token 发布到 flask 后端

Question

我正在尝试集成 Stripe 自定义结帐 https://stripe.com/docs/checkout#integration-custom使用 Flask 和 WTForms。我目前的问题是付款表格似乎没有发布，因此无法创建信用卡费用。

似乎表单已被识别，因为 token 正在以 200 响应发布到 stripe 的 api:

XHRPOST
https://api.stripe.com/v1/tokens
[HTTP/2.0 200 OK 1444ms]


Form data   
card[cvc]   123
card[exp_month] 10
card[exp_year]  20
card[name]      dev@local.host
card[number]    4242424242424242
email   dev@local.host
guid    4a6cfd25-8c4b-4d98-9dd2-9e9c1770e290
key pk_test_DVVO0zxtWjXSZx4yHsZGJxtv
muid    c6b9d635-20de-4fc6-8995-5d5b2d165881
payment_user_agent  Stripe+Checkout+v3+checkout-manhattan+    (stripe.js/9dc17ab)
referrer    http://localhost:8000/subscription/index
sid 494d70dd-e854-497b-945b-de0e96a0d646
time_on_page    26657
validation_type card

但是， token (和表单)并未发布到我的服务器以创建 stripe 所需的费用。

这是加载 stripe 自定义结帐的 javascript 代码，位于/index.html 中:

<script src="https://checkout.stripe.com/checkout.js"></script>
<form role="form" id = "payment_form" action="{{ url_for('billing.charge') }}" method="post">
  {{ form.hidden_tag }}
  <input type="hidden" id="stripeToken" name="stripeToken" />
  <input type="hidden" id="stripeEmail" name="stripeEmail" />
<div class="form-group">
              <div class="col-md-12 button-field" style = "text-align: center;">
                <button type="confirm" id = 'confirm' onclick = "runStripe('https://checkout.stripe.com/checkout.js')" class="btn btn-default btn-responsive btn-lg">Confirm Order</button>
              </div>
            </div>  
        <script>
          var handler = StripeCheckout.configure({
            key: "{{ stripe_key }}",
            locale: 'auto',
            token: function(token) {

                    // token ID as a hidden field 
                var form = document.createElement("form");
                form.setAttribute('method', "POST");
                form.setAttribute('action', "{{ url_for('billing.charge') }}");
                form.setAttribute('name', "payment-form");

                var inputToken = document.createElement("input");
                inputToken.setAttribute('type', "hidden");
                inputToken.setAttribute('name', "stripeToken");
                inputToken.setAttribute('value', token.id);
                form.appendChild(inputToken);

                // email as a hidden field 
                var inputEmail = document.createElement("input");
                inputEmail.setAttribute('type', "hidden");
                inputEmail.setAttribute('name', "stripeEmail");
                inputEmail.setAttribute('value', token.email);
                form.appendChild(inputEmail);

                document.body.appendChild(form);
            }
          });

        document.getElementById('confirm').addEventListener('click', function(e) {
        // Open Checkout with further options:
        handler.open({
          name: 'Stripe.com',
          description: '2 widgets',
          amount: '{{ amount }}'
        });
        e.preventDefault();
      });

      // Close Checkout on page navigation:
      window.addEventListener('popstate', function() {
        handler.close();
      });
    </script>
    <script>
    document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
  </script>

我尝试在 html 标记中使用 post 方法但没有成功。我还尝试在 javascript token 中添加一个表单变量以发布到我的收费路线，改编自这个问题:Stripe Checkout Link onClick does not process payment

这是我的索引和收费路线供引用:

@billing.route('/index', methods=['GET', 'POST'])
def index():
stripe_key = current_app.config.get('STRIPE_PUBLISHABLE_KEY') 
amount = 1010

form = CreditCardForm(stripe_key=stripe_key)

return render_template('billing/index.html', stripe_key=stripe_key, form=form)

@billing.route('/charge', methods=['GET', 'POST'])
def charge():

if request.method == 'POST':
        customer = stripe.Customer.create(
            email = current_user,
            source = request.form['stripeToken']
        )

        charge = stripe.Charge.create(
            customer = customer.id,
            amount = 2000,
            currency = 'usd',
            description = 'payment'
        )

return render_template('charge.html', customer=customer, charge=charge)

Answer 1

我决定将 token 更改为 jquery，它现在似乎可以完美运行并且简单得多:

    <script>
      var handler = StripeCheckout.configure({
        key: "{{ stripe_key }}",
        locale: 'auto',
        token: function(token) {

          $(document).ready(function(){
            $("#stripeToken").val(token.id);
            $("#stripeEmail").val(token.email);
            $("#payment_form").submit();
})
</script>

为了识别jquery，我还在html文件的顶部添加了jquery包的脚本:

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

最后，对于其他需要 flask 帮助的人，这是我调整后的路线:

@billing.route('/index', methods=['GET', 'POST'])
@handle_stripe_exceptions
@login_required

def index():
stripe_key = current_app.config.get('STRIPE_PUBLISHABLE_KEY') 
amount = 1010

form = CreditCardForm(stripe_key=stripe_key, name=current_user.name, amount=amount )

if request.method == 'POST':

    customer = stripe.Customer.create(
        email='customer@example.com',
        source=request.form['stripeToken']
    )

    charge = stripe.Charge.create(
        customer=customer.id,
        amount=amount,
        currency='usd',
        description='Flask Charge'
    )

return render_template('billing/index.html', stripe_key=stripe_key, form=form)