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

feat: show sdk error message on frontend
mercadopago · Dec 16, 2021 · ec004bd · ec004bd
2 parents 65e1d08 + 31ed316
commit ec004bd
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 40 deletions.
diff --git a/client/css/index.css b/client/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/client/img/fail.png b/client/img/fail.png
diff --git a/client/index.html b/client/index.html
@@ -155,11 +155,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>

diff --git a/client/js/index.js b/client/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/server/server.php b/server/server.php
@@ -23,40 +23,64 @@
 
 // process card payment
 $app->post('/process_payment', function (Request $request, Response $response, $args) {
-    $contents = json_decode(file_get_contents('php://input'), true);
-    $parsed_request = $request->withParsedBody($contents);
-    $parsed_body = $parsed_request->getParsedBody();
-
-    $payment = new MercadoPago\Payment();
-    $payment->transaction_amount = $parsed_body['transactionAmount'];
-    $payment->token = $parsed_body['token'];
-    $payment->description = $parsed_body['description'];
-    $payment->installments = $parsed_body['installments'];
-    $payment->payment_method_id = $parsed_body['paymentMethodId'];
-    $payment->issuer_id = $parsed_body['issuerId'];
-
-    $payer = new MercadoPago\Payer();
-    $payer->email = $parsed_body['payer']['email'];
-    $payer->identification = array(
-        "type" => $parsed_body['payer']['identification']['type'],
-        "number" => $parsed_body['payer']['identification']['number']
-    );
-    $payment->payer = $payer;
-
-    $payment->save();
-
-    $response_fields = array(
-        'id' => $payment->id,
-        'status' => $payment->status,
-        'detail' => $payment->status_detail
-    );
-
-    $response_body = json_encode($response_fields);
-
-    $response->getBody()->write($response_body);
-    return $response->withHeader('Content-Type', 'application/json')->withStatus(201);
+    try {
+        $contents = json_decode(file_get_contents('php://input'), true);
+        $parsed_request = $request->withParsedBody($contents);
+        $parsed_body = $parsed_request->getParsedBody();
+
+        $payment = new MercadoPago\Payment();
+        $payment->transaction_amount = $parsed_body['transactionAmount'];
+        $payment->token = $parsed_body['token'];
+        $payment->description = $parsed_body['description'];
+        $payment->installments = $parsed_body['installments'];
+        $payment->payment_method_id = $parsed_body['paymentMethodId'];
+        $payment->issuer_id = $parsed_body['issuerId'];
+
+        $payer = new MercadoPago\Payer();
+        $payer->email = $parsed_body['payer']['email'];
+        $payer->identification = array(
+            "type" => $parsed_body['payer']['identification']['type'],
+            "number" => $parsed_body['payer']['identification']['number']
+        );
+        $payment->payer = $payer;
+
+        $payment->save();
+
+        validate_payment_result($payment);
+
+        $response_fields = array(
+            'id' => $payment->id,
+            'status' => $payment->status,
+            'detail' => $payment->status_detail
+        );
+
+        $response_body = json_encode($response_fields);
+        $response->getBody()->write($response_body);
+
+        return $response->withHeader('Content-Type', 'application/json')->withStatus(201);
+    } catch(Exception $exception) {
+        $response_fields = array('error_message' => $exception->getMessage());
+
+        $response_body = json_encode($response_fields);
+        $response->getBody()->write($response_body);
+
+        return $response->withHeader('Content-Type', 'application/json')->withStatus(400);
+    }
 });
 
+function validate_payment_result($payment) {
+    if($payment->id === null) {
+        $error_message = 'Unknown error cause';
+
+        if($payment->error !== null) {
+            $sdk_error_message = $payment->error->message;
+            $error_message = $sdk_error_message !== null ? $sdk_error_message : $error_message;
+        }
+
+        throw new Exception($error_message);
+    }   
+}
+
 $app->get('/{filetype}/{filename}', function (Request $request, Response $response, $args) {
     switch ($args['filetype']) {
         case 'css':