@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}


@section Scripts {
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        var stripe = Stripe('Your Secret key');
        var elements = stripe.elements();
        var style = {
            base: {
                fontSize: '16px',
                color: '#32325d',
            },
        };
        var card = elements.create('card', { style: style });
        card.mount('#card-element');
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            stripe.createToken(card).then(function (result) {
                if (result.error) {
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    stripeTokenHandler(result.token);
                }
            });
        });
        function stripeTokenHandler(token) {
            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);
            form.submit();
        }
    </script>
}

<form action="/cart/Create" method="post" id="payment-form">
    <div class="col-sm-6">
        <div class="panel panel-success">
            <div class="panel-heading">
                Credit Card Information
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-8">
                            <input type="number" class="form-control" name="Amount" placeholder="Amount" required />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="Currency" value="INR" readonly />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="Description" placeholder="Description" required />
                        </div>
                    </div>
                    <div id="card-element">
                    </div>
                    <div id="card-errors" role="alert"></div>
                </div>
                <br />
                <input type="submit" value="Submit Payment" />
            </div>
        </div>
    </div>
</form>