Stripe checkout example

stripe.html

{% block content %}
<div class="row">
    <div class="col-xs-12">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">Credit Card</h3>
            </div>
        <form action="" method="post" id="payment-form">
            <div class="box-body">
                {% csrf_token %}
                <div class="credit-card-form-wrapper col-xs-12 col-md-6">
                    <div class="credit-card-form-field col-xs-12">
                        <label for="card-number">CARD NUMBER</label>
                        <div class="field-input">
                            <div id="card-number">
                                <!-- a Stripe Element will be inserted here. -->
                            </div>
                            <div class="error-message">
                                <div id="card-number-errors" role="alert"></div>
                            </div>
                        </div>

                    </div>
                    <div class="credit-card-form-field col-xs-12">
                        <label for="card-name">CARD HOLDERS NAME</label>
                        <div class="field-input">
                            <div class="">
                                <input id="card-name" type="text" class="card-name form-control StripeElement" placeholder="Card holder name">
                            </div>
                            <div class="error-message">
                                <div id="card-name-errors" role="alert"></div>
                            </div>
                        </div>
                    </div>
                        <div class="credit-card-form-field credit-card-form-field--expiry col-xs-6">
                            <label for="card-expiry">
                                EXPIRY DATE
                            </label>
                            <div class="field-input">
                                <div id="card-expiry">
                                    <!-- a Stripe Element will be inserted here. -->
                                </div>
                                <div class="error-message">
                                    <div id="card-expiry-errors" role="alert"></div>
                                </div>
                            </div>

                        </div>
                        <div class="credit-card-form-field credit-card-form-field--cvc col-xs-6">

                            <label for="card-cvc">
                                CW/CVC
                            </label>
                            <div class="field-input">
                                <div id="card-cvc">
                                    <!-- a Stripe Element will be inserted here. -->
                                </div>
                                <div class="error-message">
                                    <div id="card-cvc-errors" role="alert"></div>
                                </div>
                            </div>
                        </div>

                    {% if error %}
                        <div class="alert alert--error">{{ error|safe }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="box-footer">
                <div class="col-xs-12 col-md-6">
                    <div class="col-xs-12">
                    <input class="btn btn-lg btn-success col-xs-12 " id="submit-button" type="submit" value="Submit"/>
                    </div>
                </div>
            </div>
        </form>
        </div>
    </div>
  </div>
{% endblock %}

{% block footer_page_script %}
{#    refer https://stripe.com/docs/stripe-js #}
{#    https://github.com/stripe/elements-examples/#}
    <script src="https://js.stripe.com/v3/"></script>

    <style>
        .credit-card-form-wrapper{
            display: block;
        }

        .credit-card-form-wrapper label{
            margin:20px 0 10px 0;
        }

        #submit-button{
            margin-bottom: 20px;
        }

        .StripeElement {
            background-color: white;
            padding: 8px 12px;
            border-radius: 5px;
            border: 2px solid #e9eaea;
        }

        #card-name {
            color: #32325d;
            padding: 8px 12px;
            line-height: 24px;
            font-family: "Helvetica Neue", Helvetica, sans-serif;
            font-size: 16px;
            height: 44px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        #card-name::-webkit-input-placeholder {
            color: #aab7c4 !important;
        }

        #card-name:-moz-placeholder { /* Firefox 18- */
            color: #aab7c4 !important;
        }

        #card-name::-moz-placeholder { /* Firefox 19+ */
            color: #aab7c4 !important;
        }

        #card-name:-ms-input-placeholder {
            color: #aab7c4 !important;
        }

        .StripeElement--focus, #card-name:focus{
            border-color: #0172de;
        }

        .StripeElement--invalid {
            border-color: #ed1c24;
            background-color: #ffd8dd;
        }

        .StripeElement--webkit-autofill {
            background-color: #fefde5 !important;
        }
    </style>


    <script>
        // Create a Stripe client
        var stripe = Stripe('{{ STRIPE_PUBLIC_KEY }}');

        // Create an instance of Elements
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
            base: {
                color: '#32325d',
                lineHeight: '24px',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a',
                ':focus': {
                    color: '#303238'
                }
            }
        };

        // Create an instance of the card Element
        var cardNumber = elements.create('cardNumber', {style: style});
        var cardExpiry = elements.create('cardExpiry', {style: style});
        var cardCvc = elements.create('cardCvc', {style: style});

        // Add an instance of the card Element into the `card-element` <div>
        cardNumber.mount('#card-number');
        cardExpiry.mount('#card-expiry');
        cardCvc.mount('#card-cvc');

        // Handle real-time validation errors from the card number.
        cardNumber.addEventListener('change', function (event) {
            var displayError = document.getElementById('card-number-errors');
            if (event.error) {
                console.log(event.error);
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        // Handle real-time validation errors from the card expire date .
        cardExpiry.addEventListener('change', function (event) {
            var displayError = document.getElementById('card-expiry-errors');
            if (event.error) {
                console.log(event.error);
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        // Handle real-time validation errors from the card cvc.
        cardCvc.addEventListener('change', function (event) {
            var displayError = document.getElementById('card-cvc-errors');
            if (event.error) {
                console.log(event.error);
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        // Handle form submission
        var form = document.getElementById('payment-form');

        form.addEventListener('submit', function (event) {
            event.preventDefault();
            var options = {
                name: document.getElementById('card-name').value
            };

            stripe.createToken(cardExpiry, options).then(function (result) {
                if (result.error) {
                    // Inform the user if there was an error
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                    return false;
                } else {
                    // Send the token to your server
                    console.log(result.token.id);
                    var input = $("<input>")
                        .attr("type", "hidden")
                        .attr("name", "cardToken").val(result.token.id);
                    $('#payment-form').append($(input)).submit();
                }
            });
        });
    </script>
{% endblock %}