PC端扫码实现微信支付

在PC端实现微信支付的流程主要包括以下步骤:

  1. 商户服务器生成微信支付订单,并获取支付二维码。
  2. 用户扫描二维码,进入微信支付页面。
  3. 用户在微信中完成支付。
  4. 微信服务器通知商户支付结果。

以下是实现微信支付的详细步骤和代码示例:

步骤一:生成微信支付订单

首先,需要在微信支付商户平台申请支付权限,并获取商户号、AppID和密钥。然后,通过调用微信支付统一下单接口生成支付订单。

import requests
import hashlib
import xml.etree.ElementTree as ET

# 微信支付配置
appid = 'your_appid'  # 微信支付AppID
mch_id = 'your_mch_id'  # 商户号
key = 'your_api_key'  # API密钥
notify_url = 'your_notify_url'  # 支付结果通知地址

def generate_nonce_str():
    """生成随机字符串"""
    import random
    import string
    return ''.join(random.sample(string.ascii_letters + string.digits, 32))

def sign(data, key):
    """生成签名"""
    stringA = '&'.join([f"{k}={v}" for k, v in sorted(data.items()) if v])
    stringSignTemp = f"{stringA}&key={key}"
    return hashlib.md5(stringSignTemp.encode('utf-8')).hexdigest().upper()

def unified_order(out_trade_no, total_fee, body, spbill_create_ip):
    """调用微信统一下单接口生成支付订单"""
    url = 'https://api.mch.weixin.qq.com/pay/unifiedorder'
    data = {
        'appid': appid,
        'mch_id': mch_id,
        'nonce_str': generate_nonce_str(),
        'body': body,
        'out_trade_no': out_trade_no,
        'total_fee': total_fee,
        'spbill_create_ip': spbill_create_ip,
        'notify_url': notify_url,
        'trade_type': 'NATIVE'
    }
    data['sign'] = sign(data, key)
    
    xml = '<xml>'
    for k, v in data.items():
        xml += f'<{k}>{v}</{k}>'
    xml += '</xml>'
    
    response = requests.post(url, data=xml)
    root = ET.fromstring(response.content)
    
    if root.find('return_code').text == 'SUCCESS' and root.find('result_code').text == 'SUCCESS':
        return root.find('code_url').text
    else:
        raise Exception(f"Error: {root.find('return_msg').text}")

# 示例调用
out_trade_no = '20230718001'  # 商户订单号
total_fee = 1  # 订单金额,单位为分
body = 'Test Order'  # 商品描述
spbill_create_ip = '127.0.0.1'  # 终端IP

try:
    code_url = unified_order(out_trade_no, total_fee, body, spbill_create_ip)
    print(f"Scan the QR code to pay: {code_url}")
except Exception as e:
 

在上述代码中,我们通过调用微信支付统一下单接口生成支付订单,并返回支付二维码的URL。商户可以使用这个URL生成二维码并展示给用户,用户扫码后可以在微信中进行支付。

步骤二:生成支付二维码

通过生成的支付二维码URL,我们可以生成二维码图片,并展示给用户。可以使用 qrcode 库来生成二维码。

import qrcode

def generate_qr_code(data, file_path):
    """生成二维码图片"""
    qr = qrcode.QRCode(
        version=1,
        error_correction=qrcode.constants.ERROR_CORRECT_L,
        box_size=10,
        border=4,
    )
    qr.add_data(data)
    qr.make(fit=True)

    img = qr.make_image(fill='black', back_color='white')
    img.save(file_path)

# 示例调用
file_path = 'pay_qr_code.png'
generate_qr_code(code_url, file_path)
print(f"QR code saved to {file_path}")

在上述代码中,我们使用 qrcode 库生成支付二维码图片,并保存到本地文件中。

步骤三:支付结果通知

