diff --git a/controllers/payment.go b/controllers/payment.go
index c923e119..18967c50 100644
--- a/controllers/payment.go
+++ b/controllers/payment.go
@@ -169,6 +169,9 @@ func (c *ApiController) InvoicePayment() {
 	id := c.Input().Get("id")
 
 	payment := object.GetPayment(id)
-	c.Data["json"] = wrapActionResponse(object.InvoicePayment(payment))
-	c.ServeJSON()
+	err := object.InvoicePayment(payment)
+	if err != nil {
+		c.ResponseError(err.Error())
+	}
+	c.ResponseOk()
 }
diff --git a/object/payment.go b/object/payment.go
index 5c9ef5cf..b6cf006a 100644
--- a/object/payment.go
+++ b/object/payment.go
@@ -226,25 +226,23 @@ func invoicePayment(payment *Payment) (string, error) {
 	return invoiceUrl, nil
 }
 
-func InvoicePayment(payment *Payment) bool {
+func InvoicePayment(payment *Payment) error {
 	if payment.State != "Paid" {
-		return false
+		return fmt.Errorf("the payment state is supposed to be: \"%s\", got: \"%s\"", "Paid", payment.State)
 	}
 
 	invoiceUrl, err := invoicePayment(payment)
-
 	if err != nil {
-		payment.State = "Error"
-		payment.Message = err.Error()
-	} else {
-		payment.State = "Invoiced"
-		payment.InvoiceUrl = invoiceUrl
+		return err
 	}
 
-	UpdatePayment(payment.GetId(), payment)
+	payment.InvoiceUrl = invoiceUrl
+	affected := UpdatePayment(payment.GetId(), payment)
+	if !affected {
+		return fmt.Errorf("failed to update the payment: %s", payment.Name)
+	}
 
-	ok := err == nil
-	return ok
+	return nil
 }
 
 func (payment *Payment) GetId() string {
diff --git a/web/src/PaymentEditPage.js b/web/src/PaymentEditPage.js
index cda0cc73..1d30892b 100644
--- a/web/src/PaymentEditPage.js
+++ b/web/src/PaymentEditPage.js
@@ -65,7 +65,24 @@ class PaymentEditPage extends React.Component {
   }
 
   issueInvoice() {
-    alert("111")
+    this.setState({
+      isModalVisible: false,
+    });
+
+    PaymentBackend.invoicePayment(this.state.payment.owner, this.state.paymentName)
+      .then((res) => {
+        if (res.msg === "") {
+          Setting.showMessage("success", `Successfully invoiced`);
+          this.setState({
+            paymentName: this.state.payment.name,
+          });
+        } else {
+          Setting.showMessage("error", res.msg);
+        }
+      })
+      .catch(error => {
+        Setting.showMessage("error", `Failed to connect to server: ${error}`);
+      });
   }
 
   downloadInvoice() {
@@ -361,6 +378,10 @@ class PaymentEditPage extends React.Component {
   }
 
   checkError() {
+    if (this.state.payment.state !== "Paid") {
+      return i18next.t("payment:Please pay the order first!");
+    }
+
     if (!Setting.isValidPersonName(this.state.payment.personName)) {
       return i18next.t("signup:Please input your real name!");
     }
diff --git a/web/src/backend/PaymentBackend.js b/web/src/backend/PaymentBackend.js
index 4aa50abd..040c0beb 100644
--- a/web/src/backend/PaymentBackend.js
+++ b/web/src/backend/PaymentBackend.js
@@ -54,3 +54,10 @@ export function deletePayment(payment) {
     body: JSON.stringify(newPayment),
   }).then(res => res.json());
 }
+
+export function invoicePayment(owner, name) {
+  return fetch(`${Setting.ServerUrl}/api/invoice-payment?id=${owner}/${encodeURIComponent(name)}`, {
+    method: "POST",
+    credentials: "include"
+  }).then(res => res.json());
+}
diff --git a/web/src/locales/de/data.json b/web/src/locales/de/data.json
index 74fd240d..146feeda 100644
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@@ -291,6 +291,7 @@
     "Person phone - Tooltip": "Person phone - Tooltip",
     "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
+    "Please pay the order first!": "Please pay the order first!",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",
     "Processing...": "Processing...",
diff --git a/web/src/locales/en/data.json b/web/src/locales/en/data.json
index a80f5916..27fbac61 100644
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@@ -291,6 +291,7 @@
     "Person phone - Tooltip": "Person phone - Tooltip",
     "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
+    "Please pay the order first!": "Please pay the order first!",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",
     "Processing...": "Processing...",
diff --git a/web/src/locales/fr/data.json b/web/src/locales/fr/data.json
index 99a2361a..a6c56bab 100644
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@@ -291,6 +291,7 @@
     "Person phone - Tooltip": "Person phone - Tooltip",
     "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
+    "Please pay the order first!": "Please pay the order first!",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",
     "Processing...": "Processing...",
diff --git a/web/src/locales/ja/data.json b/web/src/locales/ja/data.json
index 97386ac7..7429924a 100644
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@@ -291,6 +291,7 @@
     "Person phone - Tooltip": "Person phone - Tooltip",
     "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
+    "Please pay the order first!": "Please pay the order first!",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",
     "Processing...": "Processing...",
diff --git a/web/src/locales/ko/data.json b/web/src/locales/ko/data.json
index 5519e561..352b7b6c 100644
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@@ -291,6 +291,7 @@
     "Person phone - Tooltip": "Person phone - Tooltip",
     "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
+    "Please pay the order first!": "Please pay the order first!",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",
     "Processing...": "Processing...",
diff --git a/web/src/locales/ru/data.json b/web/src/locales/ru/data.json
index f27003e8..518dcb4b 100644
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@@ -291,6 +291,7 @@
     "Person phone - Tooltip": "Person phone - Tooltip",
     "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.",
     "Please click the below button to return to the original website": "Please click the below button to return to the original website",
+    "Please pay the order first!": "Please pay the order first!",
     "Price": "Price",
     "Price - Tooltip": "Price - Tooltip",
     "Processing...": "Processing...",
diff --git a/web/src/locales/zh/data.json b/web/src/locales/zh/data.json
index a3186e06..95ec734e 100644
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@@ -291,6 +291,7 @@
     "Person phone - Tooltip": "缴费人本人的手机号",
     "Please carefully check your invoice information. Once the invoice is issued, it cannot be withdrawn or modified.": "请仔细检查下列发票信息，发票一经开具，无法退换。",
     "Please click the below button to return to the original website": "请点击下方按钮返回原网站",
+    "Please pay the order first!": "请先完成支付后再进行操作!",
     "Price": "价格",
     "Price - Tooltip": "商品价格",
     "Processing...": "正在处理...",