Как отправить пользовательский токен в бэкэнд колбы

Question

Я пытаюсь интегрировать пользовательскую проверку Stripe https://stripe.com/docs/checkout#integration-custom с Flask и WTForms. В настоящее время моя проблема заключается в том, что форма оплаты, по-видимому, не публикуется, поэтому невозможно оплатить кредитный сбор.

Кажется, что форма распознана, потому что токен отправляется в API полосы с ответом 200:

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>

Я попытался выполнить метод post в теге html, но безуспешно. Я также попытался добавить переменную формы в токене javascript для публикации в моем маршруте оплаты, адаптированную из этого вопроса: Stripe Checkout Link onClick не обрабатывает платеж

Вот мой индекс и тарифы для справки:

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

Я довольно новичок в этом и пытаюсь узнать как можно больше, поэтому любые советы / комментарии / отзывы по любому из моих кодов будут с благодарностью.

Answer 1

Я решил сменить токен на 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();
})

Чтобы распознать jquery, я также добавил скрипт для пакета jquery в начале файла html:

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)

Если есть какие-либо советы / рекомендации для моего кода, это будет высоко ценится!