Как перезагрузить / обновить кнопку Stripe Checkout? - PullRequest
Новая
       9

Как перезагрузить / обновить кнопку Stripe Checkout?

0 голосов
/ 29 сентября 2018

Я отправляю свою форму Stripe Checkout через AJAX (перехватывает событие отправки формы), потому что у меня сложная многопанельная HTML-форма, и я хочу отображать ошибки оплаты из Stripe без перезагрузки страницы и повторного создания формы или создания.пользователь повторно вводит загрузку информации.

Это все работает нормально, за исключением того, что когда кнопка Stripe Checkout используется, когда она отключена.После того, как я отобразил сообщение об ошибке на странице формы бронирования, мне нужно, чтобы пользователь мог снова нажать кнопку «Полоса» и попробовать другую информацию об оплате.Как мне активировать кнопку Stripe?Нужно ли удалять весь сценарий кнопки Stripe из DOM (я использую jQuery) и заново вставлять его (или аналогичный код) заново?

Мой стандартный код кнопки Checkout: 

<script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="my_stripe_key"
    data-image="mylogo.png"
    data-name="My Booking Form"
    data-zip-code="true"
    data-locale="auto"
    data-email=""
    data-description="Payment for this booking"
    data-currency="gbp"
    data-amount=""
    data-label="Pay and book!">
</script>

и, если необходимо, моя форма AJAX, отправьте код: 

$('#booking-form').get(0).submit = function() {
  var formdata = $(this).serialize();

  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
    },
    type: 'POST',
    url: 'book',
    dataType: 'json',
    data: formdata,
    success: function(data) {
      if (data.response == 'ok') // Payment went through OK
      {
        // Redirect to booking confirmation page:
        window.location.replace(data.url);
      } else // Payment failed, alert user to try again
      {
        $('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
      }
    },
    error: function(data) // Server error
    {
      console.log('Error:', data.responseText);
    }
  });

  // Prevent form submit.
  return false;
}

Ответы [ 2 ]

0 голосов
/ 30 сентября 2018

Если вы намереваетесь отправить свою форму через AJAX или просто хотите получить больше контроля над оформлением заказа, я бы рекомендовал использовать интеграцию Custom Checkout здесь.

Simple Checkout был разработан на основе очень простого варианта использования: заполните форму, заполните простую форму отправки.Вы можете делать такие вещи, как попытка получить кнопку отправки и удалить отключенный атрибут, хотя Stripe всегда может изменить ситуацию, он может работать не так, как вы предполагаете.

Пользовательская интеграция обеспечивает идеальное место для отправки ajax.или дополнительный код js, в обратном вызове token, 

token: function(token) {
   // your form submission or next steps here
}
0 голосов
/ 29 сентября 2018

У вас есть атрибут disabled="true", который устанавливается на элемент кнопки отправки после отправки формы.Вам просто нужно удалить этот атрибут: $('button[type="submit"]').get(0).removeAttr("disabled");.

Пример, который работает:

http://jsfiddle.net/5xq8Lhda

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="booking" action="your-server-side-code" method="POST">
  <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_TYooMQauvdEDq54NiTphI7jx" data-amount="999" data-name="Stripe.com" data-description="Widget" data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto" data-zip-code="true">
  </script>
</form>

<script>
  $('#booking').get(0).submit = function() {
    $('button[type="submit"]').get(0).removeAttr("disabled");
    return false;
  }
</script>

Чтобы использовать ваш пример, вы должны сделать что-то вродечто: 

$('#booking-form').get(0).submit = function() {
  var formdata = $(this).serialize();

  $.ajax({
    headers: {
      'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
    },
    type: 'POST',
    url: 'book',
    dataType: 'json',
    data: formdata,
    success: function(data) {
      if (data.response == 'ok') // Payment went through OK
      {
        // Redirect to booking confirmation page:
        window.location.replace(data.url);
      } else // Payment failed, alert user to try again
      {
        $('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
        $('button[type="submit"]').get(0).removeAttr("disabled");
      }
    },
    error: function(data) // Server error
    {
      console.log('Error:', data.responseText);
    }
  });

  // Prevent form submit.
  return false;
}
...