使用 Python Flask 自定义 Stripe Checkout

Question

我正试图弄清楚如何在我的 Flask 网络应用程序上设置与 Stripe 的自定义结帐集成。

我将 Stripe 文档 (https://stripe.com/docs/checkout#integration-custom) 中的代码复制到我的 HTML 底部：

<div class = "container">
<script src="https://checkout.stripe.com/checkout.js"></script>
  <form role="form" id = "myForm" action="{{ url_for('charge')}}" method="post">
<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: "{{ key }}",
          locale: 'auto',
          token: function(token) {
              $("#stripeToken").val(token.id);
              $("#stripeEmail").val(token.email);
              $("#myForm").submit();
          }
        });

        document.getElementById('confirm').addEventListener('click', function(e) {
          // Open Checkout with further options:
          handler.open({
            name: 'Checkout',
            description: "",
            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>
</form>
</div>

不幸的是，虽然会弹出 Stripe 结帐屏幕，但它无法向我的服务器发送 POST 请求。我相当肯定这是因为我的函数（令牌）不正确。但是，我不太擅长 Javascript，所以我不知道在这里做什么。任何关于如何将令牌发送到我的 Flask 服务器的建议将不胜感激。作为参考，这是我的后端：

@app.route('/charge', methods=['GET', 'POST'])
def charge():
    if request.method == 'POST':
            customer = stripe.Customer.create(
                email = session['user'],
                source = request.form['stripeToken']
            )

            charge = stripe.Charge.create(
                customer = customer.id,
                amount = session['amount'],
                currency = 'usd',
                description = 'Payment'
            )
            orders = mongo.db.orders
            has_ordered = orders.find_one({'_id': session['user']})
            if has_ordered:
                orders.update({'_id': session['user']},
                                {'$set':
                                    {'name': request.form['name'],
                                     'dorm': request.form['dorm']}})
            else:
                orders.insert({'_id': session['user'],
                                'name': request.form['name'],
                                'dorm': request.form['dorm']})
            for key, value in (session['customer']).iteritems():
                has_ordered = orders.find_one({'_id': session['user'], str(key): {'$exists': True}})
                total = int(value)
                if has_ordered:
                    total += int(has_ordered[key])
                orders.update({'_id': session['user']},
                                {'$set':
                                     {key: total}})
            content = render_template('message.html', ordered = True)
            send_mail('Your Order Summary', content, session['user'], True)
            session['customer'] = {}
            return redirect(url_for('index'))
    else:
        try:
            if g.user:
                return render_template('charge.html', 
                                        key = stripe_keys['publishable_key'],
                                        amount = session['amount'],
                                        tax = session['tax'],
                                        subtotal = session['subtotal'],
                                        months = 2 * deliveries_remaining())
        except KeyError:
            return redirect(url_for('shop'))
        return redirect(url_for('login'))

如果有人能给我提供用于函数（令牌）的代码，我将不胜感激。谢谢！

Answer 1

检查您的浏览器控制台日志以查看它是否识别您的令牌中的 jquery 代码。当我运行这段代码时，控制台返回了$ is not defined。

尝试像这样在令牌中初始化 jquery：

          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();
            })
          }
        });

并在容器 div 上方添加此脚本：

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

如果您想了解更多信息，请参阅此页面：https://api.jquery.com/ready/