步骤一:生成 codeUrl
首先,我们需要调用后端接口生成 codeUrl
。如果生成失败,给用户提示稍后重试。
步骤二:生成支付二维码
通过获取到的 codeUrl
生成支付二维码。
步骤三:判断用户是否扫描二维码
判断用户是否扫描二维码,并调用后端接口判断支付是否成功。
步骤四:轮询支付状态
如果用户已扫描二维码,轮询后端接口判断支付是否成功。如果返回的 code
为 201,则每隔 2 秒重新请求一次,最多请求 10 次。
javascript
import React, { useState } from 'react';
import axios from 'axios';
import QRCode from 'qrcode.react';
const WeChatPay = () => {
const [codeUrl, setCodeUrl] = useState(null);
const [orderNumber, setOrderNumber] = useState(null);
const [isScanned, setIsScanned] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [pollCount, setPollCount] = useState(0);
const maxPollCount = 10;
const generateCodeUrl = async () => {
try {
const response = await axios.post('https://ai.xwm1000.com/app-api/pay/createWeChatPayOrder', {
total: 100, // 充值金额
});
if (response.data.code === 200) {
setCodeUrl(response.data.data.codeUrl);
setOrderNumber(response.data.data.orderNumber);
setIsScanned(true);
startPolling();
} else {
setErrorMessage('生成支付二维码失败,请稍后重试。');
}
} catch (error) {
setErrorMessage('生成支付二维码失败,请稍后重试。');
}
};
const startPolling = () => {
setPollCount(0);
pollPaymentStatus();
};
const pollPaymentStatus = async () => {
if (pollCount >= maxPollCount) {
setErrorMessage('充值服务异常,请联系管理员。');
return;
}
try {
const response = await axios.post('https://ai.xwm1000.com/app-api/pay/checkPaymentStatus', {
orderNumber: orderNumber,
});
if (response.data.code === 200) {
alert('支付成功!');
} else if (response.data.code === 201) {
setPollCount(pollCount + 1);
setTimeout(pollPaymentStatus, 2000);
} else {
alert(response.data.message);
}
} catch (error) {
setErrorMessage('支付状态查询失败,请稍后重试。');
}
};
return (
<div>
{errorMessage && <div className="error">{errorMessage}</div>}
{!codeUrl ? (
<button onClick={generateCodeUrl}>生成支付二维码</button>
) : (
<div>
<QRCode value={codeUrl} />
{!isScanned ? (
<div>请扫描二维码进行支付</div>
) : (
<div>正在确认支付状态,请稍候...</div>
)}
</div>
)}
</div>
);
};
export default WeChatPay;
解释
-
生成
codeUrl
:- 调用后端接口生成
codeUrl
,如果成功,将codeUrl
和orderNumber
存储在组件的状态中。 - 如果失败,显示错误信息。
- 调用后端接口生成
-
生成支付二维码:
- 使用
qrcode.react
库生成二维码并显示在页面上。
- 使用
-
判断用户是否扫描二维码:
- 设置
isScanned
为true
,表示用户已扫描二维码。
- 设置
-
轮询支付状态:
- 调用后端接口检查支付状态,如果返回
code
为 200,表示支付成功。 - 如果返回
code
为 201,每隔 2 秒重新请求一次,最多请求 10 次。 - 如果请求次数达到上限,显示错误信息。
- 调用后端接口检查支付状态,如果返回
注意事项
-
后端接口地址:
- 示例中使用了
https://ai.xwm1000.com/app-api/pay/createWeChatPayOrder
和https://ai.xwm1000.com/app-api/pay/checkPaymentStatus
,请根据实际情况调整。
- 示例中使用了
-
错误处理:
- 示例中简单地处理了错误信息,可以根据实际需求进行更详细的错误处理。
-
二维码生成库:
- 示例中使用了
qrcode.react
库来生成二维码,你需要在项目中安装该库:npm install qrcode.react
。
- 示例中使用了
-
样式:
- 可以根据实际需求调整样式,使页面更加美观。