微信支付测试

app/pay/inweixin/[body]/page.jsx

@@ -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");
+  //微信支付jsapi支付参数
-  const [body, setBody] = useState({});
+  const [jsapiParams, setJsapiParams] = useState();
-  const [info, setInfo] = useState("no data");
+
+  //获取微信支付jsapi支付参数
   useEffect(() => {
-    // //获取code
+    const createOrder = async () => {
-    // const temCode = searchParams.get("code");
+      //获取code
-    // setCode(temCode);
+      const code = searchParams.get("code");
 
-    // //获取支付body
+      //构建body
-    // const strBody = decodeURIComponent(params.body);
+      const strBody = decodeURIComponent(params.body);
-    // const temBody = JSON.parse(strBody);
+      const temBody = JSON.parse(strBody);
-    // setBody(temBody);
+      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，由商户传入
+          appId: jsapiParams.appId, //公众号ID，由商户传入
-          timeStamp: "1708438397", //时间戳，自1970年以来的秒数
+          timeStamp: jsapiParams.timeStamp, //时间戳，自1970年以来的秒数
-          nonceStr: "jXEwa7uEExqFjjlByZivG623Akbzg3Cv", //随机串
+          nonceStr: jsapiParams.nonceStr, //随机串
-          package: "prepay_id=wx2022131953635431d27a15e2c95e460000",
+          package: jsapiParams.package,
-          signType: "RSA", //微信签名方式：
+          signType: jsapiParams.signType, //微信签名方式：
-          paySign:
+          paySign: jsapiParams.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;
-            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
-            setInfo("success");
           }
         }
       );
@@ -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>
   );
 }

app/pay/page.jsx

@@ -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={() =>
+              onClick={() => createOrder("wxpay_jsapi")}
-                document.getElementById("manual_pay_modal").showModal()
-              }
               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>
   );
 }