JSFiddle - React, Tailwind, and code Playground

by Yurii Predborskyi

HTML

<form id='payment-form'>
  <div>
    Enter text<br>
    <input type=text>
  </div>
  <input type="submit" value="Send Request">
</form>

JavaScript

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);
	console.log('submitting now');
  // Submit the form
  form.submit();
}

function createToken() {
	stripeTokenHandler({id: 'cool token'});
/*   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();
  console.log('prevented sumbit');
  createToken();
});