Python/Flask의 스트라이프 커스텀 버튼

Question

간단한 버튼이나 기본 버튼을 사용할 수 있지만 사용자 정의 CSS에는 옵션이 없기 때문에 "사용자 정의"스트라이프 버튼을 사용해야합니다. 다음은 간단한 하나가 잘 작동하지만 사용자 정의 작업을 수행하는 방법을 모르는 간단한 형식입니다. 현재 클릭하고 정보를 입력 할 때 아무 것도하지 않습니다. 그러나 Default 버튼은 정상적으로 작동합니다.

보기 :

@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> 

사용자 정의 스트라이프 버튼 :

당신은 StripeCheckout.configure의 token: function() {}에서 양식을 제출해야

<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

. https://jsfiddle.net/osrLsc8m/