Stripe v3 Credit Card

This is a fiddle for the front end app calling to get a Bank Account Token

by douglasloyo

HTML

<script src="https://js.stripe.com/v3/"></script>
<form id="payment-form">
<div class="form-row">
    <label for="person-name">Name</label>
    <input id="person-name" type="text" />
</div>
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element" style="width:100%;">
      <!-- A Stripe Element will be inserted here. -->
    </div>

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

  <button id="buttonToSave" type="button" onclick="myFunction()">Save</button>
</form>

CSS

body {
  background: #fff;
  color: #20262E;
  padding: 20px;
  font-family: Helvetica;
  
}

JavaScript

var stripe = Stripe('pk_test_mAHN2Miju9OZHui1XWQDuNef00hI5T6hZu');
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
var style = {
      base: {
        color: '#20262E',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#20262E'
        }
      },
      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');


$("#buttonToSave").click(function() {
    stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the customer that there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server.
      alert(result.token.id);
    }
  });
});