背景

Stripe 是美國第三方最大的支付服務. 他的優點是你不要離開你的網站進行payment. 那這個教學我會分成兩段.
前端認證跟後端傳資料跟確認.

我會用我的express-shopping-cart連結 專案來做講解. 那就開始吧.

前端認證

前端認證主要是確認使用者信用卡是合格的. 確認合格後stripe會給我們一組token密碼. 然後我們再把token密碼傳給後端.

1. 在我們的checkout.ejs, 我們先把我們的form寫好,然後順便帶入兩個javascript. 可以參考官方做法

   <%- include ./partials/header %>
   
     <h1>Checkout</h1>
     <h3>Your Total: <%= session.cart.totalPrice %> $</h3>
   <div id="charge-error" class="alert alert-danger <% if(noErrors){ %>
         hidden <% } %>">
           <%= errMsg %>
         </div>
     <form action="/checkout" method="post" id="payment-form">
       <div class="row">
         <div class="col-xs-12">
           <div class="form-group">
             <label for="name">Name</label>
             <input name="name" type="text" id="name" class="form-control" required>
           </div>
           <div class="form-group">
             <label for="name">Address</label>
             <input name="address" type="text" id="address" class="form-control" required>
           </div>
           <div class="form-group">
             <label for="card-element">Credit Card</label>
             <div id="card-element">
             <!-- Stripe Element 會透過javascript 輸入在這裡 -->
             </div>
   
             <!-- 會透過javascript, 在這裡輸入error -->
             <div id="card-errors" role="alert"></div>
           </div>
           <button class="btn btn-success">Buy Now</button>
         </div>
       </div>
     </form>
   
     <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
     <script type="text/javascript" src="javascripts/checkout.js"></script>
     <%- include ./partials/footer %>
   

2. 接下來我們來寫javascript, 第一我們先拿stripe api key 看全部檔案checkout.js

   // Create a Stripe client
   var stripe = Stripe('pk_test_KOdpJMtqiqwsnwz6D0GHjuc0'); // You test api keys
   

3. 接下來我們要做我們的stripe instance, 輸入信用卡的表格

   // Create an instance of Elements
   var elements = stripe.elements();
   
   // Custom styling can be passed to options when creating an Element.
   // (Note that this demo uses a wider set of styles than the guide below.)
   var style = {
     base: {
       color: '#32325d',
       lineHeight: '24px',
       fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
       fontSmoothing: 'antialiased',
       fontSize: '16px',
       '::placeholder': {
         color: '#aab7c4'
       }
     },
     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');
   

4. 處理錯誤訊息, 如果發現是不合格的信用卡, 我們會傳訊息

   // Handle real-time validation errors from the card Element.
   card.addEventListener('change', function(event) {
     var displayError = document.getElementById('card-errors');
     if (event.error) {
       displayError.textContent = event.error.message;
     } else {
       displayError.textContent = '';
     }
   });
   

5. 接下來我們來處理如何表單送出, 當表單被送出的時候 我們會先用stripe 提供的 API, stripe.createToken. 那我們會用callback, 如果有錯誤訊息我們顯示訊息. 如果信用卡沒問題的話, 我們透過 stripeTokenHandler 把需要的資料打包傳給後端.

   // 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);
       }
     });
   });
   
   
   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();
   }
   

參考文件

• StripeJS Doc

• StripeJS Element

• My Express Github Shopping Cart