[Stripe]カスタマイズしたい

カード情報等を入力した後、ごにょごにょしてから決済処理を始めたい。

StripeCheckout.configureのtokenプロパティでコールバックが出来ます。
今回の例では、ロード画面を表示させてからカード処理を走らせます。

<div class="loading" style="display: none;">
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
    <span class="sr-only">Loading...</span>
</div>
<button type="submit" id="checkout" >お支払い手続きへ</button>
<span class="err"></span>


<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
    key: 'pk_test_xxxxxxxxxxxxxxxx',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function(token) {
        // You can access the token ID with `token.id`.
        // Get the token ID to your server-side code for use.

        $('.loading').css('display', 'block').next().css('display', 'none');
        $.ajax({
            url: '/example/',
            type: 'POST',
            dataType: 'json',
            data: {
                stripeToken: token.id,
                stripeEmail: token.email
            },
        })
        .done(function(data) {
            switch(data.mode) {
                case 'err':
                    $('.err').html(data.txt);
                    break;
                case 'redirect':
                    location.href = data.url;
                    break;
            }
        })
        .fail(function(data) {
            $('.err').html('決済に失敗しました');
        });
    }
});

document.getElementById('checkout').addEventListener('click', function(e) {
    // Open Checkout with further options:
    handler.open({
        name: '決済名',
        description: 'Stripeテスト',
        currency: 'jpy',
        amount: 5000
    });
    e.preventDefault();
});

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