js 打开微信支付

要在 JavaScript 中实现微信支付功能，通常需要后端的支持来生成预支付订单并获取必要的支付参数。以下是实现微信支付的基本步骤和相关概念：

基本概念

统一下单接口：这是微信支付提供给商户的接口，用于创建预支付订单。
支付参数：包括 appId、timeStamp、nonceStr、package、signType 和 paySign 等。
回调通知：支付完成后，微信会向商户服务器发送支付结果通知。

实现步骤

后端生成预支付订单：
- 调用微信支付的统一下单接口，传入必要的参数（如商品描述、金额、用户标识等）。
- 获取返回的预支付交易会话标识 prepay_id。

前端调用支付接口：
- 后端将 prepay_id 和其他必要参数生成签名，返回给前端。
- 前端使用这些参数调用微信的支付接口。

示例代码

以下是一个简化的示例，展示前端如何调用微信支付：

后端（Node.js 示例）

const express = require('express');
const axios = require('axios');
const crypto = require('crypto');
const app = express();

app.post('/create-order', async (req, res) => {
  const { body } = req;
  const nonceStr = generateNonceStr();
  const timeStamp = Math.floor(Date.now() / 1000).toString();
  const packageValue = 'prepay_id=wx201411102639507cbf6ffd8b077995087';
  const signType = 'MD5';

  const sign = generateSign({
    appId: 'wx8888888888888888',
    timeStamp,
    nonceStr,
    package: packageValue,
    signType
  });

  res.json({
    appId: 'wx8888888888888888',
    timeStamp,
    nonceStr,
    package: packageValue,
    signType,
    paySign: sign
  });
});

function generateNonceStr() {
  return Math.random().toString(36).substr(2, 15);
}

function generateSign(params) {
  const stringA = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&');
  const stringSignTemp = `${stringA}&key=YOUR_API_KEY`;
  return crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase();
}

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

前端（JavaScript 示例）

function onBridgeReady() {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      "appId": "wx8888888888888888",     // 公众号名称，由商户传入
      "timeStamp": "1414561699",         // 时间戳，自1970年以来的秒数
      "nonceStr": "e61463f8efa894290b1f366cccfbbb44", // 随机串
      "package": "prepay_id=wx201411102639507cbf6ffd8b077995087",
      "signType": "MD5",                 // 微信签名方式
      "paySign": "70EA570631E4BB79628FBCA90534C63FF7FADD89" // 微信签名
    },
    function(res) {
      if (res.err_msg == "get_brand_wcpay_request:ok" ) {
        // 支付成功
      } else {
        // 支付失败
      }
    }
  );
}

if (typeof WeixinJSBridge == "undefined") {
  if (document.addEventListener) {
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  } else if (document.attachEvent) {
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  }
} else {
  onBridgeReady();
}