как мне интегрировать входные данные (вместо кнопки) в stripe / checkout.js ?

#javascript #forms #stripe-payments

#javascript #формы #stripe-платежи

Вопрос:

я нахожусь в середине устаревшего кода над простой формой оформления заказа, которая отлично работает с оформлением заказа, которое я пытаюсь интегрировать с Stripe; вот устаревший код, который работает:

 <form method="post" name="submit_order" action="40_SubmitOrder.asp" class="text-center">

<script>
$(document).ready(function() {
 $('input#SubmitOrder').click(function() {
  $(this).val('please wait...');
  });
});
</script>

<input class="btn btn-default default-btn" type="submit" name="SubmitOrder" id="SubmitOrder" value="buy stuff">
  

.. Я попытался использовать вариацию этого с Stripe checkout.js делаю это как кнопку, и это не работает:

   <form method="post" name="submit_order" action="40_SubmitOrder.asp" class="text-center">

    <script>
    $(document).ready(function() {
     $('input#SubmitOrder').click(function() {
      $(this).val('please wait...');
      });
    });
    </script>

    <button class="btn btn-default default-btn" type="submit" name="SubmitOrder" id="SubmitOrder">buy stuff</button>            
  

.. всплывающее окно Stripe отображается нормально, но форма не отправляется. Я пробовал варианты form.submit(), но безуспешно. И я также пытаюсь сделать это без использования jquery (по устаревшим причинам).

Вот Stripe JS, который я сейчас использую, ниже этой формы:

 <script src="https://checkout.stripe.com/checkout.js"></script>

<script>
var handler = StripeCheckout.configure({
  key: 'pk_test_mytestkey',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
    // nothing here yet
  }
});

document.getElementById('SubmitOrder').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'legacy checkout site',
    description: '2 widgets',
    amount: 2000
  });
   e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>
  

Есть ли способ сделать это без необходимости углубляться в Stripe API? Спасибо!

Комментарии:

1. $('input#SubmitOrder').click() вызывает функцию, которую вы определили в document.getElementById('SubmitOrder').addEventListener('click') , и эта функция предотвращает действие формы по умолчанию (submit) из-за e.preventDefault(); . Одним из вариантов было бы разместить вторую, невидимую кнопку на странице, которую вы программно нажимаете для отправки формы.

2. не могли бы вы предложить пример?