<script>
                    var payStripe = document.getElementById("payStripe");
                    payStripe.addEventListener("click", function(){
                      document.getElementById("formpago").style.display = "block";
                      document.getElementById("payStripe").style.display = "none";
                    });
                    //set your publishable key
                    // Create a Stripe client.

                    //test key
                    var stripe = Stripe('pk_test_JTYT0ZkE5P3AcAYf1IRRvPja');
                    //live key
                    //var stripe = Stripe('pk_live_MfXdrth1P6Tn0imRmevTMyBJ');

                    // 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: '18px',
                        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                        fontSmoothing: 'antialiased',
                        fontSize: '16px',
                        '::placeholder': {
                          color: '#aab7c4'
                        }
                      },
                      invalid: {
                        color: '#fa755a',
                        iconColor: '#fa755a'
                      }
                    };

                    // Create an instance of the card Element.
                    var card = elements.create('card', {style: style});
                    // Add an instance of the card Element into the `card-element` <div>.
                    card.mount('#card-element');

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

                      // Handle form submission.
                      var formstripe = document.getElementById('payment-form');
                      formstripe.addEventListener('submit', function(event) {
                        event.preventDefault();
                        var card_name = document.getElementById('card_name').value;

                        // stripe.createToken(card, {name: card_name}).then(function(result) {
                        stripe.createPaymentMethod(
                          'card',
                          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 {
                            document.getElementById("loading").style.display = "block";
                            // Send the token to your server.
                            // stripeTokenHandler(result.token);
                            stripeTokenHandler(result.paymentMethod);
                          }
                        });
                      });

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

                        // Submit the form
                        formstripe.submit();
                      }
                      </script>