Using Card Element for collecting payment Information

When it comes to things like payment, things get on our nerve since it's a matter of payment.A single miss out on a code and the transaction could go wrong.

Being using Stripe for a months now, i feel confident that Stripe has the most secure and a world class support system which will helps us in no time in emergency.

Today, we will learn how to securely collect card information from users and send it to stripe server to charge a certain amount(next tutorial).

Step 1: Setting up stripe elements

Stripe has a built JavaScript library(Stripe.js). Element is a part of Stripe.js. Stripe suggest to include this library in all of the pages so it can detect every fraud activity happening in our page.

<script src="https://js.stripe.com/v3/"></script>

After initializing this , we must create a instance of this library,

var stripe = Stripe('your_stripe_token');
var elements = stripe.elements();

Step 2: Create a form

Next, we create a form where user insert their payment information

<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>

After the form is loaded , we insert the element to the form. In the above form, The div with id card-element is mounted with the elements.

// 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');

After Elements is mounted, we can check if the user information is incorrect and display it using change event in card Element. We have to check for the card events change and display error if any things is added in event.error.

card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

Step 3 :Creating a token

After the form is correct and submitted , now we used the payment information attached to Element for generating token. Token can be generated using createToken method

Token is Stripe is an code generate by stripe which is send to the server for charging the specific user.

// Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  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.
      stripeTokenHandler(result.token);
    }
  });
});

// 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 errorElement = document.getElementById('card-errors');
  errorElement.textContent =token.id;
}

Note: We don't need to send all the payment information (card no, cvc, expiry date) from browser to server. Instead stripe creates a token which is the replacement for all the payment information.

DEMO:

After the token is created, Now we can charge the user. Click here to see how we can charge the customer using Token generated from Stripe