h5端实现调起微信app支付

简介: h5端实现调起微信app支付

在H5端实现调起微信APP支付需要通过一系列步骤,包括配置微信支付、前端调用微信支付接口、生成支付订单、调用支付接口等。下面是详细的步骤和代码示例:

1. 配置微信支付

首先需要在微信支付商户平台上进行配置,获取商户号(MchID)和API密钥(API Key),并且确保已开通支付功能。

2. 前端代码示例

前端代码主要是生成支付订单并调用微信支付接口。这里假设你使用的是Vue.js框架,其他框架类似。

HTML和JavaScript代码:
<!DOCTYPE html>
<html>
<head>
  <title>微信支付</title>
  <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
  <button id="payBtn">微信支付</button>
 
  <script>
    // 微信配置
    wx.config({
      debug: false,
      appId: 'yourAppId', // 必填,公众号的唯一标识
      timestamp: 0, // 必填,生成签名的时间戳
      nonceStr: '', // 必填,生成签名的随机串
      signature: '', // 必填,签名
      jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表
    });
 
    // 获取支付订单参数
    function getPaymentParams() {
      return fetch('https://your-backend-api.com/getPaymentParams', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          orderId: 'yourOrderId'
        })
      })
      .then(response => response.json());
    }
 
    // 调用微信支付
    function invokeWeChatPay(params) {
      wx.chooseWXPay({
        timestamp: params.timestamp, // 支付签名时间戳
        nonceStr: params.nonceStr, // 支付签名随机串,不长于 32 位
        package: params.package, // 统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=***
        signType: params.signType, // 签名类型,默认为'SHA1',使用新版支付需传入'MD5'
        paySign: params.paySign, // 支付签名
        success: function (res) {
          // 支付成功后的回调函数
          alert('支付成功');
        },
        fail: function (res) {
          // 支付失败后的回调函数
          alert('支付失败');
        }
      });
    }
 
    document.getElementById('payBtn').addEventListener('click', function() {
      getPaymentParams().then(params => {
        invokeWeChatPay(params);
      });
    });
  </script>
</body>
</html>
代码说明:

微信配置:使用wx.config方法配置微信JS SDK,包括appId、timestamp、nonceStr和signature等。

获取支付订单参数:通过调用后台接口获取支付订单参数,包括timestamp、nonceStr、package、signType和paySign。

调用微信支付:使用wx.chooseWXPay方法调起微信支付,传入支付订单参数。

3. 后端代码示例

后端代码负责生成支付订单并返回给前端。以下是Node.js的示例代码。

Node.js代码:
const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');
const crypto = require('crypto');
 
const app = express();
app.use(bodyParser.json());
 
const appId = 'yourAppId';
const mchId = 'yourMchId';
const apiKey = 'yourApiKey';
 
