diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CardFieldsRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CardFieldsRenderer.js index 377568fcb..187cf9834 100644 --- 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 index 8524f1f6d..11bb94352 100644 --- 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( + '•••• •••• •••• ••••', + esc_attr__( 'Card number', 'woocommerce-paypal-payments' ), + $default_fields['card-number-field'] + ); + } + } + return $default_fields; }, 10,