运行条纹< script src>仅在单击某个按钮时

时间:2017-08-01 05:12:06

标签: jquery python html flask stripe-payments

我正在尝试使用Python Flask和Stripe实施电子商务网站付款结帐页面。我成功设置了Stripe;但是,我现在正在尝试添加一个"促销代码"功能,用户可以在其中键入促销代码,单击"应用促销代码"按钮,post方法将发送到我的后端,以便验证促销代码。

不幸的是,我目前在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 checkout脚本。这是有问题的,因为我的&#34;应用促销代码&#34;按钮还会生成一个帖子请求:

<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,而是仅当&#34;确认订单&#34;时才能运行脚本src。单击按钮而不是&#34;应用促销代码&#34;单击按钮?在Python中检测request.form [&#39; submit&#39;]值的常用方法不起作用,因为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>

1 个答案:

答案 0 :(得分:0)

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