{# https://gist.github.com/briancollins/6365455 #}

{% extends layout ?: "@PayumCore/layout.html.twig" %}

{% block payum_body %}
    {{ parent() }}

    <form action="{{ actionUrl|default('') }}" method="POST" id="payment-form">
        <span class="payment-errors"></span>

        <div class="form-row">
            <label>
                <span>Card Number</span>
                <input type="text" size="20" data-stripe="number"/>
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>CVC</span>
                <input type="text" size="4" data-stripe="cvc"/>
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>Expiration (MM/YYYY)</span>
                <input type="text" size="2" data-stripe="exp-month"/>
            </label>
            <span> / </span>
            <input type="text" size="4" data-stripe="exp-year"/>
        </div>

        <button type="submit">Submit Payment</button>
    </form>
{% endblock %}

{% block payum_vendor_javascripts %}
    {{ parent() }}

    <!-- The required Stripe lib -->
    <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

    <!-- jQuery is used only for this example; it isn't required to use Stripe -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{% endblock %}

{% block payum_javascripts %}
    {{ parent() }}

    <script type="text/javascript">
        jQuery(function($) {
            $('#payment-form').submit(function(e) {
                var $form = $(this);

                // Disable the submit button to prevent repeated clicks
                $form.find('button').prop('disabled', true);

                // This identifies your website in the createToken call below
                Stripe.setPublishableKey({{ publishable_key|json_encode|raw }});

                Stripe.card.createToken($form, stripeResponseHandler);

                // Prevent the form from submitting with the default action
                return false;
            });

            var stripeResponseHandler = function(status, response) {
                var $form = $('#payment-form');

                if (response.error) {
                    // Show the errors on the form
                    $form.find('.payment-errors').text(response.error.message);
                    $form.find('button').prop('disabled', false);
                } else {
                    // token contains id, last4, and card type
                    var token = response.id;
                    // Insert the token into the form so it gets submitted to the server
                    $form.append($('<input type="hidden" name="stripeToken" />').val(token));
                    // and re-submit
                    $form.get(0).submit();
                }
            };
        });
    </script>

{% endblock %}