我正在重组使用 saleor 1.0 的电子商务。我想要实现的是减少对项目进行付款的步骤中的冗余。saleor 1.0 的结账/付款架构要求客户从付款页面转到单独的页面，使用单选按钮选择付款类型（例如条纹、脑树、剃须刀等），然后提交该选择，然后处理订单并进入确认页面。
客观的：
我想要做的是删除将客户发送到页面以选择其付款类型的步骤，而是在付款页面上包含该选项，我觉得这使体验更加无缝。
问题：
在支付页面中包含条带时，我收到一条显示在页面上的错误消息：
<< 缺少变量“form.payment_method_id.as_hidden”>>
此外，条纹似乎正在运行，但是当我提交信用卡信息时，我没有被重定向到确认页面。
Payment.html - 注释的语法是 saleor 附带的：
{% block paymentcontent %}
<div class="row checkout">
<div class="col-lg-10 m-auto checkout__payment">
{% if order.user == user or not order.is_fully_paid %}
{% if not order.is_fully_paid and order.billing_address %}
{% if waiting_payment %}
<h1>
{% trans "Payment pending" context "Payment details title" %}
</h1>
<form method="post" action="{% url 'order:cancel-payment' token=order.token %}" class="checkout-form">
{% csrf_token %}
<p>{% blocktrans trimmed context "Payment pending text" %}
We are currently waiting for an external service to authorize
your payment for this order.
{% endblocktrans %}</p>
<p>{% trans "Current status:" context "Payment status text" %}
<br>
<span class="label label-default">
{{ waiting_payment.get_charge_status_display }}
</span>
</p>
<p>{% blocktrans trimmed context "Payment pending text" %}
Unless you are absolutely sure that the process will not complete
(for example you have closed the browser window before paying),
you should wait before attempting a new payment.
Please be warned that if you try again and the previous
transaction succeeds you might end up being charged twice.
{% endblocktrans %}</p>
{% bootstrap_form waiting_payment_form %}
<button type="submit" class="btn danger">
{% trans "I understand, allow me to pay again" context "Payment pending action" %}
</button>
</form>
{% elif payment_form %}
{% include 'order/payment/stripe.html' %}
{# <h1>#}
{# {% blocktrans trimmed context "Payment details title" %}#}
{# Pay for order {{ order }}#}
{# {% endblocktrans %}#}
{# </h1>#}
{# {% include 'order/_ordered_items_table.html' %}#}
{# <div class="d-flex flex-column align-items-start">#}
{# <h3>#}
{# <b>{% trans "Choose payment method" %}</b>#}
{# </h3>#}
{# <div class="checkout__payment-form">#}
{# <form method="post" action="{% url "order:payment" token=order.token %}" class="payment-form radio">#}
{# {% csrf_token %}#}
{# {% for choice in payment_form.gateway %}#}
{# <div class="radio checkout__payment-form__choice">#}
{# <label>#}
{# <div class="card card-default">#}
{# <div class="card-body">#}
{# <strong>#}
{# {{choice}}#}
{# </strong>#}
{# </div>#}
{# </div>#}
{# </label>#}
{# </div>#}
{# {% endfor %}#}
{# {% block form_submit %}#}
{# <button type="submit" class="btn btn-primary">#}
{# {% trans "Proceed to payment" context "Payment details primary action" %}#}
{# </button>#}
{# {% endblock %}#}
{# </form>#}
{# </div>#}
{# {% else %}#}
{# <p>{% trans "You've authorized transaction. Order is in processing" context "Payment details text" %}</p>#}
{% endif %}
{% endif %}
{% endif %}
{# </div>#}
{% include 'order/_ordered_items_table.html' %}
</div>
</div>
{% endblock paymentcontent %}
条纹.html
{% block forms %}
<form method="POST" id="payment-form" {% if form.action %} action="{{ form.action }}"{% endif %} novalidate>
<div class="form-group">
<input class="form-control" id='cardholder-name' name="cardholder-name" placeholder="Cardholder Name" required/>
</div><!-- form-group -->
<div class="form-group">
<div id="card-element" class="stripe" style="padding-top: .55rem;"></div>
</div><!-- form-group -->
<button id="card-button" class="btn btn-primary btn-block">
{% trans "Place your order" context "Payment form primary action" %}
</button>
<div class="outcome">
<div class="error"></div>
</div>
{% csrf_token %}
{% if form.errors or form.non_field_errors %}
<blockquote>
{% for non_field_error in form.non_field_errors %}
{{ non_field_error }}
{% endfor %}
{% for error in form.errors %}
{{ error }}
{% endfor %}
</blockquote>
<a class="btn" href="{% url "order:details" token=payment.order.token %}">
{% trans "Change payment" context "Payment form (Stripe) secondary action" %}
</a>
{% endif %}
{{ form.payment_method_id.as_hidden }}
</form>
<script src="https://js.stripe.com/v3/"></script>
<script>
stripe = Stripe('{{ client_token }}');
var options = {
fonts:[{cssSrc: 'https://fonts.googleapis.com/css?family=Lato',}]
};
var elements = stripe.elements(options);
var cardElement = elements.create('card', {
classes: {
base: 'form-control',
},
style: {
base: {
iconColor: '#333333',
color: '#333333',
fontFamily: '"Lato", sans-serif',
'::placeholder': {
color: '#d3d1d0',
fontWeight: 300,
},
},
}
});
cardElement.mount('#card-element');
var cardholderName = document.getElementById('cardholder-name');
var cardButton = document.getElementById('card-button');
var payment_method_id = document.getElementById('id_payment_method_id');
var form = document.getElementById('payment-form');
cardButton.addEventListener('click', function(ev) {
ev.preventDefault();
stripe.createPaymentMethod('card', cardElement, {
billing_details: {name: cardholderName.value}
}).then(function(result) {
if (result.error) {
// Show error in payment form
errorElement.textContent = result.error.message;
errorElement.classList.add('visible');
} else {
// Otherwise send paymentMethod.id to your server (see Step 2)
payment_method_id.value = result.paymentMethod.id;
form.submit();
}
});
});
</script>
{% endblock forms %}