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

feat: show sdk error message on frontend
mercadopago · Dec 16, 2021 · cd32755 · cd32755
2 parents bbf07d4 + 30539cc
commit cd32755
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 10 deletions.
diff --git a/pom.xml b/pom.xml
@@ -34,6 +34,11 @@
             <artifactId>sdk-java</artifactId>
             <version>1.11.0</version>
         </dependency>
+        <dependency>
+            <groupId>com.google.code.gson</groupId>
+            <artifactId>gson</artifactId>
+            <version>2.8.9</version>
+        </dependency>
     </dependencies>
 
     <build>

diff --git a/src/main/java/com/mercadopago/sample/exception/Advisor.java b/src/main/java/com/mercadopago/sample/exception/Advisor.java
@@ -33,8 +33,8 @@ public ResponseEntity<Object> handleMethodArgumentNotValid(
     @ExceptionHandler(MercadoPagoException.class)
     public ResponseEntity<Object> handleMercadoPagoException(MercadoPagoException exception) {
         Map<String, String> body = new HashMap<>();
-        body.put("message", exception.getMessage());
+        body.put("error_message", exception.getMessage());
 
-        return new ResponseEntity<>(body, HttpStatus.UNPROCESSABLE_ENTITY);
+        return new ResponseEntity<>(body, HttpStatus.BAD_REQUEST);
     }
 }
diff --git a/src/main/java/com/mercadopago/sample/service/CardPaymentService.java b/src/main/java/com/mercadopago/sample/service/CardPaymentService.java
@@ -39,6 +39,8 @@ public PaymentResponseDTO processPayment(CardPaymentDTO cardPaymentDTO) {
 
             Payment createdPayment = payment.save();
 
+            this.validatePaymentResult(createdPayment);
+
             PaymentResponseDTO paymentResponseDTO = new PaymentResponseDTO(
                     createdPayment.getId(),
                     String.valueOf(createdPayment.getStatus()),
@@ -47,7 +49,21 @@ public PaymentResponseDTO processPayment(CardPaymentDTO cardPaymentDTO) {
 
             return paymentResponseDTO;
         } catch (MPException exception) {
+            System.out.println(exception.getMessage());
             throw new MercadoPagoException(exception.getMessage());
         }
     }
+
+    private void validatePaymentResult(Payment createdPayment) throws MPException {
+        if(createdPayment.getId() == null) {
+            String errorMessage = "Unknown error cause";
+
+            if(createdPayment.getLastApiResponse() != null) {
+                String sdkErrorMessage = createdPayment.getLastApiResponse().getJsonElementResponse().getAsJsonObject().get("message").getAsString();
+                errorMessage = sdkErrorMessage != null ? sdkErrorMessage : errorMessage;
+            }
+
+            throw new MPException(errorMessage);
+        }
+    }
 }
diff --git a/src/main/resources/static/css/index.css b/src/main/resources/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/src/main/resources/static/img/fail.png b/src/main/resources/static/img/fail.png
diff --git a/src/main/resources/static/js/index.js b/src/main/resources/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.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/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -154,11 +154,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 th: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>