js微信扫码支付代码

微信扫码支付是一种便捷的在线支付方式，用户通过扫描商户提供的二维码来完成支付。以下是实现微信扫码支付的基本概念和相关代码示例。

基础概念

微信支付API：微信提供了一套完整的支付接口，商户可以通过这些接口生成支付二维码并处理支付结果。
统一下单接口：商户系统需要调用微信支付的统一下单接口来生成预支付交易会话标识（prepay_id）。
支付二维码：通过prepay_id生成的二维码，用户扫描后即可进行支付。
支付结果通知：支付完成后，微信服务器会异步通知商户服务器支付结果。

优势

便捷性：用户无需安装额外应用，直接使用微信扫描即可完成支付。
安全性：微信支付提供了多重安全保障，包括数据加密、风险监控等。
普及度高：微信用户基数庞大，支付方式被广泛接受。

类型

静态二维码支付：适用于固定金额和固定商品的场景。
动态二维码支付：适用于金额不固定或商品多样的场景。

应用场景

线上商城：用户选购商品后，通过扫描二维码完成支付。
线下门店：顾客在店内通过扫描桌上的二维码进行点餐或支付。

示例代码

以下是一个简单的JavaScript示例，展示如何调用微信支付的统一下单接口并生成支付二维码。

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信扫码支付</title>
</head>
<body>
    <button id="payButton">立即支付</button>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.getElementById('payButton').addEventListener('click', function() {
            axios.post('/api/createPayOrder', { amount: 100 })
                .then(response => {
                    const qrCodeUrl = response.data.qrCodeUrl;
                    // 这里可以使用第三方库生成二维码，例如qrcode.js
                    console.log('支付二维码URL:', qrCodeUrl);
                })
                .catch(error => {
                    console.error('创建订单失败:', error);
                });
        });
    </script>
</body>
</html>

后端代码（Node.js示例）

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

app.use(express.json());

app.post('/api/createPayOrder', async (req, res) => {
    const { amount } = req.body;
    try {
        // 调用微信支付统一下单接口
        const response = await axios.post('https://api.weixin.qq.com/pay/unifiedorder', {
            appid: 'YOUR_APP_ID',
            mch_id: 'YOUR_MERCHANT_ID',
            nonce_str: generateNonceStr(),
            body: 'Test Payment',
            out_trade_no: generateOutTradeNo(),
            total_fee: amount,
            spbill_create_ip: '127.0.0.1',
            notify_url: 'YOUR_NOTIFY_URL',
            trade_type: 'NATIVE'
        }, {
            headers: {
                'Content-Type': 'application/xml'
            }
        });

        const prepayId = parseResponseXml(response.data).prepay_id;
        const qrCodeUrl = `weixin://wxpay/bizpayurl?pr=${prepayId}`;

        res.json({ qrCodeUrl });
    } catch (error) {
        res.status(500).json({ error: '创建订单失败' });
    }
});

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

function generateOutTradeNo() {
    return Date.now().toString() + Math.floor(Math.random() * 1000).toString();
}

function parseResponseXml(xml) {
    // 解析XML响应的逻辑
    // 这里可以使用第三方库如xml2js
    return { prepay_id: '123456789' }; // 示例返回
}

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