iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
0
自我挑戰組

如何成為工程師? (從工地到前端工程師)系列 第 17

[Day 17] Node 串金流, 不然怎麼跟客戶收錢 Part I

背景

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

參考文件


上一篇
[Day 16] 我們來學 Node & ExpressJS 吧, 先來個CRUD
下一篇
[Day 18] Node 串金流, 不然怎麼跟客戶收錢 Part II
系列文
如何成為工程師? (從工地到前端工程師)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
海綿寶寶
iT邦大神 1 級 ‧ 2017-12-21 16:16:22

請教一下
刷卡不需要卡片背面的 CVC
是一般通則
還是 stripe 的規定呢?

謝謝

stripe element 會包含CVC , 請看
https://stripe.com/docs/stripe-js/elements/quickstart

看到了
/images/emoticon/emoticon41.gif

=) 希望有幫到你

我要留言

立即登入留言