用户在微信中完成支付后,微信服务器会通过商户在下单时提供的 notify_url 地址通知商户支付结果。商户需要实现支付结果通知的处理逻辑。

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/notify', methods=['POST'])
def notify():
    xml_data = request.data
    root = ET.fromstring(xml_data)
    
    # 获取微信返回的数据
    out_trade_no = root.find('out_trade_no').text
    result_code = root.find('result_code').text
    return_code = root.find('return_code').text
    total_fee = root.find('total_fee').text
    
    if return_code == 'SUCCESS' and result_code == 'SUCCESS':
        # 处理支付成功的逻辑,例如更新订单状态
        print(f"Order {out_trade_no} paid successfully, total fee: {total_fee}")
        
        response_data = {
            'return_code': 'SUCCESS',
            'return_msg': 'OK'
        }
    else:
        # 处理支付失败的逻辑
        print(f"Order {out_trade_no} payment failed")
        
        response_data = {
            'return_code': 'FAIL',
            'return_msg': 'Payment Failed'
        }
    
    response_xml = '<xml>'
    for k, v in response_data.items():
        response_xml += f'<{k}>{v}</{k}>'
    response_xml += '</xml>'
    
    return response_xml

if __name__ == '__main__':
    app.run(port=5000)

在上述代码中,我们使用 Flask 框架实现了支付结果通知的处理逻辑。当微信服务器通知支付结果时,我们解析通知数据,并根据支付结果处理相应的业务逻辑,例如更新订单状态。

总结

通过以上步骤,我们实现了PC端扫码支付的完整流程,包括生成支付订单、生成支付二维码以及处理支付结果通知。在实际应用中,可以根据业务需求进一步完善和优化代码逻辑。

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue PC端页面实现微信扫码支付,你需要使用微信支付的 Native 支付模式。具体步骤如下: 1. 向服务器获取支付二维码链接:你需要向服务器发送请求,获取支付二维码的链接。 2. 生成支付二维码:你可以使用第三方库 `qrcode` 来生成支付二维码,并将生成的二维码显示在页面上。 ```javascript import QRCode from 'qrcode' export default { data() { return { qrCodeUrl: '' // 存储二维码链接 } }, mounted() { this.getPayQrCode() }, methods: { getPayQrCode() { // 向服务器获取支付二维码链接 axios.get('/api/getPayQrCode') .then(res => { const qrCodeUrl = res.data.qrCodeUrl // 生成二维码 QRCode.toDataURL(qrCodeUrl, { errorCorrectionLevel: 'H', margin: 1 }) .then(dataUrl => { this.qrCodeUrl = dataUrl }) .catch(err => { console.error(err) }) }) .catch(err => { console.error(err) }) } } } ``` 以上代码中,`getPayQrCode` 方法向服务器获取支付二维码链接,然后使用 `qrcode` 库生成二维码,并将二维码链接存储在 `qrCodeUrl` 变量中,你可以将该变量绑定到一个 `img` 标签上来显示二维码。 3. 轮询支付状态:使用轮询的方式来查询支付状态,如果支付成功,则弹出支付成功的提示框。 ```javascript checkPayStatus() { setInterval(() => { axios.get('/api/checkPayStatus') .then(res => { const status = res.data.status if (status === 'success') { // 支付成功 this.showPaySuccess() } }) .catch(err => { console.error(err) }) }, 3000) }, showPaySuccess() { // 弹出支付成功的提示框 alert('支付成功!') } ``` 以上代码中,`checkPayStatus` 方法使用轮询的方式查询支付状态,每隔 3 秒发送一次请求,如果支付成功,则调用 `showPaySuccess` 方法弹出支付成功的提示框。 4. 调起微信扫码支付界面:在支付成功后,你需要调用微信扫码支付界面,在微信扫描支付二维码后完成支付。 ```javascript startNativePay() { const qrCodeUrl = '支付二维码的链接' const userAgent = window.navigator.userAgent.toLowerCase() if (userAgent.indexOf('micromessenger') === -1) { // 不在微信中,跳转到支付链接 window.location.href = qrCodeUrl } else { // 在微信中,调起微信扫码支付界面 window.location.href = 'weixin://wxpay/bizpayurl?url=' + encodeURIComponent(qrCodeUrl) this.checkPayStatus() } } ``` 以上代码中,`startNativePay` 方法判断当前是否在微信中,如果在微信中,则使用 `weixin://wxpay/bizpayurl?url=` 协议调起微信扫码支付界面,并将支付二维码的链接作为参数传递给微信支付界面。支付成功后,使用轮询的方式查询支付状态,如果支付成功,则弹出支付成功的提示框。 希望这能帮助到你。如果你有其他问题,请随时提出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值