How to implement Stripe.js v3 in php

 Stripe.js makes it easy to collect certain kinds of sensitive information without having it touch your server. If you need help after reading this, search our documentation or check out answers to common questions. You can even chat live with other developers in stripe on freenode.

Stripe.js is our foundational JavaScript library for securely sending sensitive information to Stripe directly from the customer’s browser

  

However you’re using Stripe.js, you always begin by including the library and setting your API key. To get started, include this script on your pages—it should always be loaded directly from https://js.stripe.com:

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

Stripe.js Implementation

1.  First we need to create a form to user's enter card details.
   <pre>

   <form action="/payment/pay" method="POST" id="payment-form">
         <input type="hidden" name="order_shipping_address" class="order_shipping_address" value="">
         <label>
            <span>Name</span>
            <input name="cardholder-name" class="field" placeholder="Jane Doe" />
         </label>
         <div id="card-element"></div>
         <div class="outcome">
              <div class="error" role="alert"></div>
          </div>
          <button type="submit" class="submit-button btn btn-success">Pay</button>
   </form>

   </pre>
2. "card-element" will handle the all operations of stripe.js by its javascript library.
   
   

    var stripe = Stripe('PUBLIC_KEY');

   // card setup
   var elements = stripe.elements();
   var card = elements.create('card', {
       hidePostalCode: true
   });
   
   // Add an instance of the card UI component into the `card-element` <div>
   card.mount('#card-element');
   
   function setOutcome(result) {
       var form$ = $("#payment-form");
       var errorElement = document.querySelector('.error');
       errorElement.classList.remove('visible');
       if (result.token) {
           form$.append("<input type='hidden' name='stripeToken' value='" + result.token.id + "' />");
           form$.get(0).submit();
       } else if (result.error) {
           errorElement.textContent = result.error.message;
           errorElement.classList.add('visible');
       }
   }
   
   card.on('change', function(event) {
       setOutcome(event);
   });
   
   document.querySelector('#payment-form').addEventListener('submit', function(e) {
       e.preventDefault();
       var form = document.querySelector('#payment-form');
       var extraDetails = {
           name: form.querySelector('input[name=cardholder-name]').value
       };
       stripe.createToken(card, extraDetails).then(setOutcome);
   });