Stripe支付相關資料

原創 奋斗成就男人 2020-07-04 05:44

1: API文檔： https://stripe.com/docs/api

2：JS文檔：https://stripe.com/docs/js

3：其他資料：https://blog.csdn.net/u011216417/article/details/80027965

                       https://blog.csdn.net/u012482647/article/details/98942190

                       https://blog.csdn.net/Java_Mrsun/article/details/88393871

                       https://www.cnblogs.com/doinbean/p/9320162.html

以下是stripe前端開發步驟：

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

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

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

 

 stripe官方說分爲六步，如下圖：

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

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

  step6:成功 

 其實相對於普遍來說 step4和step5不用考慮，所有我們就只有4步。

 前端stripe支付步驟：

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

1

2

3

4

5

6

7

8

9

10

11

12

13

<!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：接下來就是按照官方文檔步驟走，粘貼複製，先創建頁面收集卡信息。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<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交互。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

// 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 地址

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Apple Pay線上支付的流程和app應用內接入的方法

yyc_quietly 2020-02-26 03:42:33

微信開發用到的常見的工具方法~~xmlToMap、MapToXml、簽名等等

Java编程指南（微信公众号同名） 2020-02-20 23:58:16

微信、支付寶支付

Tinner丶 2019-06-14 13:14:45

Apple Pay線上支付的流程和app應用內接入的方法

yyc_quietly 2020-02-26 03:42:33

微信開發用到的常見的工具方法~~xmlToMap、MapToXml、簽名等等

Java编程指南（微信公众号同名） 2020-02-20 23:58:16

支付相關api

ammengke 2019-03-23 11:12:07

Paypal收款費用和支持的貨幣種類

SHUIPING_YANG 2018-12-24 02:17:04

Paypal支付接入(Android/IOS(swift)/Java後臺)

mayousheng 2018-11-20 10:44:59

支付寶支付接入(Android/IOS(swift)/Java後臺)

mayousheng 2018-11-13 00:00:07

微信支付接入(Android/IOS(swift)/Java後臺)

mayousheng 2018-11-13 00:00:07

銀行卡髮卡行標識代碼及卡號

muyutingfeng2008 2018-09-05 08:00:10

中國大陸主要銀行卡號對應

muyutingfeng2008 2018-09-05 08:00:10

原來支付寶、財付通每天都是這樣對賬、風控的！

muyutingfeng2008 2018-09-05 08:00:10

微商城支付功能（一）

Guardyouforever 2018-09-04 07:30:35

商戶聚合支付系統設計

逍遥子_ 2018-09-02 09:06:00