Stripe支付介紹在asp.net mvc中開發對接，圖文加代碼說明

時間 2021-01-02

標籤 javascript html 前端 java jquery ios git json windows 後端欄目 ASP 简体版

原文原文鏈接

最近一個國外的電商項目，須要對接支付功能，國內的支付通常使用微信支付、支付寶、銀聯等等，但國際上通常使用Paypal、Skrill、BrainTree、Stripe等，通過內部綜合考量因此最後選擇使用 Stripe支付。javascript

Stripe的對接相對仍是比較簡單的，只是相關的文檔是英文的，且國內和國外的思想不同，看文檔不是很方便。html

作爲技術人員這裏我將對接中所遇到的問題和解決方法彙總，但願能對開發人員有所幫助。前端

一：Stripe支付介紹

Stripe支付國際支付仍是很是有名氣的，具體的介紹下面的一些說明：java

中文官網：https://stripe.com/zh-cn-us
Stripe國際支付簡介：點擊打開
Stripe支付對接仍是很是方便的。
Stripe支付功能也仍是很強大的包括支付、帳單、訂閱等等。

二：Stripe技術對接

對接前的準備工做
- 須要去官網申請一個帳號，好像是國內的銀行卡很差申請。具體如何申請還請百度搜索下，我這裏就不贅述了。
- 申請好之後在後臺拿到測試的公鑰和私鑰。
- 須要申請HTTPS證書，這個異步通知的接口須要提供HTTPS的域名。
- 官網接口文檔，共區分後端、前端、ios和安卓。
  - 後端的接口：點擊查看
  - 前端的接口：點擊查看
- 其它的一些使用文檔：點擊查看
支付對接方式說明：共有2中方式。
- 方式一：使用Stripe的支付頁面進行支付（官方名稱：CheckOut）。
  - 這種分2種狀況：
    - 跳轉到Stripe的支付頁面進行支付，這種相似於支付寶的對接，須要跳轉到支付寶的支付頁面。Stripe的支付頁面效果圖以下。
    - 本身的頁面構建一個Stripe的支付，這種相似於微信公衆號的支付。
- 方式二：本身作支付頁面，經過接口的方式進行支付。
  - 官網給出了不少HTML示例效果，可下載後本身修改下。點擊查看示例效果
  - 採用這種方式，輸入信用卡等信息是Stripe經過js控制的，咱們是拿不到用戶輸入的相關信息的，爲了安全。
- 不論是使用方式一和方式二，咱們都沒法獲取用戶輸入的信用卡等信息。
- 推薦使用方式一對接，有如下幾點：
  - 用戶在Stripe輸入銀行卡信息，用戶感受要更加安全。
  - 減小沒必要要的開發工做，由於本身作的收銀頁面無法和Stripe的比較。
下面全部的流程主要是使用跳轉到Stripe支付頁面支付。
簡單的流程說明
- 用戶點擊頁面上的「支付」按鈕。
- 經過js調用後臺的接口，接口中要調用Stripe的接口建立支付的會話（Session），調用Stripe接口以前須要設置一些數據，包括支付金額、支付方式等等，這個後面說明。調用接口成功則Stripe會返回一個SessionId，將該值返會給前端。
- 前端拿到SessionId之後，帶上改參數跳轉到Stripe的支付頁面。
- 用戶若是取消支付或支付成功，則跳轉到建立Session配置的取消地址和支付成功跳轉地址。
- 支付成功或其餘的一些事件，Stripe會異步通知咱們支付結果。
- 上面這幾步驟是大體的流程，還請有多的細節問題。
下面咱們根據上面簡單的流程進行一步步詳細的說明。
下面的演示代碼是：.NET MVC

三：發起支付

