一、相关文档或网址
1、uni-app官方文档地址:开通 | uni-app官网
2、paypal开发者中心:Applications - PayPal Developer
二、开发流程
1、开发前配置:
(1)登录账号后新建项目:Sandbox是沙盒项目(用于测试),Live是线上项目。
(2)Client ID 是我们后面需要用到的
(3)再往下的沙盒配置中,需要结合项目配置信息了。
首先配置项目发行App时的包名:
然后在manifest.json -> App模块配置中配置Payment:
最后在开发者中心项目管理的沙盒配置中配置重定向信息:
(4)配置登录信息:
配置完两个协议网址后点击保存,Paypal配置完成。
2、开发代码
// #ifdef H5
window.location.href = pathUrl; //H5端跳转到paypal支付页面
// #endif
// #ifdef APP-PLUS
let orderInfo = {
"clientId": "***", //开发者中心clientId
"orderId": "***", //订单id
"userAction": "continue", //按钮样式 paynow/continue
"currency":"USD", //币种
"environment":"sandbox" //运行环境 sandbox(沙盒) / live(线上)
};
uni.getProvider({
service: 'payment',
success: function (res) {
if (~res.provider.indexOf('paypal')) {
uni.requestPayment({
"provider": "paypal",
"orderInfo": orderInfo,
success: function (response) {
console.log('success:' + JSON.parse(response.rawdata));
},
fail: function (err) {
console.log('fail:' + JSON.stringify(err));
}
});
}else{
uni.showToast({
title: '抱歉,当前您的系统暂不支持使用Paypal支付。',
icon: 'none'
})
}
}
});
// #endif
注:
pathUrl是我们项目中后端接口返回的paypal支付网址;
clientId是(2)步中开发者中心项目配置中的数据;
orderId也是后端接口中返回的数据,如何生成这个数据见官方文档:Orders
三、运行效果
本地测试的时候我是打了自定义基座包后运行的,配置项都正确的话,uni.getProvider方法可以获取到"paypal"的支付方式,然后uni.requestPayment方法调起支付,打开浏览器并开始确认支付。支付完成后会提示你返回应用程序,并触发支付成功或失败的回调。
注:沙盒测试账号可以在paypal开发者中心里查看和配置:
四、支付完成
paypal对接到此结束,希望对你的开发能有一点点的帮助。