微信支付测试
This commit is contained in:
parent
5d5e6044bf
commit
5ace6f149e
|
|
@ -2,41 +2,101 @@
|
|||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { Toast } from "antd-mobile";
|
||||
import { generateSignature } from "@/utils/crypto";
|
||||
|
||||
export default function InWeixin({ params }) {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [code, setCode] = useState("no code");
|
||||
const [body, setBody] = useState({});
|
||||
const [info, setInfo] = useState("no data");
|
||||
//微信支付jsapi支付参数
|
||||
const [jsapiParams, setJsapiParams] = useState();
|
||||
|
||||
//获取微信支付jsapi支付参数
|
||||
useEffect(() => {
|
||||
// //获取code
|
||||
// const temCode = searchParams.get("code");
|
||||
// setCode(temCode);
|
||||
const createOrder = async () => {
|
||||
//获取code
|
||||
const code = searchParams.get("code");
|
||||
|
||||
// //获取支付body
|
||||
// const strBody = decodeURIComponent(params.body);
|
||||
// const temBody = JSON.parse(strBody);
|
||||
// setBody(temBody);
|
||||
//构建body
|
||||
const strBody = decodeURIComponent(params.body);
|
||||
const temBody = JSON.parse(strBody);
|
||||
const body = { ...temBody, wechat_auth_code: code };
|
||||
const signature = generateSignature(body);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/vas/create_order?signature=${signature}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
}
|
||||
);
|
||||
const data = await response.json();
|
||||
if (data.ret === -1) {
|
||||
Toast.show({
|
||||
content: data.msg,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setJsapiParams(data.data.wxpay_jsapi_param_obj);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
createOrder();
|
||||
|
||||
// function onBridgeReady() {
|
||||
// WeixinJSBridge.invoke(
|
||||
// "getBrandWCPayRequest",
|
||||
// {
|
||||
// appId: "wxc28fd8aaf31984b6", //公众号ID，由商户传入
|
||||
// timeStamp: "1708438397", //时间戳，自1970年以来的秒数
|
||||
// nonceStr: "jXEwa7uEExqFjjlByZivG623Akbzg3Cv", //随机串
|
||||
// package: "prepay_id=wx2022131953635431d27a15e2c95e460000",
|
||||
// signType: "RSA", //微信签名方式：
|
||||
// paySign:
|
||||
// "0rODbhGbNidvOcdyC3+JW5pP6DEd+DZZs0Zg3oMvbQ1pC857YvISgrS8QM2yEZpJFWCnjmUmjyQijp3ZxfV5kqr4x8+l+cmNlc87sDtkXhn/pUNMSKtdt+X9KmOrykBjsLj7hztaPoFSwkGYpxHUrxwiooW+y3to5QqD550CaER7XhAAK5knItPy6pa8rGtYPpEpCn8OkcHHVkuGAcawej1a6MGw2byEv2eRusr1VbUVWENgu557qBdGA2NHoOHfRL3n/goOvt1KXTYRtb+BkwsssHJQb8gyuz0qBR/aNFcSUBb4eSBenWAm1L+Wp/ndxLMkxr1ixQblwEJ9I2NPZw==", //微信签名
|
||||
// },
|
||||
// function (res) {
|
||||
// if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
// 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 {
|
||||
// onBridgeReady();
|
||||
// }
|
||||
}, []);
|
||||
|
||||
//调起收银台
|
||||
useEffect(() => {
|
||||
if (!jsapiParams) return;
|
||||
function onBridgeReady() {
|
||||
WeixinJSBridge.invoke(
|
||||
"getBrandWCPayRequest",
|
||||
{
|
||||
appId: "wxc28fd8aaf31984b6", //公众号ID，由商户传入
|
||||
timeStamp: "1708438397", //时间戳，自1970年以来的秒数
|
||||
nonceStr: "jXEwa7uEExqFjjlByZivG623Akbzg3Cv", //随机串
|
||||
package: "prepay_id=wx2022131953635431d27a15e2c95e460000",
|
||||
signType: "RSA", //微信签名方式：
|
||||
paySign:
|
||||
"0rODbhGbNidvOcdyC3+JW5pP6DEd+DZZs0Zg3oMvbQ1pC857YvISgrS8QM2yEZpJFWCnjmUmjyQijp3ZxfV5kqr4x8+l+cmNlc87sDtkXhn/pUNMSKtdt+X9KmOrykBjsLj7hztaPoFSwkGYpxHUrxwiooW+y3to5QqD550CaER7XhAAK5knItPy6pa8rGtYPpEpCn8OkcHHVkuGAcawej1a6MGw2byEv2eRusr1VbUVWENgu557qBdGA2NHoOHfRL3n/goOvt1KXTYRtb+BkwsssHJQb8gyuz0qBR/aNFcSUBb4eSBenWAm1L+Wp/ndxLMkxr1ixQblwEJ9I2NPZw==", //微信签名
|
||||
appId: jsapiParams.appId, //公众号ID，由商户传入
|
||||
timeStamp: jsapiParams.timeStamp, //时间戳，自1970年以来的秒数
|
||||
nonceStr: jsapiParams.nonceStr, //随机串
|
||||
package: jsapiParams.package,
|
||||
signType: jsapiParams.signType, //微信签名方式：
|
||||
paySign: jsapiParams.paySign, //微信签名
|
||||
},
|
||||
function (res) {
|
||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||||
setInfo("success");
|
||||
return;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -51,10 +111,10 @@ export default function InWeixin({ params }) {
|
|||
} else {
|
||||
onBridgeReady();
|
||||
}
|
||||
}, []);
|
||||
}, [jsapiParams]);
|
||||
|
||||
return (
|
||||
<section className="flex flex-1 flex-col container bg-white">
|
||||
<section className="flex flex-1 flex-col bg-white">
|
||||
<div className="flex flex-col">
|
||||
<p className="text-center text-black text-lg font-medium py-2">
|
||||
微信安全支付
|
||||
|
|
@ -70,8 +130,6 @@ export default function InWeixin({ params }) {
|
|||
</svg>
|
||||
<p className="text-sm text-[#5fc157]">正在跳转...</p>
|
||||
</div>
|
||||
<p className="text-sm text-black">{code}</p>
|
||||
<p className="text-sm text-black">{info}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export default function Pay() {
|
|||
});
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
|
||||
const base = webviewBaseRequest();
|
||||
const body = {
|
||||
...base,
|
||||
|
|
@ -100,6 +100,15 @@ export default function Pay() {
|
|||
pay_type: type,
|
||||
from: "app",
|
||||
};
|
||||
|
||||
//如果是微信jsapi支付直接跳转到中间页
|
||||
if (type === "wxpay_jsapi") {
|
||||
router.push(`/pay/${encodeURIComponent(JSON.stringify(body))}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
const signature = generateSignature(body);
|
||||
try {
|
||||
const response = await fetch(
|
||||
|
|
@ -139,28 +148,6 @@ export default function Pay() {
|
|||
}
|
||||
};
|
||||
|
||||
//跳转联系客服
|
||||
const handleContact = () => {
|
||||
if (navigator.userAgent.includes("FromWebview")) {
|
||||
window.ReactNativeWebView.postMessage(
|
||||
JSON.stringify({
|
||||
type: "NAVIGATE",
|
||||
data: {
|
||||
page: "MessageDetail",
|
||||
params: {
|
||||
mid: 1,
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
} else {
|
||||
Toast.show({
|
||||
content: "请下载app联系客服充值",
|
||||
});
|
||||
}
|
||||
document.getElementById("manual_pay_modal").close();
|
||||
};
|
||||
|
||||
const PriceItem = ({ item }) => {
|
||||
const handleClickPrice = (item) => {
|
||||
setSelectedPrice(item);
|
||||
|
|
@ -302,39 +289,20 @@ export default function Pay() {
|
|||
</div>
|
||||
<div className="basis-1/2 px-2">
|
||||
<button
|
||||
onClick={() =>
|
||||
document.getElementById("manual_pay_modal").showModal()
|
||||
}
|
||||
onClick={() => createOrder("wxpay_jsapi")}
|
||||
className="flex flex-row h-12 w-full items-center justify-center bg-[#2E2E2E] rounded-full py-2"
|
||||
>
|
||||
<p className="text-white text-base ml-1">人工充值</p>
|
||||
<svg viewBox="0 0 1228 1024" width="18" height="18">
|
||||
<path
|
||||
d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
|
||||
fill="#FFFFFF"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="text-white text-base ml-1">微信支付</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dialog id="manual_pay_modal" className="modal">
|
||||
<div className="modal-box bg-[#13121F]">
|
||||
<h3 className="font-semibold text-xl text-white text-center">
|
||||
人工充值
|
||||
</h3>
|
||||
<p className="text-secondary text-base font-medium">
|
||||
请联系人工客服进行充值，单笔金额不低于500人民币
|
||||
</p>
|
||||
<div className="flex flex-row">
|
||||
<button
|
||||
onClick={handleContact}
|
||||
className="flex flex-row flex-1 mx-2 items-center justify-center bg-[#FF669E] rounded-lg py-2 mt-4"
|
||||
>
|
||||
<p className="text-white text-base ml-1">联系客服</p>
|
||||
</button>
|
||||
<form method="dialog" className="flex flex-row flex-1 mx-2">
|
||||
<button className="flex flex-row flex-1 items-center justify-center border border-secondary rounded-lg py-2 mt-4">
|
||||
<p className="text-secondary text-base ml-1">取消</p>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue