Vue+cordova-plugin-alipay-v2实现支付宝支付(Android)--沙箱环境
原项目使用vue开发的移动端,hbuilderx打包的apk,一开始调用支付宝APP支付 发现怎么都调不起来,就去官方技术支持问了一下,纯H5无法调用,推荐调用手机网站支付; 后面换调用支付宝手机网站支付,网上查询各种方式基本上都试用了一下,支付完成之后跳转一直白屏,跳转不回订单页(有没有遇到过的,求解答);最后使用支付宝插件:cordova-plugin-alipay-v2参考:GitHub -
原项目使用vue开发的移动端,hbuilderx打包的apk,一开始调用支付宝APP支付 发现怎么都调不起来,就去官方技术支持问了一下,纯H5无法调用,推荐调用手机网站支付;
后面换调用支付宝手机网站支付,网上查询各种方式基本上都试用了一下,支付完成之后跳转一直白屏,跳转不回订单页(有没有遇到过的,求解答);
最后使用支付宝插件:cordova-plugin-alipay-v2
npm安装:
cordova plugin add cordova-plugin-alipay-v2 --variable APP_ID=your AppId
注意依赖是无法在vue 项目安装的,关于cordova的安装和环境配置自己网上查一下吧(泪);
在android-studio新建一个项目,将vue项目打包好的dist文件复制出来放到www文件夹,最后然后用cordova build android 打包成apk;
前端接口获取后端返回的带有订单信息的签名,然后调用支付接口就好啦;
后端返的实例如下:
'alipay_sdk=alipay-sdk-java-dynamicVersionNo'+'&app_id=2016101600701716&biz_content=%7B%22body%22%3A%22null%'+'3Anull%22%2C%22out_trade_no%22%3A%22313507361383776256%22%2C%22'+'product_code%22%3A%22ET+order%22%2C%22subject%22%3A%2239+%E5%AE'+'%B9%E8%A5%BF%E5%A4%A7%E6%B0%B4%E8%A1%97%E5%8A%9E%E5%85%AC%E5%8C%BA%'+'3A18+%E6%B3%8A%E5%AF%93%EF%BC%88%E8%B1%AA%E4%B8%B9%E5%BA%97%EF%BC%89%'+'22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%220.01%22%'+'7D&charset=UTF-8&format=json&method=alipay.trade.app.pay¬ify_url=https%3A%'+'2F%2Fipts.zpmc.com%2Fpss%2Fet-service%2Falipay%2Fcallback&sign=aeCeGuaUI9kDYwz0L'+'3UIR99knqh%2F1rrxjp8gXDQY3q6wxMQoSDn5NCS3RTUwGYT5%2FlgLu9NRq8ywUkrp6zWvy%2Filj5%2F4'+'ZGkFhiDfEnNjKimeUq9Ne1tpNEYRHrv19dalaOEO7vXbrJjpzg5w9fqo1m0MDISVj3PlFwMcOF6ZDc%2Br'+'4GDbkvbrX%2BSjsBCX7CPWDR5eijFN199VtvrFHOOrfdIRkYCDRoLjdsXwTKxnrWagutcGdPjMLdIM%2FXyO'+'f77fLmSrfEKrUNGfMHBlOY6%2FxDqVVCAqDQgQutVF5La%2BKzUtgij8T6fC9IGRncjFpn%2F9vfXFWyZE%2F'+'3zEZqMFTZCSYg%3D%3D&sign_type=RSA2×tamp=2020-09-02+17%3A00%3A28&version=1.0';
前端调用实例如下:
// url 是后端返的(参考上面的实例)
if(url.indexOf("alipay") !== -1&&json.payType === 'ALIPAY') {
cordova.plugins.alipay.payment(url, function success(e){
console.log('支付成功', e);
setTimeout(()=>{
_this.$toast('订单支付成功');
_this.$router.push('/orders');
},100)
},function error(e){
console.log("支付失败", e);
});
}
原vue项目index.html 引入cordova.js
<script type="text/javascript" src="cordova.js"></script>
因为支付宝账户问题,现在使用的是沙箱环境,所以要在支付方法调用之前添加设置沙箱环境的代码:
android-studio项目(路径:\platforms\android\app\src\main\java\cn\hhjjj\alipay\alipay.java)
com.alipay.sdk.app.EnvUtils.setEnv(com.alipay.sdk.app.EnvUtils.EnvEnum.SANDBOX); // 沙箱环境
最后,终于测试通过了,正式环境还没有测试,有问题我再来更新记录吧~
更多推荐
所有评论(0)