feat: support Stripe payment provider (#2204)

* feat: add stripe payment provider

* feat: support stripe payment

* feat: delete todo comment

* feat: remove description struct

* feat: change outOrderId->orderId

web/src/PaymentResultPage.js

@@ -48,7 +48,7 @@ class PaymentResultPage extends React.Component {
         });
         // window.console.log("payment=", res.data);
         if (res.data.state === "Created") {
-          if (res.data.type === "PayPal") {
+          if (["PayPal", "Stripe"].includes(res.data.type)) {
             this.setState({
               timeout: setTimeout(() => {
                 PaymentBackend.notifyPayment(this.state.organizationName, this.state.paymentName)
@@ -135,6 +135,26 @@ class PaymentResultPage extends React.Component {
           />
         </div>
       );
+    } else if (payment.state === "Timeout") {
+      return (
+        <div>
+          {
+            Setting.renderHelmet(payment)
+          }
+          <Result
+            status="warning"
+            title={`${i18next.t("payment:The payment has time out")}: ${payment.productDisplayName}, ${i18next.t("payment:the current state is")}: ${payment.state}`}
+            subTitle={i18next.t("payment:Please click the below button to return to the original website")}
+            extra={[
+              <Button type="primary" key="returnUrl" onClick={() => {
+                this.goToPaymentUrl(payment);
+              }}>
+                {i18next.t("payment:Return to Website")}
+              </Button>,
+            ]}
+          />
+        </div>
+      );
     } else {
       return (
         <div>

web/src/ProductBuyPage.js

@@ -163,6 +163,8 @@ class ProductBuyPage extends React.Component {
       text = i18next.t("product:WeChat Pay");
     } else if (provider.type === "PayPal") {
       text = i18next.t("product:PayPal");
+    } else if (provider.type === "Stripe") {
+      text = i18next.t("product:Stripe");
     }
 
     return (

web/src/Setting.js

@@ -217,6 +217,10 @@ export const OtherProviderInfo = {
       logo: `${StaticBaseUrl}/img/payment_paypal.png`,
       url: "https://www.paypal.com/",
     },
+    "Stripe": {
+      logo: `${StaticBaseUrl}/img/social_stripe.png`,
+      url: "https://stripe.com/",
+    },
     "GC": {
       logo: `${StaticBaseUrl}/img/payment_gc.png`,
       url: "https://gc.org",
@@ -933,6 +937,7 @@ export function getProviderTypeOptions(category) {
       {id: "Alipay", name: "Alipay"},
       {id: "WeChat Pay", name: "WeChat Pay"},
       {id: "PayPal", name: "PayPal"},
+      {id: "Stripe", name: "Stripe"},
       {id: "GC", name: "GC"},
     ]);
   } else if (category === "Captcha") {