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后台能够看到请求的日志记录，能够针对端点发送测试数据，这些对于调试程序仍是很方便的，具体如何使用我就很少说了，都有中文的你们用心看下就懂了。
上线的时候须要将相关配置参数换成正式环境的。

以上只是我在研究Stripe支付的一点简单的总结，时间仓促不少细节还未深刻详细说明。以上若有不正之处还望见谅，可给我留言讨论，谢谢！