前端调用微信支付接口

支付按钮的点击事件

$(´.Save_Patient_Msg´).click(function(){
    $(´.Save_Patient_Msg´).offclick´);
    var hrdfId = getOrderId();
    var txnAmt = $(´.sum_pay.font-red´).html(); 
     
    var data = {orderId: hrdfId, txnAmt: "0.01", 
        prodDesc: "远程诊断服务", callType: "JSAPI",
        access_token: getUrlParam("access_token")
    };

    $.ajax({
        type: ´POST´,
        url: ´/hims/api/commonPay/queryTransNo?access_token getUrlParamaccess_token´),
        dataTypejson´,
        contentTypeapplication/json´,
        data: JSON.stringify(data),
        success: function(Wxres){
          if(!Wxres){
            $.alert(´服务器拥堵,请稍后访问´)
          }else{
              console.log(Wxres);
              if(Wxres.data.respCode == ´fail´){
                $.alert(Wxres.data.respMsg);
              }else{
                 //10 微信支付接口
                    // 10.1 发起一个支付请求
                    // 注意:此 Demo 使用 2.7 版本支付接口实现,建议使用此接口时参考微信支付相关最新文档。
                    var param = Wxres.data;
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                        appId: ´wx403ead26691402fb´, // 必填,公众号的唯一标识
                        timestamp: param.timestamp, // 必填,生成签名的时间戳
                        nonceStr: param.noncestr, // 必填,生成签名的随机串
                        signature: param.signJs,// 必填,调用js签名,
                        jsApiList: chooseWXPay´] // 必填,需要使用的JS接口列表,这里只写支付的
                    });
                    wx.chooseWXPay({
                        timestamp: param.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: param.noncestr, // 支付签名随机串,不长于 32 位
                        package: "prepay_id=" param.transNo, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
                        signType: "MD5", // 签名方式,默认为´SHA1´,使用新版支付需传入´MD5´
                        paySign: param.sign, // 支付签名
                        success: function (res) {
                            if(res.errMsg == "chooseWXPay:ok"){
                                //alert("支付成功");
                                window.location.href  = "/hims/weixin/pages/Order_ok.html?access_token=" getUrlParam("access_token");
                            }else{
                                alert(res.errMsg);
                            }
                        },
                        cancel: function(res){
                            //alert(´取消支付´);
                        }
                    });
                }
            }   
        },
        error:function(data){
            var msg =  data.message || data.status;
            $.alert(´服务器错误´ msg);
        }
    });   
    return false;

});

获取url代码

function getUrlParam(name){
    //构造一个含有目标参数的正则表达式对象
    var reg = new RegExp("(^|&)"  name  "=([^&]*)(&|$)");
    //匹配目标参数
    var r = window.location.search.substr(1).match(reg);
    //返回参数值
    if (r!=null) return unescape(r[2]); return null;
} 

### 如何在 UniApp 中实现微信支付功能 #### 获取微信支付参数 为了能够顺利调用微信支付接口,在客户端请求之前,服务端需准备一系列必要的支付参数。这些参数包括 `appId`、`timeStamp`、`nonceStr`、`package`、`signType` 和 `paySign` 等[^1]。 #### 编写 PHP 后端代码来获取签名 假设已经在微信公众平台上完成了相应的配置并获得了 API 密钥和商户号,则可以通过如下方式构建用于生成预支付交易单以及最终签名的 PHP 逻辑: ```php <?php // 这里省略了部分初始化设置... $unified_order = new WxPayUnifiedOrder(); $unified_order->SetBody("test"); $unified_order->SetOut_trade_no($out_trade_no); $unified_order->SetTotal_fee($total_fee * 100); // 单位转换成分为整数形式 $unified_order->SetTrade_type("JSAPI"); // JSAPI 类型代表公众号内支付 $unified_order->SetOpenid($openid); $result = $wxpay->unifiedOrder($unified_order); if ($result['return_code'] === 'SUCCESS') { // 成功返回的数据结构体中包含了 prepay_id 字段, 接下来可以用来创建前端所需数据包. } ?> ``` #### 前端调用 uni.requestPayment 方法完成支付流程 当从服务器接收到上述提到的各项参数之后,就可以通过 `uni.requestPayment()` 来发起实际的支付操作了。下面给出一段简单的 JavaScript 实现例子: ```javascript const payParams = { /* 支付参数对象 */ }; uni.request({ url: '/your-server-endpoint', // 替换成自己的后端地址 method: 'POST', data: {}, success(res) { const paymentInfo = res.data; uni.requestPayment({ provider: 'weixin', orderInfo: JSON.stringify(paymentInfo), success(payRes) { console.log('支付成功:', payRes); // 处理支付成功的场景 }, fail(err) { console.error('支付失败:', err); // 显示错误信息给用户查看 } }); } }); ``` #### 结果反馈与用户体验优化 最后一步是对整个过程的结果做出响应——无论是正面还是负面的情况都应该给予清晰明了的信息告知用户当前的状态;比如弹窗通知他们支付是否顺利完成等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值