总结一下paypal支付功能 整个流程在前端完成
背景
公司要求在落地页上,添加商品下单功能,支持PayPal支付和通联支付,于是先搞起了贝宝 不BB上demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="https://www.paypal.com/sdk/js?client-id=sb"></script> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ensures optimal rendering on mobile devices. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Optimal Internet Explorer compatibility -->
<script src="https://www.paypal.com/sdk/js?client-id=AeRq2qAvJG3KYKzfM0JhaRv2b2bmuuooHaaMz7oEJLollUZeSex0wBDcbTu9rbKeOsxpmtW8wq1-BsvM">
// Required. Replace YOUR_CLIENT_ID with your sandbox client ID.
</script>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
console.log('createOrderData', data);
console.log('createOrderactions', actions);
// This function sets up the details of the transaction, including the amount and line item details.
return actions.order.create({
purchase_units: [{
amount: {
value: '100' // 交易金额
}
}]
});
},
onApprove: function(data, actions) {
console.log('onApproveData', data);
console.log('onApproveActions', actions);
// This function captures the funds from the transaction.
return actions.order.capture().then(function(details) {
console.log('交易成功', details);
// This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
}).render('#paypal-button-container');
//This function displays Smart Payment Buttons on your web page.
</script>
</head>
<body>
<div id='paypal-button-container'></div>
<script>
</script>
</body>
关键点
需要引入第三方的库
<script src="https://www.paypal.com/sdk/js?client-id=AeRq2qAvJG3KYKzfM0JhaRv2b2bmuuooHaaMz7oEJLollUZeSex0wBDcbTu9rbKeOsxpmtW8wq1-BsvM">
- clientId 这个是收款方的id
- createOrder 创建订单回调函数
- onApprove 捕获交易回调函数,
- actions.order.capture 回调里可以拿到details;到这一步就表示交易成功了
- #paypal-button-container 容器Id
自己页面流程
引入第三方库,携带clientId,渲染到你要的容器里头 如下图
样式都是它给的,我没做其他修改;这时候点击paypal按钮,就能吊起第三方界面,进行付款。
第三方界面付款流程
- 这时候需要你填写买家的邮箱账号,我申请了一个沙盒账号(测试账号)进行测试
- @personal的是个人账号,也就是买家,@business就是收款方,也就是商家,后面我会介绍如何申请沙盒账号,和获取clientId
- 这个就可以拿到账号进行登录, 然后填写一些信息(例如收获地址等)付款,金额是卖家设定好的,也就是代码里头的
value: '100' // 交易金额
结束付款流程
如何申请沙盒账号,和获取clientId
申请地址 www.paypal.com/signin?retu…
- 在DASHBOARD菜单下,选择My Apps & Credentials。
- 确保您位于 Sandbox 选项卡上以获取您在开发代码时将使用的 API 凭据。在测试之后和上线之前,切换到“实时”选项卡以获取实时凭据。
- 在App Name列下,选择Default Application,PayPal 使用新的 Developer Dashboard 帐户创建该应用程序。如果您没有看到默认应用程序,请选择创建应用程序。
- 这三个步骤是我贴过来的,写的很清楚
- 创建好应用后,就能拿到clientId
获取卖家和买家的沙盒账号
- 点击account
- view / edit account 就可以看到账户邮箱和密码
- 获取到买家邮箱账户和密码,就可以进行付款
- 整个流程结束
查看交易
- www.sandbox.paypal.com/?_ga=1.2520…
- 登录到上面这个链接,就可以查看买家或者卖家收付款信息了,账户和密码在上面有说怎么获取 view / edit account
that's all