Skip to content

Commit 2fce098

Browse files
jimmynjimmyn
committed
feat: show payment method descriptions only in redirect mode
- Updated PayPal, Bizum, MBWay, and Multibanco settings to conditionally show description fields only when redirect mode is enabled - Added custom CSS classes to description fields for conditional visibility - Implemented generic JavaScript logic to toggle description field visibility based on redirect mode checkbox state - Modified CC gateway to display description only in redirect mode (not in component/embedded mode) - Removed description display from subscription change payment page (always uses component mode) Descriptions are now only visible to customers when using redirect flow, providing clearer UX by avoiding unnecessary text when payment components are embedded directly on checkout.
1 parent 49268d3 commit 2fce098

File tree

6 files changed

+137
-41
lines changed

6 files changed

+137
-41
lines changed

‎assets/js/monei-settings.js‎

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,48 @@
1-
jQuery( document ).ready(
2-
function ($) {
3-
// Function to toggle API key fields
4-
function toggleApiKeyFields() {
5-
var mode = $( '#monei_apikey_mode' ).val();
6-
if (mode === 'test') {
7-
$( '.monei-test-api-key-field' ).closest( 'tr' ).show();
8-
$( '.monei-live-api-key-field' ).closest( 'tr' ).hide();
1+
jQuery( document ).ready( function ( $ ) {
2+
// Function to toggle API key fields
3+
function toggleApiKeyFields() {
4+
const mode = $( '#monei_apikey_mode' ).val();
5+
if ( mode === 'test' ) {
6+
$( '.monei-test-api-key-field' ).closest( 'tr' ).show();
7+
$( '.monei-live-api-key-field' ).closest( 'tr' ).hide();
8+
} else {
9+
$( '.monei-test-api-key-field' ).closest( 'tr' ).hide();
10+
$( '.monei-live-api-key-field' ).closest( 'tr' ).show();
11+
}
12+
}
13+
14+
// Generic function to toggle description fields based on redirect mode
15+
function toggleDescriptionField( paymentMethod ) {
16+
const redirectCheckbox = $( '#woocommerce_monei_' + paymentMethod + '_' + paymentMethod + '_mode' );
17+
const descriptionField = $( '.monei-' + paymentMethod + '-description-field' );
18+
19+
if ( redirectCheckbox.length ) {
20+
// If redirect mode checkbox exists, show/hide based on its state
21+
if ( redirectCheckbox.is( ':checked' ) ) {
22+
descriptionField.closest( 'tr' ).show();
923
} else {
10-
$( '.monei-test-api-key-field' ).closest( 'tr' ).hide();
11-
$( '.monei-live-api-key-field' ).closest( 'tr' ).show();
24+
descriptionField.closest( 'tr' ).hide();
1225
}
26+
} else {
27+
// If no redirect mode checkbox, always hide description
28+
descriptionField.closest( 'tr' ).hide();
1329
}
30+
}
1431

15-
// Initial call to set the correct fields on page load
16-
toggleApiKeyFields();
32+
// Payment methods that have description fields
33+
const paymentMethods = ['paypal', 'bizum', 'mbway', 'multibanco'];
1734

18-
// Bind the function to the change event of the selector
19-
$( '#monei_apikey_mode' ).change( toggleApiKeyFields );
20-
}
21-
);
35+
// Initial call to set the correct fields on page load
36+
toggleApiKeyFields();
37+
paymentMethods.forEach( function( method ) {
38+
toggleDescriptionField( method );
39+
} );
40+
41+
// Bind the function to the change event of the selectors
42+
$( '#monei_apikey_mode' ).change( toggleApiKeyFields );
43+
paymentMethods.forEach( function( method ) {
44+
$( '#woocommerce_monei_' + method + '_' + method + '_mode' ).change( function() {
45+
toggleDescriptionField( method );
46+
} );
47+
} );
48+
} );

‎includes/admin/monei-bizum-settings.php‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,20 @@
3333
'label' => __( 'Enable Bizum by MONEI', 'monei' ),
3434
'default' => 'no',
3535
),
36+
'bizum_mode' => array(
37+
'title' => __( 'Use Redirect Flow', 'monei' ),
38+
'type' => 'checkbox',
39+
'label' => __( 'This will redirect the customer to the Hosted Payment Page.', 'monei' ),
40+
'default' => 'no',
41+
'description' => sprintf( __( 'If disabled the Bizum button will be rendered directly on the checkout page. It is recommended to enable redirection in cases where Bizum payments do not function correctly.', 'monei' ) ),
42+
),
43+
'bizum_style' => array(
44+
'title' => __( 'Bizum Style', 'monei' ),
45+
'type' => 'textarea',
46+
'description' => __( 'Configure in JSON format the style of the Bizum component. Documentation: ', 'monei' ) . '<a href="https://docs.monei.com/docs/monei-js/reference/#bizum-options" target="_blank">MONEI Bizum Style</a>',
47+
'default' => '{"height": "42"}',
48+
'css' => 'min-height: 80px;',
49+
),
3650
'title' => array(
3751
'title' => __( 'Title', 'monei' ),
3852
'type' => 'text',
@@ -43,8 +57,9 @@
4357
'description' => array(
4458
'title' => __( 'Description', 'monei' ),
4559
'type' => 'textarea',
46-
'description' => __( 'The payment method description a user sees during checkout.', 'monei' ),
47-
'default' => __( 'Pay with Bizum, you will be redirected to Bizum. Powered by MONEI', 'monei' ),
60+
'description' => __( 'This description is only displayed when using redirect mode. It will be shown to customers before they are redirected to the payment page.', 'monei' ),
61+
'default' => __( 'Pay with Bizum. Powered by MONEI.', 'monei' ),
62+
'class' => 'monei-bizum-description-field',
4863
),
4964
'hide_logo' => array(
5065
'title' => __( 'Hide Logo', 'monei' ),

‎includes/admin/monei-mbway-settings.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,9 @@
4343
'description' => array(
4444
'title' => __( 'Description', 'monei' ),
4545
'type' => 'textarea',
46-
'description' => __( 'The payment method description a user sees during checkout.', 'monei' ),
47-
'default' => __( 'Pay with MBWay, you will be redirected to MBWay. Powered by MONEI', 'monei' ),
46+
'description' => __( 'This description is only displayed when using redirect mode. It will be shown to customers before they are redirected to the payment page.', 'monei' ),
47+
'default' => __( 'Pay with MBWay. Powered by MONEI.', 'monei' ),
48+
'class' => 'monei-mbway-description-field',
4849
),
4950
'hide_logo' => array(
5051
'title' => __( 'Hide Logo', 'monei' ),

‎includes/admin/monei-multibanco-settings.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,9 @@
4343
'description' => array(
4444
'title' => __( 'Description', 'monei' ),
4545
'type' => 'textarea',
46-
'description' => __( 'The payment method description a user sees during checkout.', 'monei' ),
47-
'default' => __( 'Pay with Multibanco, you will be redirected to Multibanco. Powered by MONEI', 'monei' ),
46+
'description' => __( 'This description is only displayed when using redirect mode. It will be shown to customers before they are redirected to the payment page.', 'monei' ),
47+
'default' => __( 'Pay with Multibanco. Powered by MONEI.', 'monei' ),
48+
'class' => 'monei-multibanco-description-field',
4849
),
4950
'hide_logo' => array(
5051
'title' => __( 'Hide Logo', 'monei' ),

‎includes/admin/monei-paypal-settings.php‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,20 @@
3333
'label' => __( 'Enable PayPal by MONEI', 'monei' ),
3434
'default' => 'no',
3535
),
36+
'paypal_mode' => array(
37+
'title' => __( 'Use Redirect Flow', 'monei' ),
38+
'type' => 'checkbox',
39+
'label' => __( 'This will redirect the customer to the Hosted Payment Page.', 'monei' ),
40+
'default' => 'no',
41+
'description' => sprintf( __( 'If disabled the PayPal button will be rendered directly on the checkout page. It is recommended to enable redirection in cases where PayPal payments do not function correctly.', 'monei' ) ),
42+
),
43+
'paypal_style' => array(
44+
'title' => __( 'PayPal Style', 'monei' ),
45+
'type' => 'textarea',
46+
'description' => __( 'Configure in JSON format the style of the PayPal component. Documentation: ', 'monei' ) . '<a href="https://docs.monei.com/docs/monei-js/reference/#paypal-options" target="_blank">MONEI PayPal Style</a>',
47+
'default' => '{"height": "42"}',
48+
'css' => 'min-height: 80px;',
49+
),
3650
'title' => array(
3751
'title' => __( 'Title', 'monei' ),
3852
'type' => 'text',
@@ -43,8 +57,9 @@
4357
'description' => array(
4458
'title' => __( 'Description', 'monei' ),
4559
'type' => 'textarea',
46-
'description' => __( 'The payment method description a user sees during checkout.', 'monei' ),
47-
'default' => __( 'Pay with PayPal, you will be redirected to PayPal. Powered by MONEI.', 'monei' ),
60+
'description' => __( 'This description is only displayed when using redirect mode. It will be shown to customers before they are redirected to the payment page.', 'monei' ),
61+
'default' => __( 'Pay with PayPal. Powered by MONEI.', 'monei' ),
62+
'class' => 'monei-paypal-description-field',
4863
),
4964
'hide_logo' => array(
5065
'title' => __( 'Hide Logo', 'monei' ),

‎src/Gateways/PaymentMethods/WCGatewayMoneiCC.php‎

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
* Class WC_Gateway_Monei_CC
3636
*/
3737
class WCGatewayMoneiCC extends WCMoneiPaymentGatewayComponent {
38-
const PAYMENT_METHOD = 'card';
39-
protected static $scripts_enqueued = false;
38+
const PAYMENT_METHOD = 'card';
39+
protected static $scripts_enqueued = false;
4040

4141
/**
4242
* @var bool
@@ -63,7 +63,7 @@ public function __construct(
6363
MoneiPaymentServices $moneiPaymentServices,
6464
SubscriptionService $subscriptionService
6565
) {
66-
parent::__construct( $paymentMethodsService, $templateManager, $apiKeyService, $moneiPaymentServices, $subscriptionService );
66+
parent::__construct( $paymentMethodsService, $templateManager, $apiKeyService, $moneiPaymentServices );
6767
$this->id = MONEI_GATEWAY_ID;
6868
$this->method_title = __( 'MONEI - Credit Card', 'monei' );
6969
$this->enabled = ( ! empty( $this->get_option( 'enabled' ) && 'yes' === $this->get_option( 'enabled' ) ) && $this->is_valid_for_use() ) ? 'yes' : false;
@@ -75,7 +75,7 @@ public function __construct(
7575

7676
$description = ! empty( $this->get_option( 'description' ) )
7777
? $this->get_option( 'description' )
78-
: '&nbsp;'; // Non-breaking space if description is empty
78+
: ''; // Non-breaking space if description is empty
7979

8080
// Hosted payment with redirect.
8181
$this->has_fields = false;
@@ -87,7 +87,7 @@ public function __construct(
8787
$this->redirect_flow = ( ! empty( $this->get_option( 'cc_mode' ) && 'yes' === $this->get_option( 'cc_mode' ) ) ) ? true : false;
8888
$this->testmode = $this->getTestmode();
8989
$this->title = ( ! empty( $this->get_option( 'title' ) ) ) ? $this->get_option( 'title' ) : '';
90-
$this->description = ( ! empty( $this->get_option( 'description' ) ) ) ? $this->get_option( 'description' ) : '&nbsp;';
90+
$this->description = ( ! empty( $this->get_option( 'description' ) ) ) ? $this->get_option( 'description' ) : '';
9191
$this->status_after_payment = ( ! empty( $this->get_option( 'orderdo' ) ) ) ? $this->get_option( 'orderdo' ) : '';
9292
$this->account_id = $this->getAccountId();
9393
$this->api_key = $this->getApiKey();
@@ -169,6 +169,39 @@ public function init_form_fields() {
169169
$this->form_fields = require WC_Monei()->plugin_path() . '/includes/admin/monei-cc-settings.php';
170170
}
171171

172+
/**
173+
* Validate card_input_style field
174+
*
175+
* @param string $key
176+
* @param string $value
177+
* @return string
178+
*/
179+
public function validate_card_input_style_field( $key, $value ) {
180+
if ( empty( $value ) ) {
181+
return $value;
182+
}
183+
184+
// WordPress adds slashes to $_POST data, we need to remove them before validating JSON
185+
$value = stripslashes( $value );
186+
187+
// Try to decode JSON
188+
json_decode( $value );
189+
190+
// Check for JSON errors
191+
if ( json_last_error() !== JSON_ERROR_NONE ) {
192+
\WC_Admin_Settings::add_error(
193+
sprintf(
194+
/* translators: %s: JSON error message */
195+
__( 'Card Input Style field contains invalid JSON: %s', 'monei' ),
196+
json_last_error_msg()
197+
)
198+
);
199+
return $this->get_option( 'card_input_style', '{"base": {"height": "50px"}, "input": {"background": "none"}}' );
200+
}
201+
202+
return $value;
203+
}
204+
172205
/**
173206
* Process the payment and return the result
174207
*
@@ -270,7 +303,7 @@ public function payment_fields() {
270303
$this->render_monei_form();
271304
} elseif ( $this->handler !== null && $this->handler->is_subscription_change_payment_page() ) {
272305
// On subscription change payment page, we always use component CC.
273-
echo esc_html( $this->description );
306+
// Description not shown in component mode (non-redirect)
274307
if ( $this->tokenization ) {
275308
$this->saved_payment_methods();
276309
}
@@ -280,8 +313,10 @@ public function payment_fields() {
280313
}
281314
} else {
282315
// Checkout screen.
283-
// We show description, if tokenization available, we show saved cards and checkbox to save.
284-
echo esc_html( $this->description );
316+
// Show description only in redirect mode
317+
if ( $this->redirect_flow && $this->description ) {
318+
echo esc_html( $this->description );
319+
}
285320
if ( $this->tokenization ) {
286321
$this->saved_payment_methods();
287322
// If Component CC
@@ -340,12 +375,12 @@ class="wc-block-components-validation-error"
340375
* Registering MONEI JS library and plugin js.
341376
*/
342377
public function monei_scripts() {
343-
if (self::$scripts_enqueued || !$this->should_load_scripts()){
344-
return;
345-
}
378+
if ( self::$scripts_enqueued || ! $this->should_load_scripts() ) {
379+
return;
380+
}
346381

347382
// If merchant wants Component CC or is_add_payment_method_page that always use this component method.
348-
if ( $this->redirect_flow || (! is_checkout() && ! is_add_payment_method_page() && ($this->handler && ! $this->handler->is_subscription_change_payment_page() ) ) ) {
383+
if ( $this->redirect_flow || ( ! is_checkout() && ! is_add_payment_method_page() && ( $this->handler && ! $this->handler->is_subscription_change_payment_page() ) ) ) {
349384
return;
350385
}
351386

@@ -369,7 +404,8 @@ public function monei_scripts() {
369404
);
370405
wp_enqueue_script( 'monei' );
371406
// Determine the total amount to be passed
372-
$total = $this->determineTheTotalAmountToBePassed();
407+
$total = $this->determineTheTotalAmountToBePassed();
408+
$card_input_style = $this->get_option( 'card_input_style', '{"base": {"height": "50px"}, "input": {"background": "none"}}' );
373409
wp_localize_script(
374410
'woocommerce_monei',
375411
'wc_monei_params',
@@ -379,15 +415,16 @@ public function monei_scripts() {
379415
'total' => monei_price_format( $total ),
380416
'currency' => get_woocommerce_currency(),
381417
'apple_logo' => WC_Monei()->image_url( 'apple-logo.svg' ),
418+
'card_input_style' => json_decode( $card_input_style ),
382419
)
383420
);
384421

385422
wp_enqueue_script( 'woocommerce_monei' );
386423
$this->tokenization_script();
387-
self::$scripts_enqueued = true;
424+
self::$scripts_enqueued = true;
425+
}
426+
protected function should_load_scripts() {
427+
return is_checkout() || is_cart() || is_product() || is_add_payment_method_page();
388428
}
389-
protected function should_load_scripts() {
390-
return is_checkout() || is_cart() || is_product() || is_add_payment_method_page();
391-
}
392429
}
393430

0 commit comments

Comments
 (0)