Python/Flaskのストライプカスタムボタン

Question

シンプルなボタンやデフォルトのボタンが機能するようにすることができますが、カスタム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> 

Answer 1

あなたはStripeCheckout.configureのtoken: function() {}にフォームを提出する必要があります。

はここでそれを行う方法の例です：https://jsfiddle.net/osrLsc8m/