diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
index 0ddafdd15..fcd20a609 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
@@ -10,6 +10,7 @@ class CreditCardRenderer {
         this.spinner = spinner;
         this.cardValid = false;
         this.formValid = false;
+        this.emptyFields = new Set(['number', 'cvv', 'expirationDate']);
         this.currentHostedFieldsInstance = null;
     }
 
@@ -130,7 +131,7 @@ class CreditCardRenderer {
                     return event.fields[key].isValid;
                 });
 
-                const className = this._cardNumberFiledCLassNameByCardType(event.cards[0].type);
+                const className = event.cards.length ? this._cardNumberFiledCLassNameByCardType(event.cards[0].type) : '';
                 event.fields.number.isValid
                     ? cardNumber.classList.add(className)
                     : this._recreateElementClassAttribute(cardNumber, cardNumberField.className);
@@ -138,6 +139,12 @@ class CreditCardRenderer {
                this.formValid = formValid;
 
             });
+            hostedFields.on('empty', (event) => {
+                this.emptyFields.add(event.emittedBy);
+            });
+            hostedFields.on('notEmpty', (event) => {
+                this.emptyFields.delete(event.emittedBy);
+            });
 
             show(buttonSelector);
 
@@ -249,7 +256,16 @@ class CreditCardRenderer {
             });
         } else {
             this.spinner.unblock();
-            const message = ! this.cardValid ? this.defaultConfig.hosted_fields.labels.card_not_supported : this.defaultConfig.hosted_fields.labels.fields_not_valid;
+
+            let message = this.defaultConfig.labels.error.generic;
+            if (this.emptyFields.size > 0) {
+                message = this.defaultConfig.hosted_fields.labels.fields_empty;
+            } else if (!this.cardValid) {
+                message = this.defaultConfig.hosted_fields.labels.card_not_supported;
+            } else if (!this.formValid) {
+                message = this.defaultConfig.hosted_fields.labels.fields_not_valid;
+            }
+
             this.errorHandler.message(message);
         }
     }
diff --git a/modules/ppcp-button/src/Assets/SmartButton.php b/modules/ppcp-button/src/Assets/SmartButton.php
index 7f07c332a..bc4e4d82b 100644
--- a/modules/ppcp-button/src/Assets/SmartButton.php
+++ b/modules/ppcp-button/src/Assets/SmartButton.php
@@ -893,6 +893,10 @@ class SmartButton implements SmartButtonInterface {
 					'credit_card_number'       => '',
 					'cvv'                      => '',
 					'mm_yy'                    => __( 'MM/YY', 'woocommerce-paypal-payments' ),
+					'fields_empty'             => __(
+						'Card payment details are missing. Please fill in all required fields.',
+						'woocommerce-paypal-payments'
+					),
 					'fields_not_valid'         => __(
 						'Unfortunately, your credit card details are not valid.',
 						'woocommerce-paypal-payments'