update error handling

buckaroo-it · Sep 27, 2024 · aee788e · aee788e
1 parent 1d5cc5e
commit aee788e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/view/frontend/web/js/view/payment/method-renderer/creditcards.js b/view/frontend/web/js/view/payment/method-renderer/creditcards.js
@@ -56,6 +56,7 @@ define(
             subTextStyle: checkoutCommon.getSubtextStyle('creditcards'),
 
             oauthTokenError: ko.observable(''),
+            paymentError: ko.observable(''),
 
             initialize: function (options) {
                 this._super(options);
@@ -93,6 +94,7 @@ define(
 
                 // Re-fetch the OAuth token and reinitialize the hosted fields
                 this.getOAuthToken();
+                this.paymentError('');
 
                 // Re-enable the submit button
                 let payButton = document.getElementById("pay");
@@ -190,8 +192,8 @@ define(
                                 this.service = sdkClient.getService();
                                 this.finalizePlaceOrder(event);
                             } catch (error) {
-                                console.error("Error during payment submission:", error);
-                                payButton.disabled = false; // Re-enable button if there's an error
+                                this.paymentError("Payment processing failed. Please try again.");
+                                payButton.disabled = false;
                             }
                         }.bind(this));
                     }
@@ -215,7 +217,7 @@ define(
                 }
 
                 if (!this.encryptedCardData) {
-                    console.error("Payment token is missing. Please try again.");
+                    this.paymentError("Payment token is missing. Please try again.");
                     return;
                 }
 
@@ -226,6 +228,7 @@ define(
                     $.when(placeOrder).fail(
                         function () {
                             self.isPlaceOrderActionAllowed(true);
+                            self.paymentError("Payment token is missing. Please try again.");
                         }
                     ).done(self.afterPlaceOrder.bind(self));
                     return true;

diff --git a/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html b/view/frontend/web/template/payment/buckaroo_magento2_creditcards.html
@@ -77,6 +77,7 @@
                     </div>
 
                     <div class="field oauth-token-error text-red-500" data-bind="text: oauthTokenError, visible: oauthTokenError"></div>
+                    <div class="field payment-error text-red-500" data-bind="text: paymentError, visible: paymentError"></div>
 
                     <div class="flex items-center justify-between">
                         <button id="pay"