Add translations to Card Fields inputs and labelds.

woocommerce · Dec 22, 2023 · 00dfa61 · 00dfa61
1 parent 425b7b4
commit 00dfa61
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CardFieldsRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CardFieldsRenderer.js
@@ -55,28 +55,52 @@ class CardFieldsRenderer {
             const nameField = document.getElementById('ppcp-credit-card-gateway-card-name');
             if (nameField) {
                 let styles = cardFieldStyles(nameField);
-                cardField.NameField({style: {'input': styles}}).render(nameField.parentNode);
+                let fieldOptions = {
+                    style: { 'input': styles }
+                }
+                if (nameField.getAttribute('placeholder')) {
+                    fieldOptions.placeholder = nameField.getAttribute('placeholder');
+                }
+                cardField.NameField(fieldOptions).render(nameField.parentNode);
                 nameField.remove();
             }
 
             const numberField = document.getElementById('ppcp-credit-card-gateway-card-number');
             if (numberField) {
                 let styles = cardFieldStyles(numberField);
-                cardField.NumberField({style: {'input': styles}}).render(numberField.parentNode);
+                let fieldOptions = {
+                    style: { 'input': styles }
+                }
+                if (numberField.getAttribute('placeholder')) {
+                    fieldOptions.placeholder = numberField.getAttribute('placeholder');
+                }
+                cardField.NumberField(fieldOptions).render(numberField.parentNode);
                 numberField.remove();
             }
 
             const expiryField = document.getElementById('ppcp-credit-card-gateway-card-expiry');
             if (expiryField) {
                 let styles = cardFieldStyles(expiryField);
-                cardField.ExpiryField({style: {'input': styles}}).render(expiryField.parentNode);
+                let fieldOptions = {
+                    style: { 'input': styles }
+                }
+                if (expiryField.getAttribute('placeholder')) {
+                    fieldOptions.placeholder = expiryField.getAttribute('placeholder');
+                }
+                cardField.ExpiryField(fieldOptions).render(expiryField.parentNode);
                 expiryField.remove();
             }
 
             const cvvField = document.getElementById('ppcp-credit-card-gateway-card-cvc');
             if (cvvField) {
                 let styles = cardFieldStyles(cvvField);
-                cardField.CVVField({style: {'input': styles}}).render(cvvField.parentNode);
+                let fieldOptions = {
+                    style: { 'input': styles }
+                }
+                if (cvvField.getAttribute('placeholder')) {
+                    fieldOptions.placeholder = cvvField.getAttribute('placeholder');
+                }
+                cardField.CVVField(fieldOptions).render(cvvField.parentNode);
                 cvvField.remove();
             }
 

diff --git a/modules/ppcp-card-fields/src/CardFieldsModule.php b/modules/ppcp-card-fields/src/CardFieldsModule.php
@@ -80,6 +80,17 @@ function( $default_fields, $id ) {
 					array_unshift( $default_fields, $new_field );
 				}
 
+				if ( apply_filters( 'woocommerce_paypal_payments_card_fields_translate_card_number', true ) ) {
+					if ( isset( $default_fields['card-number-field'] ) ) {
+						// Replaces the default card number placeholder with a translatable one.
+						$default_fields['card-number-field'] = str_replace(
+							'&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;',
+							esc_attr__( 'Card number', 'woocommerce-paypal-payments' ),
+							$default_fields['card-number-field']
+						);
+					}
+				}
+
 				return $default_fields;
 			},
 			10,