• H5微信支付 2019-11-09 13:52:47
    H5微信支付前端流程 @H5微信支付前端处理流程 背景 基于项目的需要,需要做一个H5端的商城,自然少不了支付,鉴于微信的社交能力,我们前期只考虑了微信支付,在此过程中遇到的一些问题,简单整理下。 这里我只说...
    >H5微信支付前端流程
    
    @H5微信支付前端处理流程
    
    # 背景
    
    基于项目的需要,需要做一个H5端的商城,自然少不了支付,鉴于微信的社交能力,我们前期只考虑了微信支付,在此过程中遇到的一些问题,简单整理下。
      这里我只说前端需要处理的,其它的配置及参数什么的后端会给你整好所以不做介绍。
    ## 支付方式
     1.微信内通过WeixinJSBridge(jsApi)来接入支付,具体方式可以[查看文档](https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6)
     2.微信环境外(比如浏览器)吊起微信支付,具体方式可以[查看文档](https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4)
    
    ## jsApi方式支付
    1.此种方式只能在微信环境内支付,通过WeixinJSBridge(微信内置对象)来吊起支付。
    2.支付流程,需要先去微信获取授权换取openid,(建议进入支付页面前先拿好openid,因为我在开发过程中发现在当前页面获取的话用户刷新页面 会报错,用户授权获取到的code只能用一次。)
    我们的项目采用的React。所以通过window.WeixinJSBridge来判断是否有WeixinJSBridge否则代码会报错。
    ```javascript
       // 外界调用 直接引入 wxPay.js 传入支付参数 以及跳转页面路由
      // 首先封装具体的封装方法
      // 参数说明 history :路由 方便支付成功后可以跳转制定页面。
      // params: 支付需要的饿参数
      function onBridgeReady(params, history) {
      if (window.WeixinJSBridge) {
        window.WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: params.appId, // 公众号名称,由商户传入
            timeStamp: params.timeStamp, // 时间戳,自1970年以来的秒数
            nonceStr: params.nonceStr, // 随机串
            package: params.package,
            signType: params.signType, // 微信签名方式:
            paySign: params.paySign, // 微信签名
          },
          function(res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              history.replace({
                pathname: params.pathname,
              });
            }
          },
        );
      }
    }
    
    export default function wxPay(params, history) {
      console.log('支付功能', params);
    
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params, history), false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params, history));
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params, history));
        }
      } else {
        onBridgeReady(params, history);
      }
    }
    ```
    ## 非微信环境内支付
    1.这种方法支付完成后微信建议增加二次确认弹窗,用于确认用户是否支付完成,为什么这样做[开发文档](https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4)上有体现。
    2.关于支付完成后回调地址 建议采用前端自己写好传给后端,这样回调地址就会变得灵活多变,方便开发及测试。
    **ps注意**
     1.由于各个厂商浏览器机制不同,部分手机在支付完成后通过配置的redirect_url回退到二次确认页面的时候,浏览器会刷新,所以你的弹框可能会显示不正确,所以自己可以采取一些方式(增加参数/本地存储)来判断。
     2.ios手机浏览器必定会重新刷新。
    
    ```javascript
    //微信环境外支付后端会直接返回一个url,直接拿这个结果在当前页面打开,就可以唤醒微信,吊起支付。
     window.location.href = res.data.mwebUrl;
    ```
    
    ## else
    1.调试时微信支付是不支持本地IP的,所以请配好开发及正式域名。
    2.建议项目不要用hash(#)路由模式,这会给你带来意想不到的BUG.
    3.哪里写错的地方请大家评论指正。
    
    展开全文
  • 微信h5支付前端源码是子恒老师微信h5支付开发系列视频中的,关于h5支付的前端页面,为后端php实现h5支付提供便利。视频观看学习地址https://edu.csdn.net/course/play/6899/138877
  • 在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用内置对象...
  • ​ 上周由于项目需要开通H5微信支付功能,于是在网上参考了很多例子,由于数据缺失,实用性不高,所以在此特地将SpringBoot整合H5微信支付的流程整理成文档,测试可用。 场景介绍 ​ H5支付是指商户在微信客户端外的...
  • 前段时间公司电商项目需要接入微信支付,因此研究了一下如何使用微信支付。和支付宝支付相比,微信支付相对复杂一些,需要配置的东西更多,限制也更多。经过两天的研究,终于搞定微信支付,在这里对于使用微信支付的...
  • web前端 微信支付H5支付 2019-03-29 00:48:00
    web前端 微信支付H5支付 一、什么是微信H5支付? 微信,简直是21世纪的社交产品之最。人们的生活已经离不开它,因为它的触角广泛蔓延像一张巨大无形的网,从而让我们的生活更加便捷高效,这款...
  • 微信H5支付接口开发步骤 2017-11-09 15:36:34
    1、用户在商户侧完成下单,使用微信支付进行支付 2、由商户后台向微信支付发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB 3、统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名“mweb_...
  • 微信h5支付前端代码 2020-05-25 19:10:16
    一.首先,需要确认是否在微信开通了这个服务,如果开通了,...根据官网解释,前段要做的事情很简单:就是在用户点击微信支付按钮的时候,跳转到后台返回的MWEB_URL即可。 但是,官网说: 注意: 1.需对redirect_url...
  • UniApp H5 微信支付 2020-03-13 11:44:33
    第一步,如果没有集成NPM,建议先集成NPM包管理工具 ...UniApp H5微信支付 第三步,需要在微信公众平台,设置-公众号设置-功能设置-网页授权域名,配置自己的H5域名,作用网页授权获取openId(支付...
  • H5移动端支持微信支付 [ 微信支付分为微信内支付(JSAPI支付官方API)和微信外支付(H5支付官方API)] && 支付宝支付 [手机网站支付转 APP 支付 官方API ] 订单生成逻辑:前端请求后端提交订单,后端去和...
  • 微信支付H5调用支付详解 2018-05-11 11:20:16
    微信公众号支付H5调用支付详解最近项目需要微信支付,然后看了下微信公众号支付,,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验...
  •  微信支付开发文档1.微信支付申请,开通微信商户平台。 2.开发配置,填写服务器地址。 3.在开发电脑上安装证书,用于设置获取商户秘钥。 4.设置获取秘钥。 开始开发 1.用户点击下面页面自动跳转到微信授权链接...
  • JavaEE项目接入H5微信支付WAPJava项目接入H5微信支付开发环境前期准备准备过程申请微信公众平台及微信支付准备内网穿透域名微信支付开发配置撸代码部分重要pom文件前端代码微信支付统一下单Controller支付成功后接收...
  • 微信支付分为以下几步: 官网api地址:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 1,登录的时候,静默获取用户code,再用code获取用户openId,获取code的链接也是由微信提供...
  • vue开发h5简单的微信支付 2019-07-02 09:24:49
    在微信内H5调起微信支付,主要依赖于一个微信的内置对象WeixinJSBridge,这个对象在其他浏览器中无效。 需要有通过后台返回的信息如下: methods: { //支付 payl(){ var that = this; axios .post(baseUrl ...
  • 最近做了一个跟h5支付(其实就是微信h5支付)相关的模块,由于是初次接触,特来分享下,前端h5支付功能这需要处理一些什么,以及遇到的坑点处理   首先,我们应该先了解一下h5支付的相关API:[h5支付文档] ...
  • 之前说过,有时间把微信支付H5支付讲解下,一直拖了半年时间,最近的项目正好又温习了支付功能,趁着热乎,抓紧起来。 微信的H5支付,相对公众号支付,容易了跟多,很多相似的东西,也有不同之处,这里只介绍H5...
  • 背景:前端使用HBuilder打包h5,后端使用java. 首先在微信开放平台注册一个移动应用:https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN 对创建的应用进行一些功能上的申请:由于我使用的是...
1 2 3 4 5 ... 20
收藏数 3,906
精华内容 1,562