官網有個快速開始支付的說明文檔，點擊查看
作一個HTML頁面，頁面上須要引用Stripe的js文件和點擊跳轉到支付按鈕。固然支付的頁面上還有不少其餘的一些東西，好比收貨地址、商品信息等等。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset= "utf-8" />
5. <title></title>
6. <script src= "~/js/jquery-1.12.4.min.js"></script>
7. <script src= "http://js.stripe.com/v3/"></script>
9. </head>
10. <body>
12. <button id= "checkout-button">去付款</button>
14. <script type= "text/javascript">
16. //建立一個stripe，裏面的參數則是stripe申請的公鑰，在後臺能查看到，pk_開通的，加test表示是測試的
17. var stripe = Stripe('pk_test_xxx'); //輸入本身的pk_test
18. var checkoutButton = document.getElementById('checkout-button');
20. //支付按鈕點擊事件
21. checkoutButton.addEventListener( 'click', function () {
23. //調用後端的接口
24. fetch( '/home/CreateCheckoutSession', {
25. method: 'POST',
26. })
27. .then(function (response) {
28. return response.json();
29. })
30. .then(function (session) {
31. //調用後端接口成功，獲得sessionId，頁面會在函數裏面進行跳轉
32. return stripe.redirectToCheckout({ sessionId: session.id });
33. })
34. .then(function (result) {
36. if (result.error) {
37. alert(result.error.message);
38. }
39. })
40. . catch(function (error) {
41. console.error( 'Error:', error);
42. });
43. });
44. </script>
48. </body>
50. </html>
上面的頁面中須要一個後臺調用Stripe來產生SessionId。
後端代碼，VS上先在NuGet上引用第三方的包，名稱：Stripe.net。
後端提供SessionId的代碼以下
1. /// <summary>
2. /// 調用stripe建立支付的會話，成功則返回會話的Id，用於頁面跳轉
3. /// </summary>
4. /// <returns></returns>
5. [ HttpPost]
6. public ActionResult CreateCheckoutSession()
7. {
8. try
9. {
10. // Stripe的私鑰，在 Stripe後臺能看到 sk開頭的，_test則表示是用於測試環境的。
11. StripeConfiguration.ApiKey = "sk_test_xx"; //sk_test_xxx 這裏須要修改
13. //封裝支付請求的數據，
14. //字段說明詳見官網：https://stripe.com/docs/api/checkout/sessions/object
15. var options = new SessionCreateOptions
16. {
17. PaymentMethodTypes = new List<string>
18. {
19. "card" ,"alipay" //支持的付款方式
20. },
21. BillingAddressCollection= "required",//是否要收集賬單地址信息
23. LineItems = new List<SessionLineItemOptions>
24. {
25. new SessionLineItemOptions
26. {
27. PriceData = new SessionLineItemPriceDataOptions
28. {
29. UnitAmount = 2000, //須要支付的金額
30. Currency = "usd",//支持的貨幣簡寫，具體見官網
31. ProductData = new SessionLineItemPriceDataProductDataOptions
32. {
33. Name = "支付的顯示名稱，或者是商品名稱",
34. Images= new List<string>(){"http://www.angelasp.com/images/angellogo.gif" },
35. Description= "支付的描述信息，能夠是商品的描述等信息"
36. },
37. },
38. Quantity = 1,
39. },
40. },
42. Mode = "payment",
43. SuccessUrl = "https://example.com/success", //支付成功之後跳轉的URL地址
44. CancelUrl = "https://example.com/cancel",//用戶取消支付之後跳轉的URL地址
45. };
47. options.PaymentIntentData = new SessionPaymentIntentDataOptions();
48. options.PaymentIntentData.Metadata = new Dictionary<string, string>
49. {
50. { "sn", "6735" }, { "attachmentValue", "6735" }, //傳遞的自定義參數，回調通知的時候會原樣返回
51. };
53. var service = new SessionService();
54. Session session = service.Create(options);
56. return Json(new { id = session.Id });
57. }
58. catch (Exception ex)
59. {
60. throw ex;
61. }
62. }
上面前端HTML和後端的接口都處理好之後，點擊頁面上的那個去付款的按鈕，則會跳轉到Stripe的收銀臺頁面（下圖）。
Stripe的測試也很是方便，官方提供了不少測試的卡號，下面表格是我收集整理的一些。

卡號jquery	品牌ios	CVCgit	年月json
4242424242424242windows	Visa後端	任意3位數字	大於當前時間的年月
4000056655665556	Visa (debit)	任意3位數字	大於當前時間的年月
5555555555554444	Mastercard	任意3位數字	大於當前時間的年月
2223003122003222	Mastercard (2-series)	任意3位數字	大於當前時間的年月
5200828282828210	Mastercard (debit)	任意3位數字	大於當前時間的年月
5105105105105100	Mastercard (prepaid)	任意3位數字	大於當前時間的年月
378282246310005	American Express	任意4位數字	大於當前時間的年月
371449635398431	American Express	任意4位數字	大於當前時間的年月
6011111111111117	Discover	任意3位數字	大於當前時間的年月
6011000990139424	Discover	任意3位數字	大於當前時間的年月
3056930009020004	Diners Club	任意3位數字	大於當前時間的年月
36227206271667	Diners Club (14 digit card)	任意3位數字	大於當前時間的年月
3566002020360505	JCB	任意3位數字	大於當前時間的年月
6200000000000005	UnionPay	任意3位數字	大於當前時間的年月

