Stripejs on express part I

Posted on |

Integrating Stripe to your app can be separated into two parts, frontend validation and submitting orders through backend server

I”ll be going over frontend validation in this post. This process is to validate to see if your credit card is valid. This is a complex alogoritm luckily stripe has provided this for us.

  1. First We need to create Stripe Client and create instance of elements

    1
    2
    var stripe = Stripe('pk_test_KOdpJMtqiqwsnwz6D0XXXXX'); // You test api keys
    var elements = stripe.elements();

  2. Your payment form must have an id of ‘payment-form’

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <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 Element errors -->
        <div id="card-errors" role="alert"></div>
      </div>
      <button>Submit Payment</button>
    </form>

  3. Custom styling can be passed to options when creating an Element.

  4. Create an instance of the card Element

  5. Add an instance of the card Element into the card-element div

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // Custom styling can be passed to options when creating an Element.
    var style = {
      base: {
        // Add your base input styles here. For example:
        fontSize: '16px',
        lineHeight: '24px'
      }
    };
    // 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');

  6. Handle real-time validation errors from the card Element

    1
    2
    3
    4
    5
    6
    7
    8
    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

  7. Handle form submission - When form is submitted, stripe will create token.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 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);
        }
      });
    });

  8. Create token - this will create an hidden input field with the stripe token, which will be used in the server backend

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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();
    }