Как я могу изменить Stripe Checkout вместо отправки запроса AJAX?

Я использую Stripe и Checkout для создания формы платежа, и я хочу, чтобы иметь возможность использовать Checkout awesome javascript library, но я также хочу изменить отправку формы с обычного POST на AJAX POST.

Итак, я попробовал добавить обработчик к элементу формы, который у вас должен был быть, но моя консольная строка никогда не запускалась, поэтому она не отправляется с использованием данной формы.

Затем я попытался изучить код, который появился при срабатывании оверлея. Это немного сбивает с толку, и мне просто интересно, мог ли кто-нибудь еще понять это, или если это стало сложно, потому что это вопрос безопасности?

// Stripe plugin
<form id="payment_form" method='post' action="{{url_for('process_payment')}}">
        <script
            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="test key">
        </script>
</form>

// Form submit handler
$(document).ready(function(){
    $("#payment_form").submit(function(e) {
        console.log("Processing...");
        ajax_payment();
        return false;
    });

});

ОТВЕТЫ

Ответ 1

Вы можете сделать это так. В этом примере используется PHP, но поменяйте свой предпочтительный серверный язык:

1) Создайте файл nocontent.php, который содержит эту строку: header("HTTP/1.0 204 No Content");, который неожиданно возвращает заголовок 'HTTP/1.0 204 No Content'. При запросе этой страницы браузер не будет ничего делать. Вы можете факультативно, чтобы эта страница обрабатывала данные POST, или вы можете просто создать эту фиктивную страницу с этой единственной строкой.

2) В вашем HTML поместите путь nocontent.php в атрибут <form tag action: <form action="nocontent.php".

3) Прикрепите функцию javascript к событию window.onbeforeunload. Это событие запускается, когда браузер запрашивает новую страницу, и поэтому уволен, хотя браузер, похоже, ничего не делает. Эта функция вызывается после того, как Stripe генерирует свой токен.

4) Ваша форма теперь содержит элементы <input type="hidden" name="stripeToken" value="..."/> и <input type="hidden" name="stripeEmail" value="..."/>.

5) Теперь у вас есть опции, в зависимости от того, когда вы обрабатывали данные формы POST.

  • a) Если ваша страница nocontent.php просто возвращает заголовок "без содержимого", вы можете теперь AJAX повторно отправить данные формы на другую страницу (как обычно), которая будет фактически обрабатывать данные POST и возвращать Stripe информацию о состоянии. Этот маршрут я взял.

  • b) Если ваша страница nocontent.php сама обрабатывает данные формы POST, вы можете сохранить ответ Stripe на сервере и использовать свой токен в качестве ключа в запросе ajax для получения статуса платежа всякий раз, когда он прибывает из Stripe,

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

Ответ 2

Полоса запускает форму submit(). Вы можете установить обработчик событий (а не прослушиватель!), Чтобы предотвратить отправку обычного запроса POST.

Пример использования простого javascript:

var form = document.getElementById('myStripeForm');
form.submit = function() {
    // ... get form data here and send it through ajax

    // Prevent form submit.
    return false;
}

Пример использования jQuery:

$('#myStripeForm').get(0).submit = function() {
    var data = $(this).serializeArray();
    // process data and send ajax request

    $.ajax(...);

    // Prevent form submit.
    return false;
}

Ответ 3

Существует два варианта интеграции Checkout, первый, который вы используете, - это "простая" интеграция. Вторая - это обычная интеграция, которая имеет успешный обратный вызов (функция "токен" ). Это выглядит так:

<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: '/square-image.png',
    token: function(token, args) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with `token.id`
    }
  });

  document.getElementById('customButton').addEventListener('click', function(e) {
    // Open Checkout with further options
    handler.open({
      name: 'Demo Site',
      description: '2 widgets ($20.00)',
      amount: 2000
    });
    e.preventDefault();
  });
</script>

Вы добавили бы функцию ajax_payment в функцию token.