Add alipay provider.

web/src/ProductBuyPage.js

@@ -18,6 +18,7 @@ import i18next from "i18next";
 import * as ProductBackend from "./backend/ProductBackend";
 import * as ProviderBackend from "./backend/ProviderBackend";
 import * as Provider from "./auth/Provider";
+import * as Setting from "./Setting";
 
 class ProductBuyPage extends React.Component {
   constructor(props) {
@@ -107,6 +108,24 @@ class ProductBuyPage extends React.Component {
     // }
   }
 
+  buyProduct(product, provider) {
+    ProductBackend.buyProduct(this.state.product.owner, this.state.productName, provider.name)
+      .then((res) => {
+        if (res.msg === "") {
+          const payUrl = res.data;
+          Setting.goToLink(payUrl);
+          this.setState({
+            productName: this.state.product.name,
+          });
+        } else {
+          Setting.showMessage("error", res.msg);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Failed to connect to server: ${error}`);
+      });
+  }
+
   getPayButton(provider) {
     let text = provider.type;
     if (provider.type === "Alipay") {
@@ -131,11 +150,11 @@ class ProductBuyPage extends React.Component {
   renderProviderButton(provider, product) {
     return (
       <span key={provider.name} style={{width: "200px", marginRight: "20px", marginBottom: "10px"}}>
-        <a style={{width: "200px"}} href={this.getPayUrl(product, provider)}>
+        <span style={{width: "200px", cursor: "pointer"}} onClick={() => this.buyProduct(product, provider)}>
           {
             this.getPayButton(provider)
           }
-        </a>
+        </span>
       </span>
     )
   }

web/src/ProductListPage.js

@@ -225,11 +225,12 @@ class ProductListPage extends BaseListPage {
         title: i18next.t("general:Action"),
         dataIndex: '',
         key: 'op',
-        width: '170px',
+        width: '230px',
         fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
           return (
             <div>
+              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} onClick={() => this.props.history.push(`/products/${record.name}/buy`)}>{i18next.t("product:Buy")}</Button>
               <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => this.props.history.push(`/products/${record.name}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete product: ${record.name} ?`}

web/src/backend/ProductBackend.js

@@ -54,3 +54,10 @@ export function deleteProduct(product) {
     body: JSON.stringify(newProduct),
   }).then(res => res.json());
 }
+
+export function buyProduct(owner, name, providerId) {
+  return fetch(`${Setting.ServerUrl}/api/buy-product?id=${owner}/${encodeURIComponent(name)}&providerId=${providerId}`, {
+    method: 'POST',
+    credentials: 'include',
+  }).then(res => res.json());
+}