信用卡的年月，填寫大於當前時間的年月便可。

在Stripe的支付頁面填寫好相關信息之後點擊支付，若是沒有問題的話就會支付成功。
支付成功之後可在Stripe的後臺看到付款的金額和一些日誌，日誌包括事件、接口請求日誌、訂單數據等等。由於是測試的數據因此要先開啓可查看測試數據，否則是看不到的，如何開啓看下圖。
完成上面的步驟之後，則發起支付收款簡單的流程沒有問題下，下面說下如何接受Stripe異步通知。

四：接受異步通知

Stripe支持不少事件的通知，例如Session建立完成、訂單付款完成、退款等等，詳見官網說明。事件類型說明
須要一個HTTPS的接口，若是沒有證書可去阿里雲等申請免費的證書。
在Stripe後臺添加一個端點（接受通知的配置）見下圖
事件類型很是多，目前咱們是作跳轉支付，支付成功了通知咱們，則選擇：payment_intent.succeeded 事件
拿到驗證端點的密鑰，每一個端點有獨立的密鑰，見下圖
編寫接受通知的接口代碼，官網有英文的說明代碼，下面我把代碼整理了貼出來。
1. /// <summary>
3. /// 支付成功的異步通知接口
5. /// </summary>
7. /// <returns></returns>
9. [ HttpPost]
11. public ActionResult Notify()
13. {
15. var json = new StreamReader(HttpContext.Request.InputStream).ReadToEndAsync().Result;
17. try
19. {
21. //驗證數據的來源
23. string endpointSecret = "whsec_XXXXX";//後臺建立的端點簽名密鑰
25. var stripeEvent = EventUtility.ConstructEvent(json, Request.Headers["Stripe-Signature"], endpointSecret);
29. //stripeEvent.Type 則是不一樣的事件，具體則看你配置端點的時候，這個接口設置了那些事件
31. if (stripeEvent.Type == Events.PaymentIntentSucceeded)
33. {
35. //支付成功的業務處理
37. var payModel = stripeEvent.Data.Object as PaymentIntent;
41. decimal payAmount = payModel.Amount / 100M; //支付的金額
43. string payPaySN = payModel.Id;//支付方的惟一訂單號
45. string payCurrency = payModel.Currency;//支付的貨幣
49. //帳單信息，若是建立Session的時候設置收集帳單信息，則這裏能夠獲取到
51. var billing = payModel.Charges.Data[0].BillingDetails;
53. string billingName = billing.Name;
55. string billingEmail = billing.Email;
57. string billingPhone = billing.Phone;
59. string billingCity = billing.Address.City;
61. string billingCountry = billing.Address.Country;
63. string billingLine1 = billing.Address.Line1;
65. string billingLine2 = billing.Address.Line2;
67. string billingPostalCode = billing.Address.PostalCode;
69. string billingState = billing.Address.State;
73. //發起支付建立的自定義參數，這裏具體根據本身的業務來
75. string orderSN = payModel.Metadata["sn"];
77. string attachmentValue = payModel.Metadata["attachmentValue"];
81. //其它的一些業務處理，好比更新訂單狀態等等
87. }
89. else if (stripeEvent.Type == Events.PaymentMethodAttached)
91. {
93. var paymentMethod = stripeEvent.Data.Object as PaymentMethod;
95. Console.WriteLine( "PaymentMethod was attached to a Customer!");
97. }
99. else
101. {
103. Console.WriteLine( "Unhandled event type: {0}", stripeEvent.Type);
105. }
109. return Json(new { id = 1});
111. }
113. catch (StripeException)
115. {
116. return Json(new { id =2 });
118. }
120. }
完成上面的步驟，就能夠測試發起支付了和接受支付結果了。
Stripe後臺能夠看到請求的日誌記錄，能夠針對端點發送測試數據，這些對於調試程序仍是很方便的，具體如何使用我就很少說了，都有中文的你們用心看下就懂了。
上線的時候須要將相關配置參數換成正式環境的。