Skip to content

Commit 8aa2787

Browse files
jimmynjimmyn
committed
fix: resolve order-pay page issues for all payment methods
- Add has_fields() method to Apple/Google Pay gateway to render payment_box - Add MutationObserver to Apple/Google Pay for order-pay page initialization - Change PayPal classic from monei.PaymentRequest() to monei.PayPal() method - Add dynamic container creation for PayPal, Bizum, and Apple/Google Pay on order-pay page - Prevent blocks scripts from loading on classic order-pay page - Fix description display to only show in redirect mode for Apple/Google Pay - Fix initialization order in all payment method JavaScript files - Remove saved cards from order-pay page (matching Stripe behavior) Fixes issues where: - Credit card only displayed tokenized cards without new card input - Apple Pay/Google Pay didn't show at all with container error - PayPal rendered Google Pay button instead of PayPal
1 parent c1b4a38 commit 8aa2787

13 files changed

+197
-34
lines changed

‎assets/js/monei-apple-google-classic.js‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,25 @@
2323
}
2424
} );
2525

26+
const targetNode = document.getElementById( 'order_review' );
27+
28+
if ( targetNode ) {
29+
const observer = new MutationObserver( function (
30+
mutationsList,
31+
observer
32+
) {
33+
for ( const mutation of mutationsList ) {
34+
if ( mutation.type === 'childList' ) {
35+
if ( wc_monei_form.is_apple_selected() ) {
36+
wc_monei_form.on_payment_selected();
37+
}
38+
}
39+
}
40+
} );
41+
42+
observer.observe( targetNode, { childList: true, subtree: true } );
43+
}
44+
2645
var wc_monei_form = {
2746
$checkout_form: $( 'form.woocommerce-checkout' ),
2847
$add_payment_form: $( 'form#add_payment_method' ),
@@ -56,12 +75,13 @@
5675

5776
// Pay for order ( change_payment_method for subscriptions)
5877
if ( this.$order_pay_form.length ) {
78+
this.is_order_pay = true;
79+
this.form = this.$order_pay_form;
80+
5981
if ( wc_monei_form.is_apple_selected() ) {
6082
wc_monei_form.init_apple_google_pay();
6183
}
6284

63-
this.is_order_pay = true;
64-
this.form = this.$order_pay_form;
6585

6686
$( 'input[name="payment_method"]' ).on( 'change', function () {
6787
// Check if the apple google pay method is selected
@@ -109,6 +129,33 @@
109129
return $( '#payment_method_monei_apple_google' ).is( ':checked' );
110130
},
111131
init_apple_google_pay() {
132+
// Check if container exists, create if needed (for order-pay page)
133+
let container = document.getElementById( 'payment-request-container' );
134+
if ( ! container ) {
135+
// Create container structure if it doesn't exist
136+
const paymentMethodLi = document.querySelector( '#payment_method_monei_apple_google' )?.closest( 'li' );
137+
if ( ! paymentMethodLi ) {
138+
return;
139+
}
140+
141+
// Create the container structure
142+
const fieldset = document.createElement( 'fieldset' );
143+
fieldset.id = 'wc-monei_apple_google-payment-request-form';
144+
fieldset.className = 'wc-payment-request-form';
145+
fieldset.style.background = 'transparent';
146+
fieldset.style.border = 'none';
147+
148+
const formDiv = document.createElement( 'div' );
149+
formDiv.id = 'payment-request-form';
150+
151+
container = document.createElement( 'div' );
152+
container.id = 'payment-request-container';
153+
154+
formDiv.appendChild( container );
155+
fieldset.appendChild( formDiv );
156+
paymentMethodLi.appendChild( fieldset );
157+
}
158+
112159
// If checkout is updated (and monei was initiated already), ex, selecting new shipping methods, checkout is re-render by the ajax call.
113160
// and we need to reset the counter in order to initiate again the monei component.
114161
if (

‎assets/js/monei-bizum-classic.js‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,12 @@
7979

8080
// Pay for order ( change_payment_method for subscriptions)
8181
if ( this.$order_pay_form.length ) {
82-
if ( wc_bizum_form.is_bizum_selected() ) {
83-
wc_bizum_form.init_checkout_bizum();
84-
}
8582
this.is_order_pay = true;
8683
this.form = this.$order_pay_form;
8784
// Form reference set
85+
if ( wc_bizum_form.is_bizum_selected() ) {
86+
wc_bizum_form.init_checkout_bizum();
87+
}
8888
}
8989

9090
if ( this.form ) {
@@ -153,6 +153,29 @@
153153
window.bizumRequest = paymentRequest;
154154
},
155155
init_checkout_bizum() {
156+
// Check if container exists, create if needed (for order-pay page)
157+
let container = document.getElementById( 'bizum-container' );
158+
if ( ! container ) {
159+
// Create container structure if it doesn't exist
160+
const paymentMethodLi = document.querySelector( '#payment_method_monei_bizum' )?.closest( 'li' );
161+
if ( ! paymentMethodLi ) {
162+
return;
163+
}
164+
165+
// Create the container structure
166+
const fieldset = document.createElement( 'fieldset' );
167+
fieldset.id = 'wc-monei_bizum-cc-form';
168+
fieldset.className = 'wc-bizum-form';
169+
fieldset.style.background = 'transparent';
170+
fieldset.style.border = 'none';
171+
172+
container = document.createElement( 'div' );
173+
container.id = 'bizum-container';
174+
175+
fieldset.appendChild( container );
176+
paymentMethodLi.appendChild( fieldset );
177+
}
178+
156179
// If checkout is updated (and monei was initiated already), ex, selecting new shipping methods, checkout is re-render by the ajax call.
157180
// and we need to reset the counter in order to initiate again the monei component.
158181
if (

‎assets/js/monei-paypal-classic.js‎

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -77,27 +77,27 @@
7777
this.form = this.$add_payment_form;
7878
}
7979

80-
// Pay for order ( change_payment_method for subscriptions)
81-
if ( this.$order_pay_form.length ) {
82-
if ( wc_paypal_form.is_paypal_selected() ) {
83-
wc_paypal_form.init_checkout_paypal();
80+
// Pay for order ( change_payment_method for subscriptions)
81+
if ( this.$order_pay_form.length ) {
82+
this.is_order_pay = true;
83+
this.form = this.$order_pay_form;
84+
// Form reference set
85+
if ( wc_paypal_form.is_paypal_selected() ) {
86+
wc_paypal_form.init_checkout_paypal();
87+
}
8488
}
85-
this.is_order_pay = true;
86-
this.form = this.$order_pay_form;
87-
// Form reference set
88-
}
8989

90-
if ( this.form ) {
91-
this.form.on( 'change', this.on_change );
92-
}
93-
},
94-
on_change() {
95-
// Triggers on payment method selection.
96-
$( "[name='payment_method']" ).on( 'change', function () {
97-
wc_paypal_form.on_payment_selected();
98-
} );
99-
},
100-
on_payment_selected() {
90+
if ( this.form ) {
91+
this.form.on( 'change', this.on_change );
92+
}
93+
},
94+
on_change() {
95+
// Triggers on payment method selection.
96+
$( "[name='payment_method']" ).on( 'change', function () {
97+
wc_paypal_form.on_payment_selected();
98+
} );
99+
},
100+
on_payment_selected() {
101101
if ( wc_paypal_form.is_paypal_selected() ) {
102102
wc_paypal_form.init_checkout_paypal();
103103
if ( wc_paypal_form.is_checkout ) {
@@ -133,14 +133,13 @@
133133
wc_paypal_form.instantiate_payment_request();
134134
},
135135
instantiate_payment_request() {
136-
const paymentRequest = monei.PaymentRequest( {
136+
const paymentRequest = monei.PayPal( {
137137
accountId: wc_paypal_params.account_id,
138138
sessionId: wc_paypal_params.session_id,
139139
amount: parseInt( wc_paypal_form.total ),
140140
currency: wc_paypal_params.currency,
141141
language: wc_paypal_params.language,
142-
paymentMethod: 'paypal',
143-
style: wc_paypal_params.paypal_style || {},
142+
style: wc_paypal_params.paypal_style || {},
144143
onSubmit( result ) {
145144
$( '#place_order' ).prop( 'disabled', false );
146145
wc_paypal_form.request_token_handler( result.token );
@@ -149,12 +148,35 @@
149148
// Error handling is managed by MONEI SDK
150149
},
151150
} );
152-
// Render an instance of the Payment Request Component into the `payment_request_container` <div>.
151+
// Render an instance of the PayPal Component into the `paypal-container` <div>.
153152
paymentRequest.render( '#paypal-container' );
154153
// Assign a global variable to paymentRequest so it's accessible.
155154
window.paypalRequest = paymentRequest;
156155
},
157156
init_checkout_paypal() {
157+
// Check if container exists, create if needed (for order-pay page)
158+
let container = document.getElementById( 'paypal-container' );
159+
if ( ! container ) {
160+
// Create container structure if it doesn't exist
161+
const paymentMethodLi = document.querySelector( '#payment_method_monei_paypal' )?.closest( 'li' );
162+
if ( ! paymentMethodLi ) {
163+
return;
164+
}
165+
166+
// Create the container structure
167+
const fieldset = document.createElement( 'fieldset' );
168+
fieldset.id = 'wc-monei_paypal-form';
169+
fieldset.className = 'wc-paypal-form';
170+
fieldset.style.background = 'transparent';
171+
fieldset.style.border = 'none';
172+
173+
container = document.createElement( 'div' );
174+
container.id = 'paypal-container';
175+
176+
fieldset.appendChild( container );
177+
paymentMethodLi.appendChild( fieldset );
178+
}
179+
158180
// If checkout is updated (and monei was initiated already), ex, selecting new shipping methods, checkout is re-render by the ajax call.
159181
// and we need to reset the counter in order to initiate again the monei component.
160182
if (

‎src/Gateways/Blocks/MoneiAppleGoogleBlocksSupport.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ public function initialize() {
2727

2828

2929
public function is_active() {
30+
// Order-pay page always uses classic checkout
31+
if ( is_checkout_pay_page() ) {
32+
return false;
33+
}
34+
3035
$id = $this->gateway->getAccountId() ?? false;
3136

3237
$key = $this->gateway->getApiKey() ?? false;
@@ -40,6 +45,11 @@ public function is_active() {
4045

4146

4247
public function get_payment_method_script_handles() {
48+
// Order-pay page uses classic checkout, not blocks
49+
if ( is_checkout_pay_page() ) {
50+
return array();
51+
}
52+
4353
wp_register_script( 'monei', 'https://js.monei.com/v2/monei.js', '', '2.0', true );
4454
wp_enqueue_script( 'monei' );
4555

‎src/Gateways/Blocks/MoneiBizumBlocksSupport.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ public function initialize() {
2626
}
2727

2828
public function get_payment_method_script_handles() {
29+
// Order-pay page uses classic checkout, not blocks
30+
if ( is_checkout_pay_page() ) {
31+
return array();
32+
}
2933

3034
$script_name = 'wc-monei-bizum-blocks-integration';
3135

@@ -52,6 +56,10 @@ public function get_payment_method_script_handles() {
5256
}
5357

5458
public function is_active() {
59+
// Order-pay page always uses classic checkout
60+
if ( is_checkout_pay_page() ) {
61+
return false;
62+
}
5563

5664
$id = $this->gateway->getAccountId() ?? false;
5765

‎src/Gateways/Blocks/MoneiCCBlocksSupport.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ public function initialize() {
2424

2525

2626
public function is_active() {
27+
// Order-pay page always uses classic checkout
28+
if ( is_checkout_pay_page() ) {
29+
return false;
30+
}
31+
2732
$id = $this->gateway->getAccountId() ?? false;
2833
$key = $this->gateway->getApiKey() ?? false;
2934

@@ -50,6 +55,11 @@ public function filter_saved_payment_methods_list( $paymentMethods, $customer_id
5055

5156

5257
public function get_payment_method_script_handles() {
58+
// Order-pay page uses classic checkout, not blocks
59+
if ( is_checkout_pay_page() ) {
60+
return array();
61+
}
62+
5363
wp_register_script( 'monei', 'https://js.monei.com/v2/monei.js', '', '2.0', true );
5464
wp_enqueue_script( 'monei' );
5565

‎src/Gateways/Blocks/MoneiMBWayBlocksSupport.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ public function initialize() {
1919
}
2020

2121
public function get_payment_method_script_handles() {
22+
// Order-pay page uses classic checkout, not blocks
23+
if ( is_checkout_pay_page() ) {
24+
return array();
25+
}
2226

2327
$script_name = 'wc-monei-mbway-blocks-integration';
2428

@@ -45,6 +49,10 @@ public function get_payment_method_script_handles() {
4549
}
4650

4751
public function is_active() {
52+
// Order-pay page always uses classic checkout
53+
if ( is_checkout_pay_page() ) {
54+
return false;
55+
}
4856

4957
$id = $this->gateway->getAccountId() ?? false;
5058

‎src/Gateways/Blocks/MoneiMultibancoBlocksSupport.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ public function initialize() {
2020
}
2121

2222
public function get_payment_method_script_handles() {
23+
// Order-pay page uses classic checkout, not blocks
24+
if ( is_checkout_pay_page() ) {
25+
return array();
26+
}
2327

2428
$script_name = 'wc-monei-multibanco-blocks-integration';
2529

@@ -46,6 +50,10 @@ public function get_payment_method_script_handles() {
4650
}
4751

4852
public function is_active() {
53+
// Order-pay page always uses classic checkout
54+
if ( is_checkout_pay_page() ) {
55+
return false;
56+
}
4957

5058
$id = $this->gateway->getAccountId() ?? false;
5159

‎src/Gateways/Blocks/MoneiPaypalBlocksSupport.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ public function initialize() {
2020
}
2121

2222
public function get_payment_method_script_handles() {
23+
// Order-pay page uses classic checkout, not blocks
24+
if ( is_checkout_pay_page() ) {
25+
return array();
26+
}
2327

2428
$script_name = 'wc-monei-paypal-blocks-integration';
2529

@@ -47,6 +51,10 @@ public function get_payment_method_script_handles() {
4751
}
4852

4953
public function is_active() {
54+
// Order-pay page always uses classic checkout
55+
if ( is_checkout_pay_page() ) {
56+
return false;
57+
}
5058

5159
$id = $this->gateway->getAccountId() ?? false;
5260

‎src/Gateways/PaymentMethods/WCGatewayMoneiAppleGoogle.php‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ public function __construct(
6868
$saved_title = $this->get_option( 'title' );
6969
$this->title = $hide_title ? '' : ( ! empty( $saved_title ) ? $saved_title : $default_title );
7070
$this->hide_logo = ( ! empty( $this->get_option( 'hide_logo' ) ) && 'yes' === $this->get_option( 'hide_logo' ) ) ? true : false;
71+
$this->description = ( ! empty( $this->get_option( 'description' ) ) ) ? $this->get_option( 'description' ) : '';
7172
$iconUrl = apply_filters( 'woocommerce_monei_icon', WC_Monei()->image_url( 'google-logo.svg' ) );
7273
$iconMarkup = '<img src="' . $iconUrl . '" alt="MONEI" class="monei-icons" />';
7374
$this->testmode = $this->getTestmode();
@@ -242,12 +243,21 @@ public function process_payment( $order_id, $allowed_payment_method = null ) {
242243
return parent::process_payment( $order_id, self::PAYMENT_METHOD );
243244
}
244245

246+
/**
247+
* Check if gateway has fields.
248+
* @return bool
249+
*/
250+
public function has_fields() {
251+
return true;
252+
}
253+
245254
/**
246255
* Payments fields, shown on checkout or payment method page (add payment method).
247256
*/
248257
public function payment_fields() {
249258
ob_start();
250-
if ( $this->description ) {
259+
// Show description only in redirect mode
260+
if ( $this->redirect_flow && $this->description ) {
251261
echo wp_kses_post( wpautop( wptexturize( $this->description ) ) );
252262
}
253263
$this->render_google_pay_form();
@@ -283,7 +293,7 @@ public function isAppleAvailable() {
283293
}
284294

285295
protected function should_load_scripts() {
286-
return is_checkout();
296+
return is_checkout() || is_checkout_pay_page();
287297
}
288298
}
289299

0 commit comments

Comments
 (0)