支付-stripe

時間 2019-11-11

標籤支付 stripe 简体版

原文原文鏈接

國外三大支付paypal,braintree,stripe,有興趣能夠去了解一下他們的區別。javascript

支付寶和paypal基本只須要發送charge信息請求交給後端作就ok了，那麼stripe前端也只須要收集卡信息，拿到token給後端就ok了。css

那就來講說主角stripe支付：官方文檔html

stripe官方說分爲六步，以下圖：前端

step1: 收集卡信息 step2 :建立customer step3:支付金額java

step4和step5：計劃(月付和年付等)ios

step6:成功 git

其實相對於廣泛來講 step4和step5不用考慮，全部咱們就只有4步。github

前端stripe支付步驟：json

1：引入stripe.js(爲了方便測試，簡便引入stripe.js，引入axios爲了測試退款請求)axios

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>測試stripe支付demo</title>
    <script src="https://js.stripe.com/v3/"></script>
    <script src="https://cdn.bootcss.com/axios/0.16.0/axios.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

2：接下來就是按照官方文檔步驟走，粘貼複製，先建立頁面收集卡信息。

　　<div style="width: 60%;margin: 0 auto">
      <div>stripe demo支付demo</div>
      <form action="http://xxxxxxx/test/stripe/pay.json" method="post" id="payment-form">
        <div class="form-row">
          <label for="card-element">
            Credit or debit card
          </label>
          <div id="card-element" name="token">
            <!-- A Stripe Element will be inserted here. -->
          </div>
          <div style="margin-top: 20px">
            <input placeholder="請輸入費用" name="charger"> USD
          </div>
          <!-- Used to display form errors. -->
          <div id="card-errors" role="alert"></div>
        </div>

        <button style="margin-top: 20px">Submit Payment</button>
      </form>

      <div>
        <div style="margin-top: 40px">測試退款(兩個都請輸入)</div>
        <input style="margin-top: 20px" placeholder="請輸入退款的交易單號" v-model="value">
        <div style="margin-top: 20px">
          <input placeholder="請輸入退款金額" v-model="charge">
        </div>
        <div style="margin-top: 20px">
          <button @click="refund">發起退款</button>
        </div>
      </div>
    </div>

3.建立stripe客戶端，將stripe提供的卡頁面內嵌到頁面中，用於收集卡信息，而後監聽form表單提交，阻止表單提交前先去給stripe交互。

　　　　　// Create a Stripe client.
        const stripe = Stripe(process.env.PUB_KEY);
        // 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: '18px',
            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');

        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 {
              stripeTokenHandler(result.token);
              // Send the token to your server.
            }
          });
        });

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

一些stripe提供的樣式：stripe element examples 地址

4.與stripe交互完以後，會獲得stripe給你的token,你能夠在寫一些表單input拿到用戶輸入的信息和token表單提交submit一塊兒傳給服務器，後端獲得token就能夠建立customer了。　　

這裏展現下token信息：

那麼咱們就完成咱們的任務的，接下來就是後端的工做了，注stripe支付是至關於主動拉，從信用卡主動扣款，不像支付寶是被動拉，須要用戶主動發起付款支付(如轉帳，掃碼)　

-----原創文章，©版權全部，轉載請註明標明出處：http://www.cnblogs.com/doinbean

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。