使用Python / Flask条带自定义按钮

时间:2017-03-24 16:05:29

标签: python flask stripe-payments flask-sqlalchemy

我可以使简单的按钮或默认按钮工作,但由于没有自定义CSS的选项,我需要使用"自定义"条纹按钮。以下是我使用的简单和自定义表单,其中简单的一个工作正常但不知道如何进行自定义工作。目前,当我点击并输入信息时,它什么也没做。但默认按钮工作正常。

查看:

@app.route('/monthly', methods=['GET', 'POST'])
def monthly_charged():

    if not user_authorized():
        return redirect('/')
    amount = 1495
    # customer
    key = stripe_keys['publishable_key']
    print key
    charge_all = stripe.Charge.list(limit=10000)
    charge_dic = {}
    charge_list = []
    for charge_data in charge_all:
        charge_dic['Amount'] = "$" + str(float(charge_data.amount) / 100) + " " + charge_data.currency.upper()
        charge_dic['Description'] = charge_data.description
        charge_dic['Name'] = charge_data.receipt_email
        charge_dic['Date'] = str(datetime.datetime.fromtimestamp(charge_data.created))
        charge_list.append(charge_dic)
        charge_dic = {}

    data = get_profile_data(session['auth_token'])       
    profile_data = data['StudentProfile']
    student_id = profile_data.id
    student = get_profile_data(session['auth_token'])['StudentProfile']    
    pkg = Package.query.filter_by(student_id=profile_data.id).first()
    if pkg:
        flash('You already have an active subscription.')
    else:
        stripe_token = request.form['stripeToken']
        email = request.form['stripeEmail']
        try: 
            customer = stripe.Customer.create(
                email=email,
                source=request.form['stripeToken']
            )

            subscription = stripe.Subscription.create(
                customer=customer.id,
                plan="monthly",
            )
            student_id = profile_data.id
            student.stripe_customer_id = customer.id
            student.stripe_subscription_id = subscription.id

            package = Package(
                student_id=student_id,
                stripe_id = customer.id,
                student_email=request.form['stripeEmail'],
                is_active=True,
                package_type='monthly',
                subscription_id=subscription.id
            )
            dbase.session.add(package)
            flash("You've successfylly subscribed for monthly package.")
            dbase.session.commit()

        except stripe.error.CardError as e:
        # The card has been declined
            body = e.json_body
            err = body['error']
    return redirect(url_for('packages', key=key, amount=amount))

简单或默认条纹按钮:

            <form action="/monthly" method="post" >
            <div class="form-group">

            <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="pk_test_YgHVTCLIMQLW4NV6ntnJPAXs"
            data-description="Monthly Package"
            data-name="Monthly"
            data-amount="10000"
            data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
            data-locale="auto">
            </script>
            </div>
        </form>

自定义条纹按钮:

<form action="/monthlycharged" method="post">
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Enroll</button>
<style>
#customButton{
width:100px;
height:30px;
background-color:red;
color:white;
border:2px solid red;
}
</style>
 <script>
var handler = StripeCheckout.configure({
  key: 'pk_test_YgHVTCLIMQLW4NV6ntnJPAXs',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Monthly',
    description: 'monthly',
    amount: 10000
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

</form>

1 个答案:

答案 0 :(得分:2)

您需要在token: function() {}的{​​{1}}中提交表单。

以下是如何执行此操作的示例:https://jsfiddle.net/osrLsc8m/