python - Django フォームで不足している変数を解決する

Question

saleor 1.0 を使用している e コマースを再構築しています。私が達成しようとしているのは、アイテムの支払いを行う手順の冗長性を減らすことです. saleor 1.0 のチェックアウト/支払いのアーキテクチャでは、顧客が支払いページから別のページに移動して、ラジオボタンを使用して支払いの種類 (ストライプ、ブレインツリー、カミソリなど) を選択し、その選択を送信して注文を処理する必要があります。確認ページに移動します。

目的：

私がやろうとしているのは、顧客をページに送って支払いタイプを選択するステップを削除することですが、支払いページにそのオプションを含めることで、エクスペリエンスがよりシームレスになると感じています.

問題：

支払いページにストライプを含めると、ページに表示されるエラーメッセージが表示されます。

<< MISSING VARIABLE "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 %}

python - Django フォームで不足している変数を解決する

0 に答える 0

Related

Reference