PayPal开发前台生成订单和后台生成订单

最新推荐文章于 2024-05-20 17:26:24 发布

Army-海军

最新推荐文章于 2024-05-20 17:26:24 发布

阅读量1.9w

点赞数 28

分类专栏： JavaScript 文章标签： PayPal用法

本文链接：https://blog.csdn.net/weixin_41229588/article/details/97368900

版权

JavaScript 专栏收录该内容

50 篇文章 17 订阅

订阅专栏

1.创建账号

给自己申请个账号在这个网站https://www.paypal.com

为了测试创建个个人账号即可。流程很简单，因为这个网站是中文的，开发网站是英文的。

2.开发思路

这个为了方便大家测试，提供了一套沙箱机制，也就还有另外一个网站，和真是网站一模一样，但是钱都是虚拟的，可以查看交易记录啊，转账金额啊，都能看，就是为了方便开发，到了真是环境，换个client-id就可以了，很人性化。首先用你创建的账号，登录这个网站，https://developer.paypal.com

登录之后创建一个APP

然后一步步进行下去，然后进入这个建好的app,保存你的client ID 和secret

然后

系统会默认给你两个账号，你可以自己建两个，一个类型business卖家，一个personal买家的，记得给两个里边多加点钱，反正是你自己写的数字。别等会支付的时候没有钱。

然后继续

就是放付款的说明了，当然我就不翻译了，直接上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div id="app">			
		</div>
		<!-- client-id后边放你的 -->
		<script src="https://www.paypal.com/sdk/js?client-id=AbNCiAHKivvcx14ePiJWBgRkiEjf6JKa0-f12lg2lcwJIU5OVi5JZY3Hxrj5miWGF-WbcgAJSkcshO7t"></script>
<!-- AcP31iLnpcCZglGPqNeO6gIRZh1qtPCfeyP_vK0lJhcJTgXcAzOrObRmqjtZSwHZlOahAyz6TMaUyw8i -->
		<script>
			paypal.Buttons({
				createOrder: function(data, actions) {
					// 定义一下要付多少钱
					return actions.order.create({
						purchase_units: [{
							amount: {
								value: '0.03'
							}
						}]
					});
				},
				onApprove: function(data, actions) {
					// console.log(data,actions)
					
					return actions.order.capture().then(function(details) {
						// 付款成功之后的回调
						alert('Transaction completed by ' + details.payer.name.given_name);
						// 告诉你自己的服务器订单号,方便后续的查询
						return fetch('/paypal-transaction-complete', {
							method: 'post',
							headers: {
								'content-type': 'application/json'
							},
							body: JSON.stringify({
								orderID: data.orderID
							})
						});
					});
				}
			}).render('#app');
			// 把付款按钮放id为app的盒子里
		</script>
	</body>
</html>

页面是这个样子

然后直接点击黄色按钮支付。

登录你刚才新建的那个，个人账户和你设的密码，登录就可以支付了，这就是为啥刚才让你在账户里设置点钱的原因了；

这种方法不安全，万一在通知后台的时候断网了，就傻了。你的支付的orderId和你生成订单时的id没绑定，就傻眼了，所以生成订单这部还是要放在后台做

如果换成后台了，就这么写。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>

	</head>
	<body>
		<div id="app">
			<!-- <a href="https://www.sandbox.paypal.com/checkoutnow?token=2WS51818F50060318">fdsfdsf</a> -->
		</div>
		<script src="https://www.paypal.com/sdk/js?client-id=AbNCiAHKivvcx14ePiJWBgRkiEjf6JKa0-f12lg2lcwJIU5OVi5JZY3Hxrj5miWGF-WbcgAJSkcshO7t"></script>
		<!-- AcP31iLnpcCZglGPqNeO6gIRZh1qtPCfeyP_vK0lJhcJTgXcAzOrObRmqjtZSwHZlOahAyz6TMaUyw8i -->
		<script>
			paypal.Buttons({
				createOrder: function(data, actions) {
					// 这个a现在是写死的,实际是后台传来的.就ok了
					var a = "95F21375EK077912C"
					return a;
					
				},
				onApprove: function(data, actions) {
					return actions.order.capture().then(function(details) {
						// 支付完成的回调.
						console.log(details)
						alert('Transaction completed by ' + details.payer.name.given_name);
						// Call your server to save the transaction
						return "";
					});
				}
			}).render('#app');
		</script>
	</body>
</html>

我只管前端，后台咋生成，看这里

https://developer.paypal.com/docs/api/overview/

自己慢慢就出来了。

如果你只会前端还想用那就用第一种方法，后台也会的话就用后一种方法（推荐）。