Stripe支付相关资料

最新推荐文章于 2024-05-15 11:22:26 发布

奋斗成就男人

最新推荐文章于 2024-05-15 11:22:26 发布

阅读量1.2k

点赞数

分类专栏：支付相关

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/yxhxj2006/article/details/105061594

版权

支付相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

</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">

</div>

<div style="margin-top: 20px">

<input placeholder="请输入费用" name="charger"> USD

</div>

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

奋斗成就男人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Stripe支付相关资料

1: API文档：https://stripe.com/docs/api2：JS文档：https://stripe.com/docs/js3：其他资料：https://blog.csdn.net/u011216417/article/details/80027965 https://blog.csdn.net/u012482647/arti...
复制链接

扫一扫

专栏目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。