前端在h5页面调起微信支付接口和支付宝接口（日常笔记）

最新推荐文章于 2025-05-08 14:39:35 发布

weixin_33991727

最新推荐文章于 2025-05-08 14:39:35 发布

阅读量1.7w

点赞数 3

文章标签：前端 java json ViewUI

原文链接：https://segmentfault.com/a/1190000017796328

版权

本文详细介绍了在H5页面中如何调用微信和支付宝的支付接口。对于微信支付，强调了结合JSAPI支付文档配置，并分为两步：获取后台数据并将其传入onBridgeReady方法。支付宝支付则涉及处理后台返回的form格式数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信支付

结合微信支付的api文档进行配置。参考JSAPI支付开发者文档——微信内H5调起支付

微信文档中的例子如下。

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      } 
   }); 
}
// 下面是兼容不同浏览器绑定事件的方法
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady'