微信内置浏览器调用微信 JS-SDK 调用微信支付和微信外部浏览器h5支付

最新推荐文章于 2025-03-30 12:15:13 发布
最新推荐文章于 2025-03-30 12:15:13 发布
阅读量1.1k 收藏 14
点赞数 23
分类专栏： node 文章标签： 微信 javascript 前端 node.js 支付 微信支付 jssdk
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chengcheng9876/article/details/144371668
版权

文章目录

1.微信外部浏览器h5支付

‌H5支付是一种移动支付方式‌，具体指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起服务呼起微信客户端进行支付。
h5支付文档

1. h5支付简介

  1. 应用场景
    • H5支付主要用于触屏版的手机浏览器请求微信支付的场景，方便从外部浏览器唤起微信支付。
      ‌使用条件‌
    • 商户需已有H5商城网站，并且该网站已经过ICP备案，才可申请接入H5支付‌
  2. 使用条件
    • 用户从非微信浏览器的站点导航进入商户H5网页，挑选商品并选择微信支付发起购买。
    • 进入微信客户端确认交易并输入支付密码。
    • 支付成功后，用户收到支付凭证，商户后台同时收到支付成功的通知‌。
  3. 注意事项
    • H5支付不建议在APP端使用。如需在APP中使用微信支付，建议接入APP支付‌。
    • 使用H5支付时，需确保网络环境稳定，避免因网络变动导致支付失败‌
  4. 时序图
    在这里插入图片描述

2. h5支付步骤

  1. 订单生成逻辑‌：前端根据商品信息配合后端调用接口，后端返回跳转URL。前端判断浏览器类型，如果是微信外浏览器则直接跳转打开微信支付页面。‌
  2. 开发前准备‌：需要开通微信支付商户功能，并在微信支付平台配置相关信息。订单提交后，系统会返回一个跳转URL，前端根据这个URL进行跳转，从而拉起微信支付页面。
  3. ‌支付链接的使用‌：H5支付链接支持多种远程收款方式，包括聚合收款码识别、JS浏览器付款和Nat跳转，用户通过点击链接、输入金额和选择支付方式来完成在线收款

3. h5支付实现

  1. 判断支付环境
    function isWeixin() {
var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    } else {
        return false;
    }
}
  2. 写一个点击事件，调起后来的请求方法。
  3. 由商户后台向微信支付发起下单请求（调用统一下单接口）注：交易类型trade_type=MWEB
    const express = require('express')
const tenpay = require('tenpay');
const siteConfig = require('./payConfig.js');
const path = require('path');
const md5 = require('md5');
const app = express()
const port = 8001
console.log(md5('template1'))
app.use(express.static('public'))

app.engine('html', require('express-art-template'));
app.set('view options', {
    debug: process.env.NODE_ENV !== 'production'
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
// 引用商户信息
const config = {
    appid: siteConfig.appid,
    mchid: siteConfig.mchid,
    partnerKey: siteConfig.partnerKey,
    notify_url: 'https://baidu.com/notify', // 买家成功支付后，微信系统通知商户后台系统的url地址 一般在这个里面去更改用户的订单的状态为 已支付 此处是随便写的
    spbill_create_ip: '106.52.75.114', // 设备ip
};

// 调试模式(传入第二个参数为true, 可在控制台输出数据)
const api = new tenpay(config, true);
app.get('/h5/buy', async (req, res) => {
    /*
    * 后端统一下单需要调用微信支付的 统一下单的api，然后返回一个 mweb_url
    * 如支付跳转url（参数名“mweb_url”），商户通过mweb_url调起微信支付中间页
    * */
    let goodsId = Date.now().toString();

    let trade_no =md5(Math.random() + goodsId);
	
    let result = await api.unifiedOrder({
        out_trade_no: trade_no,
        body: '微信H5端支付测试',
        total_fee: '1', // 单位是分 1代表1分钱
        // openid: '用户openid' // 微信小程序支付或者是微信公众号网页支付的时候要 openid 相当于是买家用户的微信号
        // https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=9_20&index=1
        trade_type: 'MWEB', // 使用统一下单API可直接获取code_url, 需自行生成二维码图片
        product_id: goodsId,

    });
    console.log(result);
    res.render('h5', {mweb_url: result.mweb_url});
})
app.listen(port, () => {
    console.log(`pay app listening on port ${port}`)
})

    <!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5 端扫码微信支付</title>
</head>
<body>
    <h2>H5 端微信支付</h2>

    <p>对于H5支付，调用统一下单接口后，返回的是一个 url地址，只需要买家通过点击这个 a 链接，即可唤起微信支付</p>
    <form action="http://127.0.0.1:8001/h5/buy" method="get">
        <input type="submit" value="微信h5支付">
    </form> 
   
    <a href="{{mweb_url}}">微信支付</a>
</body>
</html>
    在这里插入图片描述
    在这里插入图片描述
    点击微信支付
    在这里插入图片描述
    点击立即支付，输入付款密码，支付成功，用户收到支付凭证，同时商户后台收到支付成功的通知。

2. 微信 JS-SDK 调用微信支付

如果要在微信的内部打开网页做支付，则需要使用 js-sdk 进行开发。
js-sdk 可以使得我们开发的网页具有原生 app 调用底层 api 的能力，例如 扫二维码。

  1. 微信 JS-SDK 是微信官方提供的一个 JavaScript 软件开发工具包，它允许开发者在微信内置浏览器中调用微信的各种原生功能，
  2. 微信支付。通过微信 JS-SDK 调用微信支付，可以实现用户在微信内完成支付流程，无需跳转到其他应用或页面，从而大大提升用户体验。
  3. 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
    时序图
    在这里插入图片描述

1.前端步骤

  • ‌引入微信 JS-SDK

    在 HTML 页面中引入微信 JS-SDK 的脚本文件。通常，你需要从微信的官方服务器下载这个文件，或者通过 CDN 链接引入。

  • 配置微信 JS-SDK‌

    在引入 JS-SDK 后，你需要使用 wx.config 方法来配置 SDK。通常包括设置 appId（公众号的唯一标识）、timestamp（生成签名的时间戳）、nonceStr（生成签名的随机串）、signature（签名）等参数。这些参数通常由后端服务器生成，并传递给前端页面。

  • 调用微信支付接口

    配置完成后，可以使用 wx.chooseWXPay 方法来调用微信支付。wx.chooseWXPay 方法需要传入一个包含支付相关信息的对象，如 appId、timestamp、nonceStr、package（订单详情扩展字符串）、signType（签名方式）和 paySign（签名）等。这些信息同样由后端服务器生成，并基于微信的支付接口进行签名和加密。

  • 处理支付结果

    支付完成后，微信会返回一个支付结果给前端页面。可以通过监听 wx.chooseWXPay 方法的回调函数来处理这个结果，比如显示支付成功或失败的提示信息，或者根据支付结果进行相应的页面跳转。

  • 注意

    • 使用微信 JS-SDK 调用微信支付需要你的公众号或小程序已经通过了微信支付的认证，并且你已经获得了相应的支付权限和密钥。此外，为了保障支付安全，所有的支付信息都应该通过后端服务器进行加密和签名，而不是直接在前端页面中进行处理。
    • 微信 JS-SDK 的具体使用方法和参数可能会随着微信版本的更新而发生变化
    <!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>JSSDK开发</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h2>JSSDK开发</h2>

    <button id="btn">扫一扫</button>
    <button id="payBtn">微信内部网页支付</button>
    <div id="cnt"></div>
    <div id="payCnt"></div>

</body>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{{sign.appId}}', // 必填，公众号的唯一标识
        timestamp: {{sign.timestamp}}, // 必填，生成签名的时间戳
        nonceStr: '{{sign.nonceStr}}', // 必填，生成签名的随机串
        signature: '{{sign.signature}}',// 必填，签名
        jsApiList: ['scanQRCode', 'chooseWXPay'] // 必填，需要使用的JS接口列表
    });

    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

        document.getElementById('btn').onclick = function () {
            wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    document.getElementById('cnt').innerText = JSON.stringify(res);
                }
            })
        }

        document.getElementById('payBtn').onclick = function () {
            wx.chooseWXPay({
                timestamp: {{result.timeStamp}}, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: '{{result.nonceStr}}', // 支付签名随机串，不长于 32 位
                package: '{{result.package}}', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: '{{result.signType}}', // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
                paySign: '{{result.paySign}}', // 支付签名
                success: function (res) {
                    // 支付成功后的回调函数
                    document.getElementById('payCnt').innerText = JSON.stringify(res);
                }
            });
        }

    })
</script>
</html>

2.后端实现步骤

  1. 获取微信JSSDK支付参数
    获取微信JSSDK支付参数(自动下单, 兼容小程序)

    let result = await api.getPayParams({
  out_trade_no: '商户内部订单号',
  body: '商品简单描述',
  total_fee: '订单金额(分)',
  openid: '付款用户的openid'
});

    const express = require('express')
const tenpay = require('tenpay');
const siteConfig = require('./payConfig.js');
const path = require('path');
const md5 = require('md5');
const axios = require('axios');
const wxJssdkConfigSign = require('wx-jssdk-configsign')

const app = express()
const port = 8001
console.log(md5('template1'))
app.use(express.static('public'))

app.engine('html', require('express-art-template'));
app.set('view options', {
    debug: process.env.NODE_ENV !== 'production'
});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

const config = {
    appid: siteConfig.appid,
    mchid: siteConfig.mchid,
    partnerKey: siteConfig.partnerKey,
    notify_url: 'https://api.52kfw.cn/notify', // 买家成功支付后，微信系统通知商户后台系统的url地址 一般在这个里面去更改用户的订单的状态为 已支付
    spbill_create_ip: '106.52.75.114'
};

// 调试模式(传入第二个参数为true, 可在控制台输出数据)
const api = new tenpay(config, true);

app.get('/jssdk', async (req, res)=>{
    /*
    * https://cli.im/text
    * 1. jssdk 开发必须先生成前端的 jssdk 的签名信息
    * https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
    * 2. 先要拿到 ticket
    * 3。 如果要拿到ticket，则需要先拿到 access_token
    * https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
    *
    * */
    let appid = siteConfig.appid;
    let secret = siteConfig.appsecret;

    let access_token_url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`;

    let response = await axios.get(access_token_url);
    // console.log(response);
    let {access_token} = response.data;
    let ticket_url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`;

    let response1 = await axios.get(ticket_url);
    // console.log(response1.data);
    let { ticket }= response1.data;
    let url = 'https://baidu.com/jssdk'; // 回调url， 此处是假数据
    let sign = wxJssdkConfigSign({ticket, url, appid});
    console.log(sign);
    let openid = 'o2-ssssssssssssssssssssssssss'; // 购买者的微信openId， 此处是假数据
    let goodsId = Date.now().toString(); // 此处是假数据
    let trade_no =md5(Math.random() + goodsId);

    let result = await api.getPayParams({
        out_trade_no: trade_no,
        body: '微信内部的网页支付',
        total_fee: '1',
        openid: openid,
    });

    console.log(result, 'result');


    res.render('jssdk', {sign, result});
})

/*
* 获取用户的openid
* */
app.get('/openid', async (req, res)=>{

    let appid = siteConfig.appid;
    let redirect_url = `https://api.52kfw.cn/getopenid`;
    // 用户点击 获取openid 之后，然后会重定向到我们的 redirect_url 然后携带一个 code
    let state = md5(Math.random());

    res.render('openid', {appid, redirect_url, state});

})
app.listen(port, () => {
    console.log(`pay app listening on port ${port}`)
})

    console.log(sign);打印结果

