diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js index 0ddafdd15..ac0d62841 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; } @@ -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'