Как показать спиннер в Stripe после нажатия кнопки? - PullRequest
Новая
       2

Как показать спиннер в Stripe после нажатия кнопки?

1 голос
/ 11 марта 2019

У меня есть веб-страница с элементами Stripe. Все работает. Но я хочу показать счетчик после нажатия кнопки «Оплатить», но только если все поля кредитной карты заполнены и проверены. Проблема в том, что клиентский API / структура Stripe не позволяет мне исследовать эти поля с помощью javascript. Я могу легко нажать на кнопку, выполнив это: 

$("#btnPay").click(function() {
    // show spinner
});

Но я не хочу показывать счетчик, пока все поля кредитных карт не будут заполнены и заполнены. В противном случае счетчик будет всплывать, когда поля еще не заполнены и т. Д.

Есть ли способ в Stripe Elements API для инъекции моего js, который запускает счетчик ПОСЛЕ того, как форма была проверена Stripe, но ДО того, как он сделает вызов ajax для получения токена?

Вот некоторые части моей страницы:

Некоторые JS: 

<script>
function setOutcome(result) {
    var successElement = document.querySelector('.success');
    var errorElement = document.querySelector('.error');
    successElement.classList.remove('visible');
    errorElement.classList.remove('visible');

    if (result.token) {
        // my ajax here
    } else if (result.error) {
        errorElement.textContent = result.error.message;
        errorElement.classList.add('visible');
    }
}
</script>

HTML-форма: 

<form action="//httpbin.org/post" method="POST">
   <input type="hidden" name="token" />
   <div class="group">
      <label>
         <span>Credit Card</span>
         <div id="card-element" class="field"></div>
      </label>
   </div>
   <div class="group">
      <label>
      <span>Name on Card</span>
      <input id="name" name="name" class="field" placeholder="Your name here" />
      </label>
   </div>
   <button type="submit" id="btnPay" style="cursor: pointer; width: 200px; margin-left: 155px;">Pay $115.00</button>
</form>

Еще несколько js: 

<script>
    var stripe = Stripe('pk_test_3Z8D***********C');
    var elements = stripe.elements();

var card = elements.create('card', {
    hidePostalCode: true,
    style: {
        base: {
            iconColor: '#666EE8',
            color: '#31325F',
            lineHeight: '40px',
            fontWeight: 300,
            fontFamily: 'Helvetica Neue',
            fontSize: '15px',

            '::placeholder': {
                color: '#CFD7E0',
            },
        },
    }
});
card.mount('#card-element');

card.on('change', function (event) {
    setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();

    var options = {
        name: document.getElementById('name').value,
    };

    stripe.createToken(card, options).then(setOutcome);
}); 
</script>

Есть идеи?

1 Ответ

1 голос
/ 11 марта 2019

Вы можете просто спрятать свой счетчик, если result.token не является неопределенным. Присутствующий токен означает, что форма была отправлена.

Примерно так: 

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();

    var options = {
        name: document.getElementById('name').value,
    };

    // show the spinner on submit
    showSpinner();

    stripe.createToken(card, options).then(setOutcome);

});

function setOutcome(result, wasSubmitted) {
    var successElement = document.querySelector('.success');
    var errorElement = document.querySelector('.error');
    successElement.classList.remove('visible');
    errorElement.classList.remove('visible');

    if (result.token) {
        // hide the spinner if this was called after a form submit
        hideSpinner();

        // my ajax here
    } else if (result.error) {
        // also hide the spinner on error
        hideSpinner();

        errorElement.textContent = result.error.message;
        errorElement.classList.add('visible');
    }
}
...