davidpatters0n · May 3, 2019 20:10
diff --git a/stripe-example.html b/stripe-example.html
 <!DOCTYPE html>
 <html>
 <head>
  <title></title>
 </head>
 <body>
  <form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
 </form>
 </body>
 <script src="https://js.stripe.com/v3/"></script>
 <style type="text/css">
  .StripeElement {
    box-sizing: border-box;

    height: 40px;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;

    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
  }

  .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
  }

  .StripeElement--invalid {
    border-color: #fa755a;
  }

  .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
  }
 </style>

 <script type="text/javascript">
  // Create a Stripe client.
  var stripe = Stripe('pk_test_Lti5jZ0e9CM7WE8eknGoTSrf');

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

  setTimeout(function() {
    // 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 form = document.getElementById('payment-form');
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      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);
        }
      }, function(error) {
        console.log(error.message);
      });
    });

    // Submit the form with the token ID.
    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();
    }
  }, 10000)
 </script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<form action="/charge" method="post" id="payment-form">
	<div class="form-row">
	<label for="card-element">
	Credit or debit card
	</label>
	<div id="card-element">
	<!-- A Stripe Element will be inserted here. -->
	</div>

	<!-- Used to display form errors. -->
	<div id="card-errors" role="alert"></div>
	</div>

	<button>Submit Payment</button>
	</form>
	</body>
	<script src="https://js.stripe.com/v3/"></script>
	<style type="text/css">
	.StripeElement {
	box-sizing: border-box;

	height: 40px;

	padding: 10px 12px;

	border: 1px solid transparent;
	border-radius: 4px;
	background-color: white;

	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
	}

	.StripeElement--focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
	}

	.StripeElement--invalid {
	border-color: #fa755a;
	}

	.StripeElement--webkit-autofill {
	background-color: #fefde5 !important;
	}
	</style>

	<script type="text/javascript">
	// Create a Stripe client.
	var stripe = Stripe('pk_test_Lti5jZ0e9CM7WE8eknGoTSrf');

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

	setTimeout(function() {
	// 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 form = document.getElementById('payment-form');
	form.addEventListener('submit', function(event) {
	event.preventDefault();
	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);
	}
	}, function(error) {
	console.log(error.message);
	});
	});

	// Submit the form with the token ID.
	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();
	}
	}, 10000)
	</script>
	</html>