javascript - 如何将条带自定义结帐令牌发布到烧瓶后端
问题描述
我正在尝试将 Stripe 自定义结帐https://stripe.com/docs/checkout#integration-custom与 Flask 和 WTForms 集成。我目前的问题是付款表格似乎没有发布,因此无法创建信用卡费用。
似乎该表单已被识别,因为令牌正在以 200 响应发布到条带的 api:
XHRPOST
https://api.stripe.com/v1/tokens
[HTTP/2.0 200 OK 1444ms]
Form data
card[cvc] 123
card[exp_month] 10
card[exp_year] 20
card[name] dev@local.host
card[number] 4242424242424242
email dev@local.host
guid 4a6cfd25-8c4b-4d98-9dd2-9e9c1770e290
key pk_test_DVVO0zxtWjXSZx4yHsZGJxtv
muid c6b9d635-20de-4fc6-8995-5d5b2d165881
payment_user_agent Stripe+Checkout+v3+checkout-manhattan+ (stripe.js/9dc17ab)
referrer http://localhost:8000/subscription/index
sid 494d70dd-e854-497b-945b-de0e96a0d646
time_on_page 26657
validation_type card
但是,令牌(和表单)并未发布到我的服务器以创建条带所需的费用。
这是加载条带自定义结帐的javascript代码,位于/index.html中:
<script src="https://checkout.stripe.com/checkout.js"></script>
<form role="form" id = "payment_form" action="{{ url_for('billing.charge') }}" method="post">
{{ form.hidden_tag }}
<input type="hidden" id="stripeToken" name="stripeToken" />
<input type="hidden" id="stripeEmail" name="stripeEmail" />
<div class="form-group">
<div class="col-md-12 button-field" style = "text-align: center;">
<button type="confirm" id = 'confirm' onclick = "runStripe('https://checkout.stripe.com/checkout.js')" class="btn btn-default btn-responsive btn-lg">Confirm Order</button>
</div>
</div>
<script>
var handler = StripeCheckout.configure({
key: "{{ stripe_key }}",
locale: 'auto',
token: function(token) {
// token ID as a hidden field
var form = document.createElement("form");
form.setAttribute('method', "POST");
form.setAttribute('action', "{{ url_for('billing.charge') }}");
form.setAttribute('name', "payment-form");
var inputToken = document.createElement("input");
inputToken.setAttribute('type', "hidden");
inputToken.setAttribute('name', "stripeToken");
inputToken.setAttribute('value', token.id);
form.appendChild(inputToken);
// email as a hidden field
var inputEmail = document.createElement("input");
inputEmail.setAttribute('type', "hidden");
inputEmail.setAttribute('name', "stripeEmail");
inputEmail.setAttribute('value', token.email);
form.appendChild(inputEmail);
document.body.appendChild(form);
}
});
document.getElementById('confirm').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Stripe.com',
description: '2 widgets',
amount: '{{ amount }}'
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
<script>
document.getElementsByClassName("stripe-button-el")[0].style.display = 'none';
</script>
我尝试在 html 标记中使用 post 方法,但没有成功。我还尝试在 javascript 令牌中添加一个表单变量以发布到我的收费路线,改编自这个问题:Stripe Checkout Link onClick does not process payment
这是我的索引和收费路线供参考:
@billing.route('/index', methods=['GET', 'POST'])
def index():
stripe_key = current_app.config.get('STRIPE_PUBLISHABLE_KEY')
amount = 1010
form = CreditCardForm(stripe_key=stripe_key)
return render_template('billing/index.html', stripe_key=stripe_key, form=form)
@billing.route('/charge', methods=['GET', 'POST'])
def charge():
if request.method == 'POST':
customer = stripe.Customer.create(
email = current_user,
source = request.form['stripeToken']
)
charge = stripe.Charge.create(
customer = customer.id,
amount = 2000,
currency = 'usd',
description = 'payment'
)
return render_template('charge.html', customer=customer, charge=charge)
解决方案
我决定将令牌更改为 jquery,它现在似乎可以完美运行并且要简单得多:
<script>
var handler = StripeCheckout.configure({
key: "{{ stripe_key }}",
locale: 'auto',
token: function(token) {
$(document).ready(function(){
$("#stripeToken").val(token.id);
$("#stripeEmail").val(token.email);
$("#payment_form").submit();
})
</script>
为了让 jquery 能够被识别,我还在 html 文件的顶部添加了 jquery 包的脚本:
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
最后,对于其他需要烧瓶帮助的人,这是我调整后的路线:
@billing.route('/index', methods=['GET', 'POST'])
@handle_stripe_exceptions
@login_required
def index():
stripe_key = current_app.config.get('STRIPE_PUBLISHABLE_KEY')
amount = 1010
form = CreditCardForm(stripe_key=stripe_key, name=current_user.name, amount=amount )
if request.method == 'POST':
customer = stripe.Customer.create(
email='customer@example.com',
source=request.form['stripeToken']
)
charge = stripe.Charge.create(
customer=customer.id,
amount=amount,
currency='usd',
description='Flask Charge'
)
return render_template('billing/index.html', stripe_key=stripe_key, form=form)
推荐阅读
- c - 从 C 中的用户输入打印浮点数的问题
- ubuntu-18.04 - 无法让 nextcloud 在端口 82 上侦听
- regex - 正则表达式查询以从具有短语的行中删除字符
- xamarin - 无法在 Azure Pipelines 中构建 Xamarin Android 项目
- java - 无法解析符号“字符串”
- java - 通过 openOutputStream (mUri) 在某些设备上写入文件时出现问题
- angular - 在 Angular 中显示大型 CSV 文件时出错
- python - 如何填补熊猫数据框中的缺失值
- highcharts - HighChart 气泡类型。datalabel 文本从 plotOptions 区域溢出
- python - 无法使用 Python 通过 Outlook 发送邮件