Stripe JS Payment tutorial

Stripe JS is a framework used to collect payments using credit card in an easy way. It supports all major currencies and can be included into your project with a single link.

Here is the step by step tutorial for introducing a simple stripe payment.

Step 1

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

Step 2

So after including the js file you need to decide whether to use the custom payment form or the form which is generated by stripe.

Let me show you how to build the stripe generated form first which is the easiest one.

Step 3

Include the following code with your stripe publishable key and the button is automatically included.

<form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_your_key"
    data-image="/square-image.png"
    data-name="Demo Site"
    data-description="2 widgets ($20.00)"
    data-amount="2000">
  </script>
</form>

In the above code:

• data-key: Pass on your data key which is generated by stripe
• data-image: Your company logo
• data-description: What product are you selling
• data-amount: Price for your product

The default currency is USD at present.

Step 4

This is the process followed when you opt for a custom payment form.

First step is to include the JS file into the code using the following code:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

Prepare your form as per your requirements like which parameters need to be taken into consideration. Take the following example which is taken from stripe.

<form action="" method="POST" id="payment-form">
  <span class="payment-errors"></span>

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" size="4" data-stripe="cvc"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YYYY)</span>
      <input type="text" size="2" data-stripe="exp-month"/>
    </label>
    <span> / </span>
    <input type="text" size="4" data-stripe="exp-year"/>
  </div>

  <button type="submit">Submit Payment</button>
</form>

Step 5

This is the custom form which takes some parameters like  data-stripe which needs to be same as provided in the stripe api here

The importance of form is that it calls the required functionality to create token and gets the response in JSON format.

It creates only a single token so that it charges the credit card only once.

Source