<div class="form-container">
    <form action="/api/payment/stripe" method="post" id="payment-form">
        <input type="hidden" name="handle" value="wallet">
        <input type="hidden" name="nodeId" value="{$user.id}"> 
        <input type="hidden" name="amount" value="{$amount}">
        <input type="hidden" name="currency" value="{$currency}">
        <input type="hidden" name="idempotency_key" value="{$idempotency_key}">
        <div class="form-header">
            <h1 class="Header-companyName">{$siteName}</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 id="stripeJSPayButton" class="pay_btn" type="submit">Pay {$price_formatted}</button>
            <a class="back_to_order" href="/dashboard/wallet">Back to Wallet</a>
        </form>
    </form> 
</div> 

<script src='https://js.stripe.com/v3/' type='text/javascript'></script>

<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;
                document.getElementById('stripeJSPayButton').disabled = false;
            } 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;
                    document.getElementById('stripeJSPayButton').disabled = false;
                } 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();
            document.getElementById('stripeJSPayButton').disabled = true;
            createToken();
        });
    });
</script>