JsSdk调用微信支付避坑
Winsom1的博客
11-02 574
1、首先要依赖微信js-sdk npm install weixin-js-sdk --save 2、封装代码 weixinPay.js: import wx from 'weixin-js-sdk' export default function wexinPay(data) { return new Promise((resolve, reject) => { // 后台传入数据 const { appId, nonceStr, p
微信支付-使用微信JSSDK完成微信支付(微信公众号支付)
王二的博客
08-24 2622
使用微信JSSDK完成微信支付。
微信jsapi支付流程及代码
最新发布
weixin_46119253的博客
03-30 1003
支付需要分两个请求来完成：第一个请求：预支付（承诺）第二个请求：支付（兑现）实际中，在小程序端编写代码，拿到第一次的响应后再发起第二次请求，用户无感。
微信浏览器调用微信支付页面JSAPI
qq_36189997的博客
12-21 816
2，没有scope权限的错误，错误码10005，appId和secret不是微信开放平台，是微信公众号的。4，获取code时，会有报跨域问题，是因为通过ajax请求的，会出现这个问题，用了a标签之后就没有了。申请secret,登录微信公众平台 设置与开发-》基本配置。3，url没有注册，第二步 JSAPI授权目录是否写对。### 5,申请获取code。1，JSAPI调起支付签名报错。这几个保持一致，都是md5。这里只填写域名就可以了。
微信H5支付--微信JS-SDK支付--点金计划
一点一木
11-02 1388
本文详细介绍了微信H5支付和JS-SDK支付的原理、配置和开发流程，涵盖了H5支付在移动端浏览器外唤起微信支付的细节，以及JS-SDK支付在微信内置浏览器中完成支付的相关注意事项。文章还针对微信支付常见问题，提供了解决方案和代码示例。最后，文章深入解析了微信支付点金计划，包括商家小票的自定义开发、API接口以及支付成功后的页面展示逻辑，为开发者提供了完整的开发参考。
微信浏览器调用微信支付完整流程
weixin_56521599的博客
06-12 1240
【代码】微信浏览器调用微信支付完整流程。
Js微信公众号引JS-SDK调起微信支付
明知山
10-07 1186
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> //后台返回的配置数据 wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时...
微信支付jssdk
岁月如歌去，十年弹指间
05-10 1339
地址：h5对接微信支付分jssdk支付分并调用开启支付分页面 - 王洪洪 - 博客园 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://res.wx.qq.com/open/js/jweixin-1.5.0.js"></script
微信JS-SDK调用扫一扫功能的DEMO
07-23
如何在H5页面调用微信的扫一扫功能来识别二维码。简单实用，新手开发必备，开发微信网页应用，调用JS-SDK扫一扫二维码
手机浏览器调用微信H5支付源码
08-10
以下是对这套手机浏览器调用微信H5支付源码的详细说明： 1. **支付流程**： 微信H5支付的流程大致包括以下几个步骤：商户服务器生成预支付订单、获取预支付交易会话标识（prepay_id）、前端展示支付页面、用户确认...
Node.js结合uni-app对微信公众号网页开发中的JS-SDK权限验证配置
china-quanda
09-09 1473
不管是微信公众号h5开发，还是微信小程序开发，前端总是要依赖后端去完成各种调试。比如微信授权登录，再比如微信 JS-SDK 的使用需要后端获取signature，而这个签名是通过后端服务器来生成的。 话说求人不如求己，所以今天带大家来介绍如何使用 Node.js 实现微信公众号的 JSSDK 调用。
微支付 微信支付 JS-SDK 调用微信支付接口 JAVA
01-21
JS-SDK调用微信支付接口 JAVA版.流程是先注入权限验证config配置再调微信支付接口.请务必看清楚每个需要传的参数我后面写的注释.别问些什么APPID错误MCHID错误的问题
微信支付 jssdk 微支付
02-05
微信在2015年后发布的微信支付 jssdk功能 最新的功能的DEMO
微信支付如何实现内置浏览器的H5页面支付
09-03
主要介绍了微信支付如何实现内置浏览器的H5页面支付的相关资料,需要的朋友可以参考下
微信支付JS-SDK调用微信支付接口 JAVA
05-31
微信支付JS-SDK调用微信支付接口 JAVA
jqweui js 唤醒微信支付
03-28
jqweui js 唤醒微信支付的一个简单demo，修改对应的域名appid，接口就可以唤醒。
h5接微信js-sdk的详细步骤
weixin_45291798的博客
09-12 9361
h5页面接入js-sdk
微信开发之JS-SDK实现录音、语音识别
04-26
1.JS安全域名配置：登陆微信公众平台：公众号设置 -> 功能设置 -> JS安全域名，域名写到根域名就行，把下载的txt文件放到域名对应的根目录下 2.配置ip白名单 二、微信接口 用到了'startRecord', 'stopRecord', '...
js调用微信支付
qq_41293573的博客
12-09 3305
公众微信号调起微信支付的时候，有的时候调起支付成功，有的时候调起支付失败。利用抓包工具抓取数据显示授权和调用后台的微信预支付订单接口都成功并且都返回正确的数据。但是调起支付的时候传入的data老是弹出{‘isTrusted:false’}，正常的data应该是调用生成预支付订单的返回数据，即后台给返回的调起微信支付所需要的数据参数。我的代码： <script src="./js/jquery.js"></script> <script src="http://res2.wx.q
python调用微信支付接口
10-05
要使用Python调用微信支付接口，首先需要安装并导入相关的Python库。常用的库有requests、xmltodict等。 首先，需要在微信支付官方网站申请并获取到支付接口的API密钥、APPID等信息。然后，使用requests库发送HTTPS请求，并在请求头中添加必要的信息，如用户的API密钥、签名类型、请求方法等。 在请求的主体部分，需要构建符合微信支付接口要求的XML格式的数据，包括必要的参数如商户订单号、总金额、商品描述等。可以使用xmltodict库将数据转换为XML格式，并将其作为请求的主体发送。 接下来，需要对请求的数据进行签名处理。微信支付接口要求对请求的参数进行MD5签名或者HMAC-SHA256签名。可以使用hashlib库计算MD5或HMAC-SHA256签名，并将签名结果添加到请求的参数中。 然后，将请求的数据发送到微信支付接口的URL。接收到响应后，需要对响应进行相应的处理，如判断响应的状态码、对返回的XML格式数据进行解析等。 最后，根据微信支付接口返回的结果，可以进行相应的业务逻辑处理。例如，判断支付是否成功、更新订单的状态等。 需要注意的是，在调用微信支付接口时要保证请求的安全性，如使用HTTPS协议、对请求的数据进行加密等。同时，还要遵循微信支付接口的相关规范，如接口版本的要求、接口参数的格式要求等。 总结起来，Python调用微信支付接口的过程主要包括：获取接口信息、构建请求数据、对请求数据进行签名处理、发送请求、处理响应、处理支付结果等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程楠楠&M

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值