H5微信支付、PC端微信支付

目录

前言

这个活动页已经完成有一段时间了、功能点也比较单一、重点还是在PC端和H5端微信支付这一块、H5端在生成环境下调试也比较麻烦、我把前端的代码列出来给大家参考参考、希望对大家有点帮助

一、PC端微信扫码支付功能

1.功能描述：

pc端比较简单，主要请求后端返回的二维码展示并去轮询用户是否完成支付、改变支付状态实现完整的完成支付流程

2.示例图片

3.Pc端完整的实现代码、样式部分我就不贴出来了、主要是实现逻辑

二、H5端自动调起微信支付功能

1.示例图

2.功能描述：h5端主要的一点还是跟后端去联调配置参数这一块、在微信端调起支付、后端一般会出两个接口给前端这边、获取openid的接口、调起支付的回调接口

3.H5端实现过程：

获取code--请求获取openid--请求支付回调--支付成功

4.完整代码

三、总结：以上是我实现H5端、PC端完整的代码和逻辑、希望对各位同学有帮助

---

前言

这个活动页已经完成有一段时间了、功能点也比较单一、重点还是在PC端和H5端微信支付这一块、H5端在生成环境下调试也比较麻烦、我把前端的代码列出来给大家参考参考、希望对大家有点帮助

一、PC端微信扫码支付功能

1.功能描述：

pc端比较简单，主要请求后端返回的二维码展示并去轮询用户是否完成支付、改变支付状态实现完整的完成支付流程

2.示例图片

3.Pc端完整的实现代码、样式部分我就不贴出来了、主要是实现逻辑

import React, { useState, useEffect } from 'react';
import request from '@/utils/request';
import api from '@/api';
import stores from '@/stores';

function YourComponent() {
  const [isPollingActive, setIsPollingActive] = useState(false);
  const [resultCode, setResultCode] = useState('');
  const [returnCode, setReturnCode] = useState('');
  const [tradeState, setTradeState] = useState('');

  const startPolling = (outTradeNo) => {
    setIsPollingActive(true); // 设置标志变量为 true

    const pollingTimer = setInterval(async () => {
      await getQueryOrder(outTradeNo);

      if (isPollingActive) {
        if (resultCode === 'SUCCESS' && returnCode === 'SUCCESS' && tradeState === 'SUCCESS') {
          handleSuccessPayment();
        }
      }
    }, 1000); // 每隔 1秒轮询一次

    return pollingTimer;
  };

  const getQueryOrder = async (outTradeNo) => {
    try {
      const response = await request({
        method: 'POST',
        url: api.queryOrderStatus,
        data: { outTradeNo },
      });

      if (response.code === 200) {
        const { resultCode, returnCode, tradeState } = response.data;
        setResultCode(resultCode);
        setReturnCode(returnCode);
        setTradeState(tradeState);
      }
    } catch (error) {
      stores.Frame.warning(error.message);
    }
  };

  const handleSuccessPayment = () => {
    // 处理支付成功逻辑
    handleCancelQrcodeModal(true);
    stores.Frame.success('支付成功');
    
    if (!mechanismUnpaidtype) {
      mechanismTemplatesList = [{ id: generateUniqueId(), unpaidState: false }];
    }

    setTimeout(() => {
      setIsPollingActive(false); // 将标志变量设置为 false，停止轮询
      getMyPaintings();
      stopPolling();
    }, 3000); // 设置延时时间，单位为毫秒
  };

  useEffect(() => {
    const pollingTimer = startPolling(outTradeNo);

    // 在组件卸载时停止轮询
    return () => {
      clearInterval(pollingTimer);
      setIsPollingActive(false); // 将标志变量设置为 false，停止轮询
    };
  }, []);

  return (
    // Your component JSX
  );
}

export default YourComponent;

二、H5端自动调起微信支付功能

1.示例图

2.功能描述：h5端主要的一点还是跟后端去联调配置参数这一块、在微信端调起支付、后端一般会出两个接口给前端这边、获取openid的接口、调起支付的回调接口

3.H5端实现过程：

获取code--请求获取openid--请求支付回调--支付成功

4.完整代码

import React, { useEffect } from 'react';
import axios from 'axios';
import stores from './stores'; // 你的数据存储
import utils from './utils'; // 你的工具函数

function YourPaymentComponent() {
  const isWechatBrowser = () => {
    // 判断是否在微信内置浏览器中
    return /MicroMessenger/i.test(navigator.userAgent);
  };

  // 1. 跳转重定向获取code、一定要配置好相同域名的url才可以获取到code
  const getWhatCodeLinks = () => {
    // 获取跳转链接并调起微信支付
    if (utils.IsWeixin()) {
      let mLocation = this.history.location;
      let rediectUrl = `${window.location.origin + mLocation.pathname}`;
      const growWhatUrl = '微信开发者平台配置的获取code链接';
      window.location.href = growWhatUrl;
    }
  };

  // 2. 请求获取code并存储
  const getOpenid = async (code) => {
    // 获取用户的openid
    const url = '获取openid的接口';
    const data = {
      code,
      appId: '配置的appid',
    };

    try {
      const response = await axios.post(url, data);
      const responseData = JSON.parse(response.data.data);
      this.openId = responseData.openid;
      localStorage.setItem('openid', this.openId);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  // 3. 点击事件请求支付接口
  const sendPostRequest = async (openid) => {
    const userId = stores.Frame.userInfo && stores.Frame.userInfo.userId;
    const phone = stores.Frame.userInfo && stores.Frame.userInfo.phone;
    const url = '支付接口';
    const timestamp = Date.now();
    const requestData = {
      wayCode: 'WX_JSAPI',
      amount: 0.1, // 支付金额
      appId: '配置的appid',
      mchOrderNo: `M${timestamp}`,
      payDataType: 'codeImgUrl',
      authCode: '',
      divisionMode: 0,
      orderTitle: `活动名称${phone}`,
      mchId: 'M1686658386',
      openId: openid,
      body: userId,
    };

    try {
      const response = await axios.post(url, requestData);
      const responseData = JSON.parse(response.data.data.payData);
      invokeWechatPayPhone(responseData);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  // 4. 请求微信支付回调、原生自带的API
  const invokeWechatPayPhone = (prepayData) => {
    if (!isWechatBrowser()) {
      console.error('Not in WeChat browser');
      successCopy();
      return;
    }

    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 {
      WeixinJSBridge.invoke('getBrandWCPayRequest', prepayData, function (res) {
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          console.log('Payment successful');
          stores.Frame.success('支付成功');
        } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
          console.log('Payment cancelled');
          stores.Frame.warning('取消支付');
        } else {
          stores.Frame.warning('支付失败');
          console.error('Payment failed');
        }
      });
    }
  };

  useEffect(() => {
    // 在组件加载时执行的初始化逻辑
    const code = 'your_wechat_code'; // 你的微信code
    getOpenid(code);
  }, []);

  return (
    // Your component JSX
  );
}

export default YourPaymentComponent;

三、总结：以上是我实现H5端、PC端完整的代码和逻辑、希望对各位同学有帮助