HEX

File: /home/assibfaf/public_html/prox-templates/checkout/stripe.add-payment.tpl
<!doctype html>
<html lang="en">
    <head>
        {block name='head'}
            {include file='_partials/head.tpl'}
        {/block}
        <link rel="canonical" href="/dashboard/authorization/">
    </head>
<body>

    <div class="form-container">
        <form action="/api/payment/stripe?handle=add-payment&add_payment_id={$addPayment.id}" method="post" id="payment-form">
            <input type="hidden" name="idempotency_key" id="idempotency_key" value="{$idempotency_key}">
            <div class="form-header">
                <h1 class="Header-companyName">{$site_title}</h1>
                <h2 class="Header-purchaseDescription">{$title}</h2>
            </div>
            <div class="form-body">
                <div class="form-row">
                    <label class="form-label" for="card-element">Credit or debit card</label>
                    <div id="card-element"></div>                  
                </div>        
                <!-- Used to display form errors -->
                <div id="card-errors" role="alert"></div>
                <button class="pay_btn" type="submit">Pay {$price_formatted}</button>
                <a class="back_to_order" href="/dashboard/add-payment/{$addPayment.id}">Back to Order</a>
            </form>
        </form> 
    </div>

    <script>window.jQuery || document.write('<script src="/static/common/libs/jquery/3.2.1/jquery.min.js"><\/script>')</script>
    <script src='https://js.stripe.com/v3/' type='text/javascript'></script>
    {block name='javascript_bottom'}
        {include file="_partials/javascript.tpl" javascript=$javascript.bottom}
    {/block}

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(event) {
            var stripe = Stripe('{$stripe_key}'); 
            var elements = stripe.elements();

            var card = elements.create('card');
            // Add an instance of the card UI component into the `card-element` <div>
            card.mount('#card-element');

            // Handle events and errors
            card.addEventListener('change', function(event) {
                var displayError = document.getElementById('card-errors');
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });

            function stripeTokenHandler(token) {
                // Insert the token ID into the form so it gets submitted to the server
                var form = document.getElementById('payment-form');
                var hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeToken');
                hiddenInput.setAttribute('value', token.id);
                form.appendChild(hiddenInput);

                // Submit the form
                form.submit();
            }

            function createToken() {
                stripe.createToken(card).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;
                    } else {
                        // Send the token to your server
                        stripeTokenHandler(result.token);
                    }
                });
            };

            // Create a token when the form is submitted.
            var form = document.getElementById('payment-form');
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                createToken();
            });
        });
    </script>
</body>
</html>