仅在单击某些按钮时运行 Stripe <script src>答案

【问题标题】：Run Stripe < script src > Only When Certain Button Clicked仅在单击某些按钮时运行 Stripe <script src>
【发布时间】：2018-01-07 19:45:02
【问题描述】：

我正在尝试使用 Python Flask 和 Stripe 实现电子商务网站付款结帐页面。我已经成功设置了 Stripe；但是，我现在正在尝试添加“促销代码”功能，用户可以在其中输入促销代码，单击“应用促销代码”按钮，然后将发送方法发送到我的后端以获取促销代码已验证。

不幸的是，我目前正在我的 HTML 中运行这个脚本：

      <script src="https://checkout.stripe.com/checkout.js" class = "stripe-button" style = ""
              data-key="{{ key }}"
              data-description=""
              data-amount="{{ amount }}"
              data-locale="auto">        
      </script>
      <script>
      document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
    </script>

这样做是在每次检测到 POST 请求时运行 Stripe 签出脚本。这是有问题的，因为我的“应用促销代码”按钮也会生成一个发布请求：

<div class="form-group">
                          <div class="col-md-12" style = "margin-bottom: 10px">
                          <input type="code" name="code" id="code" class="form-control" placeholder="Enter Code Here" style = "margin: 0 0 10px 0; border: solid 0.5px #0b3c5d; border-radius: 6px">  
                          </div>
                      </div>

我的问题是：不是每次检测到发布请求时都运行脚本 src，我如何仅在单击“确认订单”按钮而不是单击“应用促销代码”按钮时运行脚本 src？在 Python 中检测 request.form['submit'] 值的常用方法不起作用，因为 Stripe 脚本会监听 post 请求，并不关心 post 请求的值。这是我的后端：

    @app.route('/charge', methods=['GET', 'POST'])
def charge():
if request.method == 'POST':
    session.modified = True
    if request.form.get('code') and not request.form['code'] == 'SAVE10MORE':
        print('WRONG!')
    customer = stripe.Customer.create(
        email = session['user'],
        source = request.form['stripeToken']
    )

    charge = stripe.Charge.create(
        customer = customer.id,
        amount = int(100 * (session['subtotal'] + session['tax'])),
        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 = int(100 * (session['subtotal'] + session['tax'])),
                                    tax = session['tax'],
                                    subtotal = session['subtotal'],
                                    months = 2 * deliveries_remaining())
    except KeyError:
        return redirect(url_for('shop'))
    return redirect(url_for('login'))

请告诉我如何在单击某个按钮时阻止脚本 src 运行！提前致谢！这会很有帮助。

另外，我的完整 HTML 如下：

<div class = "container">
  <form role="form" action="{{ url_for('charge')}}" method="post">
    <div class="row cart-body" style = "margin-bottom: 20px">
      <div class="col-sm-8 col-xs-12">
          <div class="productbox" style = "width: 100%">
            <h2 class="section-heading"><strong>Delivery Information</strong></h2>

                  <div class="panel-body">

                    <div class="form-group">
                          <div class="col-md-12"><strong>Student Full Name:</strong></div>
                          <div class="col-md-12">
                          <input type="name" name="name" id="name" class="form-control" placeholder="John Harvard" value = "{{name}}" style = "margin: 10px 0 10px 0; border: solid 0.5px #0b3c5d; border-radius: 6px">  
                          </div>
                      </div>
                      <div class = "form-group">
                          <div class="col-md-12"><strong>Full Dorm Address:</strong></div>
                          <div class = "col-md-12">
                          <input type="dorm" name="dorm" id="dorm" class="form-control" placeholder="Straus C-12, Dewolfe 20-05" value = "{{loc}}" style = "margin: 10px 0 20px 0; border: solid 0.5px #0b3c5d; border-radius: 6px">
                          </div>
                      </div>      
                      <div class="col-md-12">
                          <span><p style = "text-align: center"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp; Don't know your dorm address yet? You can leave it blank and update it later under My Account <i class="fa fa-arrow-right" aria-hidden="true"></i> Manage Orders.</p></span>
                      </div><br>
            </div>
          </div>
        </div>
        <div class = "col-sm-4 col-xs-12">
          <div class="productbox" style = "width: 100%">
                <h2 class="section-heading"><strong>Promo Code</strong></h2>
                  <div class="panel-body">
                    <div class="form-group">
                          <div class="col-md-12" style = "margin-bottom: 10px">
                          <input type="code" name="code" id="code" class="form-control" placeholder="Enter Code Here" style = "margin: 0 0 10px 0; border: solid 0.5px #0b3c5d; border-radius: 6px">  
                          </div>
                          <div class="col-md-12" style = "text-align: center">
                            <input type="submit" name="apply" id="apply" class="btn btn-md" value = "Apply Code">  
                          </div>
                      </div>
            </div>
          </div>
        </div>
    </div>
<div class = "form-group" style = "text-align: center"> 
    <div class="form-group">
            <div class="col-md-12 button-field" style = "text-align: center;">
              <input type="submit" name = 'submit' class="btn btn-default btn-responsive btn-lg" value = "Confirm Order"></input>
            </div>
          </div>      
      <script src="https://checkout.stripe.com/checkout.js" class = "stripe-button" style = ""
              data-key="{{ key }}"
              data-description=""
              data-amount="{{ amount }}"
              data-locale="auto">        
      </script>
      <script>
      document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
    </script>
    </div>
</form>

【问题讨论】：

Checkout.js 不应该是 IIFE（立即调用的函数表达式）。试着把它变成一个函数，而不是一个 IFFE，它会在按钮点击时被调用。
嗨，这是有道理的，但我该怎么做呢？我不熟悉 Javascript 和 JQuery……我只知道 Python Flask、HTML 和 CSS。一些示例代码将不胜感激。
请在您的问题中包含您的 checkout.js。
我没有在我的网站中使用任何 javascript。后端完全在python中，你可以在上面看到，并且包含了HTML的所有相关部分。
您在哪里应用促销代码按钮？我从中了解到的是，您希望生成来自促销代码按钮的一些发布请求，然后您的 checkout.js 才能工作。是否正确。

标签： jquery python html flask stripe-payments

【解决方案1】：

您可能需要使用 Checkout 的 "custom integration"，它可以让您从 JavaScript 代码触发弹出窗口的打开。然后，您可以将弹出窗口的打开绑定到“确认订单”按钮的单击事件处理程序。

【讨论】：