feat: support WeChat Pay via JSAPI (#2488)

* feat: support wechat jsapi payment

* feat: add log

* feat: update sign

* feat: process wechat pay result

* feat: process wechat pay result

* feat: save wechat openid for different app

* feat: save wechat openid for different app

* feat: add SetUserOAuthProperties for signup

* feat: fix openid for wechat

* feat: get user extra property in buyproduct

* feat: remove log

* feat: remove log

* feat: gofumpt code

* feat: change lr->crlf

* feat: change crlf->lf

* feat: improve code

web/src/PaymentResultPage.js

@@ -101,7 +101,7 @@ class PaymentResultPage extends React.Component {
         payment: payment,
       });
       if (payment.state === "Created") {
-        if (["PayPal", "Stripe", "Alipay"].includes(payment.type)) {
+        if (["PayPal", "Stripe", "Alipay", "WeChat Pay"].includes(payment.type)) {
           this.setState({
             timeout: setTimeout(async() => {
               await PaymentBackend.notifyPayment(this.state.owner, this.state.paymentName);

web/src/ProductBuyPage.js

@@ -31,6 +31,7 @@ class ProductBuyPage extends React.Component {
       pricingName: props?.pricingName ?? props?.match?.params?.pricingName ?? null,
       planName: params.get("plan"),
       userName: params.get("user"),
+      paymentEnv: "",
       product: null,
       pricing: props?.pricing ?? null,
       plan: null,
@@ -38,8 +39,21 @@ class ProductBuyPage extends React.Component {
     };
   }
 
+  getPaymentEnv() {
+    let env = "";
+    const ua = navigator.userAgent.toLocaleLowerCase();
+    // Only support Wechat Pay in Wechat Browser for mobile devices
+    if (ua.indexOf("micromessenger") !== -1 && ua.indexOf("mobile") !== -1) {
+      env = "WechatBrowser";
+    }
+    this.setState({
+      paymentEnv: env,
+    });
+  }
+
   UNSAFE_componentWillMount() {
     this.getProduct();
+    this.getPaymentEnv();
   }
 
   setStateAsync(state) {
@@ -127,23 +141,74 @@ class ProductBuyPage extends React.Component {
     return `${this.getCurrencySymbol(product)}${product?.price} (${this.getCurrencyText(product)})`;
   }
 
+  // Call Weechat Pay via jsapi
+  onBridgeReady(attachInfo) {
+    const {WeixinJSBridge} = window;
+    // Setting.showMessage("success", "attachInfo is " + JSON.stringify(attachInfo));
+    this.setState({
+      isPlacingOrder: false,
+    });
+    WeixinJSBridge.invoke(
+      "getBrandWCPayRequest", {
+        "appId": attachInfo.appId,
+        "timeStamp": attachInfo.timeStamp,
+        "nonceStr": attachInfo.nonceStr,
+        "package": attachInfo.package,
+        "signType": attachInfo.signType,
+        "paySign": attachInfo.paySign,
+      },
+      function(res) {
+        if (res.err_msg === "get_brand_wcpay_request:ok") {
+          Setting.goToLink(attachInfo.payment.successUrl);
+          return ;
+        } else {
+          if (res.err_msg === "get_brand_wcpay_request:cancel") {
+            Setting.showMessage("error", i18next.t("product:Payment cancelled"));
+          } else {
+            Setting.showMessage("error", i18next.t("product:Payment failed"));
+          }
+        }
+      }
+    );
+  }
+
+  // In Wechat browser, call this function to pay via jsapi
+  callWechatPay(attachInfo) {
+    const {WeixinJSBridge} = window;
+    if (typeof WeixinJSBridge === "undefined") {
+      if (document.addEventListener) {
+        document.addEventListener("WeixinJSBridgeReady", () => this.onBridgeReady(attachInfo), false);
+      } else if (document.attachEvent) {
+        document.attachEvent("WeixinJSBridgeReady", () => this.onBridgeReady(attachInfo));
+        document.attachEvent("onWeixinJSBridgeReady", () => this.onBridgeReady(attachInfo));
+      }
+    } else {
+      this.onBridgeReady(attachInfo);
+    }
+  }
+
   buyProduct(product, provider) {
     this.setState({
       isPlacingOrder: true,
     });
 
-    ProductBackend.buyProduct(product.owner, product.name, provider.name, this.state.pricingName ?? "", this.state.planName ?? "", this.state.userName ?? "")
+    ProductBackend.buyProduct(product.owner, product.name, provider.name, this.state.pricingName ?? "", this.state.planName ?? "", this.state.userName ?? "", this.state.paymentEnv)
       .then((res) => {
         if (res.status === "ok") {
           const payment = res.data;
+          const attachInfo = res.data2;
           let payUrl = payment.payUrl;
           if (provider.type === "WeChat Pay") {
+            if (this.state.paymentEnv === "WechatBrowser") {
+              attachInfo.payment = payment;
+              this.callWechatPay(attachInfo);
+              return ;
+            }
             payUrl = `/qrcode/${payment.owner}/${payment.name}?providerName=${provider.name}&payUrl=${encodeURI(payment.payUrl)}&successUrl=${encodeURI(payment.successUrl)}`;
           }
           Setting.goToLink(payUrl);
         } else {
           Setting.showMessage("error", `${i18next.t("general:Failed to save")}: ${res.msg}`);
-
           this.setState({
             isPlacingOrder: false,
           });
@@ -218,7 +283,7 @@ class ProductBuyPage extends React.Component {
     return (
       <div className="login-content">
         <Spin spinning={this.state.isPlacingOrder} size="large" tip={i18next.t("product:Placing order...")} style={{paddingTop: "10%"}} >
-          <Descriptions title={<span style={{fontSize: 28}}>{i18next.t("product:Buy Product")}</span>} bordered>
+          <Descriptions title={<span style={Setting.isMobile() ? {fontSize: 20} : {fontSize: 28}}>{i18next.t("product:Buy Product")}</span>} bordered>
             <Descriptions.Item label={i18next.t("general:Name")} span={3}>
               <span style={{fontSize: 25}}>
                 {Setting.getLanguageText(product?.displayName)}

web/src/backend/ProductBackend.js

@@ -70,8 +70,8 @@ export function deleteProduct(product) {
   }).then(res => res.json());
 }
 
-export function buyProduct(owner, name, providerName, pricingName = "", planName = "", userName = "") {
-  return fetch(`${Setting.ServerUrl}/api/buy-product?id=${owner}/${encodeURIComponent(name)}&providerName=${providerName}&pricingName=${pricingName}&planName=${planName}&userName=${userName}`, {
+export function buyProduct(owner, name, providerName, pricingName = "", planName = "", userName = "", paymentEnv = "") {
+  return fetch(`${Setting.ServerUrl}/api/buy-product?id=${owner}/${encodeURIComponent(name)}&providerName=${providerName}&pricingName=${pricingName}&planName=${planName}&userName=${userName}&paymentEnv=${paymentEnv}`, {
     method: "POST",
     credentials: "include",
     headers: {