js唤醒微信h5支付

JavaScript唤醒微信H5支付的教程

随着移动端的普及，移动支付已经成为了支付领域的热门话题，而微信支付作为移动支付的先锋，更是备受用户、商家的喜爱和青睐。在H5页面上如何唤醒微信支付呢？本文将从以下几个方面进行介绍：

1. 准备工作

开通微信商户，必须先开通微信商户，包括企业、个体户和小程序，每一个账号只能开通一个微信商户。

入驻成为商户，需要将营业执照、身份证、银行账户等基本信息在线提交进行审核。

登录商户平台，进入产品中心，在我的产品中申请H5支付，申请开通H5支付需要提供支付域名，并需要提供营业范围等相关信息，并在补充材料中提交域名证书和授权书。

2. 配置支付请求参数

在H5支付页面代码中引入WeixinJSBridge.js文件，然后定义支付请求参数

```javascript

var reqParam = /**请求参数**/；

```

其中请求参数要求：

1）公众账号ID（必填）

2）商户号（必填）

3）用户openid（必填）

4）订单号（必填）

5）支付金额，以分为单位（必填）

6）支付方式（不必填，如果不填则默认为微信支付）

7）页面跳转地址（必填）

3. 调用微信支付接口

在支付按钮的点击事件中，使用下述代码唤醒微信支付：

```javascript

if(typeof WeixinJSBridge == "undefined"){

if(document.addEventListener){

document.addEventListener('WeixinJSBridgeReady', callpay, false);

}else if(document.attachEvent){

document.attachEvent('WeixinJSBridgeReady', callpay);

document.attachEvent('onWeixinJSBridgeReady', callpay);

}

}else{

callpay();

}

function callpay(){

WeixinJSBridge.invoke(

'getBrandWCPayRequest',

reqParam,

function(res){

if(res.err_msg == "get_brand_wcpay_request:ok"){

// 支付成功，处理相关的业务逻辑

}

}

);

}

```

其中，需要注意的是，调用微信支付接口的前提是要先进行JS的异步加载，判断是否支持WeixinJSBridge对象，只有在有WeixinJSBridge对象的情况下才能正常进行唤醒微信支付的操作。

以上就是关于在H5页面上唤醒微信支付的详细流程，对于网易云音乐、饿了么、美团外卖等大型的移动端应用，都采用了此种方式来完成移动支付，可见其深受用户和商家的欢迎和认可。