Merge pull request #3 from mercadopago/enhancement/error-message

feat: show sdk error message on frontend
mercadopago · Dec 16, 2021 · c6d15b8 · c6d15b8
2 parents b9603d7 + 21e3fa8
commit c6d15b8
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 12 deletions.
diff --git a/index.js b/index.js
@@ -53,17 +53,35 @@ app.post("/process_payment", (req, res) => {
   mercadopago.payment.save(paymentData)
     .then(function(response) {
       const { response: data } = response;
-      res.status(response.status).json({
-        status_detail: data.status_detail,
+
+      res.status(201).json({
+        detail: data.status_detail,
         status: data.status,
         id: data.id
       });
     })
     .catch(function(error) {
-      res.status(error.status).send(error);
+      console.log(error);
+      const { errorMessage, errorStatus }  = validateError(error);
+      res.status(errorStatus).json({ error_message: errorMessage });
     });
 });
 
+function validateError(error) {
+  let errorMessage = 'Unknown error cause';
+  let errorStatus = 400;
+
+  if(error.cause) {
+    const sdkErrorMessage = error.cause[0].description;
+    errorMessage = sdkErrorMessage || errorMessage;
+
+    const sdkErrorStatus = error.status;
+    errorStatus = sdkErrorStatus || errorStatus;
+  }
+
+  return { errorMessage, errorStatus };
+}
+
 app.listen(8080, () => {
   console.log("The server is now running on port 8080");
   open("http://localhost:8080");

diff --git a/static/css/index.css b/static/css/index.css
@@ -397,4 +397,8 @@ footer p a:hover {
 /* Payment Result Section - Start */
 .container__result {
     display: none;
-}
+}
+
+#fail-response, #success-response {
+    display: none;
+} 
diff --git a/static/img/fail.png b/static/img/fail.png
diff --git a/static/js/index.js b/static/js/index.js
@@ -96,9 +96,16 @@ function loadCardForm() {
                         return response.json();
                     })
                     .then(result => {
-                        document.getElementById("payment-id").innerText = result.id;
-                        document.getElementById("payment-status").innerText = result.status;
-                        document.getElementById("payment-detail").innerText = result.status_detail;
+                        if(!result.hasOwnProperty("error_message")) {
+                            document.getElementById("success-response").style.display = "block";
+                            document.getElementById("payment-id").innerText = result.id;
+                            document.getElementById("payment-status").innerText = result.status;
+                            document.getElementById("payment-detail").innerText = result.detail;
+                        } else {
+                            document.getElementById("error-message").textContent = result.error_message;
+                            document.getElementById("fail-response").style.display = "block";
+                        }
+
                         $('.container__payment').fadeOut(500);
                         setTimeout(() => { $('.container__result').show(500).fadeIn(); }, 500);
                     })

diff --git a/views/index.html b/views/index.html
@@ -150,11 +150,21 @@ <h2>Payment Result</h2>
                                     <div class="row justify-content-md-center">
                                         <div class="col-md-4 product-detail">
                                             <div class="product-info">
-                                                <br>
-                                                <p><b>ID: </b><span id="payment-id"></span></p>
-                                                <p><b>Status: </b><span id="payment-status"></span></p>
-                                                <p><b>Detail: </b><span id="payment-detail"></span></p>
-                                                <br>
+                                                <div id="fail-response">
+                                                    <br/>
+                                                    <img src="img/fail.png" width="350px">
+                                                    <p class="text-center font-weight-bold">Something went wrong</p>
+                                                    <p id="error-message" class="text-center"></p>
+                                                    <br/>
+                                                </div>
+
+                                                <div id="success-response">
+                                                    <br/>
+                                                    <p><b>ID: </b><span id="payment-id"></span></p>
+                                                    <p><b>Status: </b><span id="payment-status"></span></p>
+                                                    <p><b>Detail: </b><span id="payment-detail"></span></p>
+                                                    <br/>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>