微信支付+支付宝支付

本文介绍了移动端的微信支付和支付宝支付流程。对于微信支付,详细阐述了微信内支付和微信外支付的区别及实现方法,包括判断支付环境、调用后端接口等。对于支付宝支付,重点讲解了H5支付的实现,包括后端生成订单和前端的页面跳转。此外,还提及了PC端支付的处理方式。
摘要由CSDN通过智能技术生成

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档



业务场景介绍:

H5移动端支持微信支付 [ 微信支付分为微信内支付(JSAPI支付官方API)和微信外支付(H5支付官方API)] && 支付宝支付 [手机网站支付转 APP 支付 官方API ]

订单生成逻辑:前端请求后端提交订单,后端去和微信或者支付宝对接生成订单(后续支付都是这个逻辑进行的对接)

一、移动端微信支付,vue中如何玩?

在移动端微信支付分为微信内支付和微信外支付。

外支付

1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内:

2.触发立即支付方法,根据微信内外的不同请求后端不同的接口
3.【微信外支付】下面先看微信外支付,官方文档也写的很清楚,后端返回一个url地址,前端的工作就是拿到这个url地址进行跳转就可以了。

4.在调起支付的页面监听从其他页面返回的事件,进行一些刷新业务逻辑的实现即可,至此微信外支付已经完成。

内支付

【微信内支付】微信内支付比起微信外支付稍微复杂一点,但是也不难,(3步骤代码里面已经请求支付方式接口拿到了微信内支付所需要的参数)根据官方API
微信内置js对象 WeixinJSBridge,进行开发,至此微信浏览器内支付已经完成

	 //解决微信内置对象报错
    weixinPay(data){
   
      var vm= this;
      if (typeof WeixinJSBridge == "undefined"){
   
        if( document.addEventListener ){
   
          document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
        }else if (document.attachEvent){
   
          document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
          document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
        }
      }else{
   
        vm.onBridgeReady();
      }
    },
    //微信内置浏览器类,weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
    onBridgeReady(){
   
      var  vm = this;
      var timestamp
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值