详细记录一下使用uniapp开发paypal支付流程以及遇到的问题
前言：uniapp文档给出的paypal支付，在安卓手机上调起支付以后输入完账号密码以后就开始卡住转圈，在一通百度以及社区咨询以后，这个问题暂时处于无法解决以及原因也无法知道后，官方也没有任何回复以后，只能采取别的解决办法，这里记录我使用的webview引入；
首先去注册paypal账户，这个巴拉巴拉的没什么难度，算了写一下吧，
地址：https://www.paypal.com/mep/dashboard
注册完点击左上角的开发人员
点击 Apps&Credentials,然后点击 Create App，创建自己的app
然后你将得到这个Client ID,这个后边要用
点击创建好的App最右边，有点三个点，点击一下然后选择Edit,在进入的这个页面中，按图勾选，然后在Login in with Paypal下边点击Advanced Settings
写上你自己的url在这里，怎么写自己看文档，
向下滚动，勾选上这几个，然后保存，
目前开发是出于沙盒模式中，有给能用的测试商户和用户，
点击Testing Tools 下的Sanbox Accounts,能看到
这两就是测试用户以及商户，这东西也可以自定义成自己想要的
以上就是账户方面的，下边说开发方面的，
1，首先创建一个文件html，文件放入hybrid文件夹中（在web-view中引用的本地html必须放到该文件夹，与pages文件夹同级），
2，将html文件引入到webview中
<template>
<view>
<web-view src="/hybrid/html/index.html" @message='handleMessage'></web-view>
</view>
</template>
3，首先是app想webview传递数据，使用evalJS
var currentWebview = this.$scope.$getAppWebview()
that.wv = currentWebview.children()[0]
that.sendRequestData(res)
sendRequestData(res) {
const _funName = 'msgFromUniapp ',
_data = {
msg: res,
paymentOrderId:this.paymentOrderId //后台生成的订单id
}
const currentWebview = this.$scope.$getAppWebview().children()[0]
currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`)
},
4,web-view接收app数据
window.msgFromUniapp = function(data) {
console.log(JSON.stringify(data), '接收数据');
dataInfo = data // 赋值
}
5,app接收web-view数据
handleMessage(evt) {
console.log(evt);
if(evt.detail.data[0]){
this.captureOrder(evt.detail.data[0])
}
},
6,captureOrder这个方法用于你自己的接口，在用户完成付款动作后，在这个接口里将订单号传递给后台用于订单捕获
7，html页面详细代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add meta tags for mobile and IE -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>PayPal</title>
<!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
//这个必须引入，引入这个才能与应用进行交互动作，最好下载到本地，在线的会导致页面加载缓慢有的时候
<script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
//与上同理
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!-- Set up a container element for the button -->
<div style="padding-top: 100px;" id="paypal-button-container"></div>
<!-- -->
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.sandbox.paypal.com/sdk/js?client-id=你自己的应用那个id¤cy=USD"></script>
<script>
</script>
<script>
//加载发生变化时调用
document.onreadystatechange = subSomething
function subSomething() {
console.log(document.readyState)
// 判断是否加载完成
// loading - interactive - complete
if (document.readyState == 'complete') {
// document.getElementById('app').style.display = 'block'
console.log('加载完成','-------------------')
// 加载完成后传值给uniapp
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
})
}else{
console.log("其他")
}
}
var dataInfo = '' // 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。
// document.addEventListener('UniAppJSBridgeReady', function() { uni.getEnv(function(res) {
// console.log('获取当前环境：' + JSON.stringify(res));
// });
// });
// 接收数据
window.msgFromUniapp = function(data) {
console.log(JSON.stringify(data), '接收数据');
dataInfo = data // 赋值
}
paypal.Buttons({
createOrder: function(data, actions) {
// 定义一下要付多少钱
//a,这个被注释掉的return，如果使用的话那就是不通过后端生成订单，直接前端生成
// return actions.order.create({
// purchase_units: [{
// amount: {
// // value: dataInfo.msg,
// value: '33',
// },
// }]
// });
//b,这个是使用后端生成订单
return dataInfo.paymentOrderId
},
onApprove: function(data, actions) {
console.log(dataInfo.paymentOrderId)
console.log(JSON.stringify(data))
console.log(JSON.stringify(actions))
//a,用户付款结束后将订单号传递回去给后端用于捕获订单
uni.postMessage({
data:data.orderID
});
return
//b,这里是不走后端的捕获，付款完成后前端调用捕获订单，两个a是一套两个b是一套
return actions.order.capture().then(function(details) {
// 付款成功之后的回调
// alert('Transaction completed by ' + details.payer.name.given_name);
console.log('details',JSON.stringify(details))
uni.postMessage({
data:details
});
});
}
}).render('#paypal-button-container');
</script>
</body>
</html>