// 生成支付订单参数
app.post('/getPaymentParams', (req, res) => {
  const orderId = req.body.orderId;
  
  // 统一下单接口
  const unifiedOrderUrl = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
  
  const nonceStr = crypto.randomBytes(16).toString('hex');
  const timestamp = Math.floor(Date.now() / 1000).toString();
  const body = '商品描述';
  const outTradeNo = orderId;
  const totalFee = 1; // 订单金额,单位为分
  const spbillCreateIp = req.ip;
  const notifyUrl = 'https://your-notify-url.com/pay/notify';
  const tradeType = 'JSAPI';
  const openId = 'yourOpenId'; // 用户的OpenID
 
  // 签名
  const params = {
    appid: appId,
    mch_id: mchId,
    nonce_str: nonceStr,
    body,
    out_trade_no: outTradeNo,
    total_fee: totalFee,
    spbill_create_ip: spbillCreateIp,
    notify_url: notifyUrl,
    trade_type: tradeType,
    openid: openId
  };
  
  const stringA = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&');
  const stringSignTemp = `${stringA}&key=${apiKey}`;
  const sign = crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase();
  
  const formData = `<xml>
    <appid>${appId}</appid>
    <mch_id>${mchId}</mch_id>
    <nonce_str>${nonceStr}</nonce_str>
    <sign>${sign}</sign>
    <body>${body}</body>
    <out_trade_no>${outTradeNo}</out_trade_no>
    <total_fee>${totalFee}</total_fee>
    <spbill_create_ip>${spbillCreateIp}</spbill_create_ip>
    <notify_url>${notifyUrl}</notify_url>
    <trade_type>${tradeType}</trade_type>
    <openid>${openId}</openid>
  </xml>`;
 
  request({
    url: unifiedOrderUrl,
    method: 'POST',
    body: formData
  }, (err, response, body) => {
    if (err) {
      res.status(500).send(err);
    } else {
      // 解析微信返回的XML数据
      const prepayId = /<prepay_id><!\[CDATA\[(.*)\]\]><\/prepay_id>/.exec(body)[1];
      const paySign = crypto.createHash('md5').update(`appId=${appId}&nonceStr=${nonceStr}&package=prepay_id=${prepayId}&signType=MD5&timeStamp=${timestamp}&key=${apiKey}`).digest('hex').toUpperCase();
 
      res.json({
        timestamp,
        nonceStr,
        package: `prepay_id=${prepayId}`,
        signType: 'MD5',
        paySign
      });
    }
  });
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
代码说明:

生成支付订单参数:接收前端传来的订单ID,生成支付订单参数,包括nonceStr、timestamp、outTradeNo、totalFee、spbillCreateIp、notifyUrl、tradeType和openId。

签名:对支付参数进行签名,生成sign。

调用统一下单接口:向微信支付的统一下单接口发送请求,获取prepayId。

返回支付参数:将prepayId、timestamp、nonceStr、package、signType和paySign返回给前端。

4. 回调处理

支付成功后,微信会回调商户服务器的通知URL。商户服务器需要对通知进行处理,并更新订单状态。

Node.js回调处理示例:
const xmlParser = require('express-xml-bodyparser');
 
// 微信支付回调通知
app.post('/pay/notify', xmlParser({trim: false, explicitArray: false}), (req, res) => {
  const xml = req.body.xml;
  
  const params = {
    appid: xml.appid,
    mch_id: xml.mch_id,
    nonce_str: xml.nonce_str,
    result_code: xml.result_code,
    openid: xml.openid,
    total_fee: xml.total_fee,
    out_trade_no: xml.out_trade_no
  };
  
  const stringA = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&');
  const stringSignTemp = `${stringA}&key=${apiKey}`;
  const sign = crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase();
  
  if (sign === xml.sign) {
    // 验签成功,处理业务逻辑
    if (xml.result_code === 'SUCCESS') {
      // 支付成功,更新订单状态
      // TODO: 更新数据库订单状态
      res.send('<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>');
    } else {
      res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[支付失败]]></return_msg></xml>');
   
相关文章
|
1月前
|
缓存 小程序 开发工具
最新原创uniapp+vue3仿微信界面聊天app系统
最新原创研发uniapp+vue3实战跨端仿微信App界面聊天程序。支持运行到H5+小程序+APP端。
126 5
最新原创uniapp+vue3仿微信界面聊天app系统
|
10天前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
2月前
|
存储 人工智能 Android开发
为什么微信发送的APP安装不了,.apk转化为.apk.1
微信发送的APP文件常被改为.apk.1格式导致无法安装,推荐使用夸克或QQ浏览器解决。
214 14
|
2月前
|
移动开发 小程序 开发工具
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
395 0
揭秘微信/支付宝6大支付方式:从扫码到刷脸,谁在偷偷赚你的手续费?优雅草卓伊凡
|
3月前
|
监控 数据可视化 BI
微信计数器统计工具,QQ统计器手机APP,通过autojs实现后台
这是一款基于AutoJS的微信/QQ新增好友监控脚本,具备后台运行、自动统计每日新增好友数量、生成简单报表及定时提醒功能。
|
4月前
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
855 12
|
6月前
|
安全 算法 小程序
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
381 28
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
|
6月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
580 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
6月前
|
小程序
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
445 1
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡

热门文章

最新文章