Question

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

似乎可以识别该表单，因为令牌已通过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

但是令牌（和表单）没有发布到我的服务器上以创建条带所需的费用。

这是加载条带自定义结帐的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令牌中添加一个表单变量以发布到我的收费路线，该问题适用于以下问题：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

我决定将令牌更改为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();
})

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

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

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

@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)

如果对我的代码有任何建议/建议，将不胜感激！

如何将条带化自定义结帐令牌发布到Flask后端

1 个答案: