Skip to content

Commit c1b4a38

Browse files
jimmynjimmyn
committed
fix: migrate onCheckoutSuccess to async/await pattern with proper response objects
- Changed onCheckoutSuccess handlers from promise chains to async/await - Return proper response objects with redirectUrl instead of direct window.location assignments - Fixed missing isProcessing state declaration in credit card component - Fixed inconsistent responseTypes usage (changed string literal 'error' to responseTypes.ERROR) - Updated all payment methods (Credit Card, Apple/Google Pay, Bizum, PayPal) for consistency
1 parent 2a894d5 commit c1b4a38

File tree

4 files changed

+181
-147
lines changed

4 files changed

+181
-147
lines changed

‎assets/js/components/monei-apple-google-component.js‎

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -129,56 +129,68 @@ export const MoneiAppleGoogleContent = ( props ) => {
129129
// Setup checkout success hook
130130
useEffect( () => {
131131
const unsubscribe = onCheckoutSuccess(
132-
( { processingResponse } ) => {
132+
async ( { processingResponse } ) => {
133133
const { paymentDetails } = processingResponse;
134134

135135
// If no paymentId, backend handles everything (redirect flow)
136136
if ( ! paymentDetails?.paymentId ) {
137-
return false;
137+
return {
138+
type: props.emitResponse.responseTypes.SUCCESS,
139+
};
138140
}
139141

140-
// Component mode: confirm payment with token
141-
const paymentId = paymentDetails.paymentId;
142-
const tokenValue = paymentDetails.token;
143-
// eslint-disable-next-line no-undef
144-
monei
145-
.confirmPayment( {
142+
try {
143+
// Component mode: confirm payment with token
144+
const paymentId = paymentDetails.paymentId;
145+
const tokenValue = paymentDetails.token;
146+
// eslint-disable-next-line no-undef
147+
const result = await monei.confirmPayment( {
146148
paymentId,
147149
paymentToken: tokenValue,
148-
} )
149-
.then( ( result ) => {
150-
if (
151-
result.nextAction &&
152-
result.nextAction.mustRedirect
153-
) {
154-
window.location.assign(
155-
result.nextAction.redirectUrl
156-
);
157-
}
158-
if ( result.status === 'FAILED' ) {
159-
const failUrl = new URL( paymentDetails.failUrl );
160-
failUrl.searchParams.set( 'status', 'FAILED' );
161-
window.location.href = failUrl.toString();
162-
} else {
163-
// Always include payment ID in redirect URL for order verification
164-
const { orderId, paymentId } = paymentDetails;
165-
const url = new URL( paymentDetails.completeUrl );
166-
url.searchParams.set( 'id', paymentId );
167-
url.searchParams.set( 'orderId', orderId );
168-
url.searchParams.set( 'status', result.status );
169-
170-
window.location.href = url.toString();
171-
}
172-
} )
173-
.catch( ( error ) => {
174-
console.error(
175-
'Error during payment confirmation:',
176-
error
177-
);
178-
window.location.href = paymentDetails.failUrl;
179150
} );
180151

181-
return true;
152+
if (
153+
result.nextAction &&
154+
result.nextAction.mustRedirect
155+
) {
156+
return {
157+
type: props.emitResponse.responseTypes.SUCCESS,
158+
redirectUrl: result.nextAction.redirectUrl,
159+
};
160+
}
161+
if ( result.status === 'FAILED' ) {
162+
const failUrl = new URL( paymentDetails.failUrl );
163+
failUrl.searchParams.set( 'status', 'FAILED' );
164+
return {
165+
type: props.emitResponse.responseTypes.SUCCESS,
166+
redirectUrl: failUrl.toString(),
167+
};
168+
} else {
169+
// Always include payment ID in redirect URL for order verification
170+
const { orderId, paymentId } = paymentDetails;
171+
const url = new URL( paymentDetails.completeUrl );
172+
url.searchParams.set( 'id', paymentId );
173+
url.searchParams.set( 'orderId', orderId );
174+
url.searchParams.set( 'status', result.status );
175+
176+
return {
177+
type: props.emitResponse.responseTypes.SUCCESS,
178+
redirectUrl: url.toString(),
179+
};
180+
}
181+
} catch ( error ) {
182+
console.error(
183+
'Error during payment confirmation:',
184+
error
185+
);
186+
return {
187+
type: props.emitResponse.responseTypes.ERROR,
188+
message:
189+
error.message || 'Payment confirmation failed',
190+
messageContext:
191+
props.emitResponse.noticeContexts.PAYMENTS,
192+
};
193+
}
182194
}
183195
);
184196

‎assets/js/components/monei-cc-component.js‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export const MoneiCCContent = ( props ) => {
2525
const isHostedWorkflow = moneiData.redirect === 'yes';
2626
const shouldSavePayment = props.shouldSavePayment;
2727
// State management
28-
const [ isProcessing, setIsProcessing ] = useState( false );
2928
const tokenRef = useRef( null );
29+
const [ isProcessing, setIsProcessing ] = useState( false );
3030

3131
// Form error management
3232
const formErrors = useFormErrors();
@@ -231,7 +231,9 @@ export const MoneiCCContent = ( props ) => {
231231

232232
if ( ! paymentDetails?.paymentId ) {
233233
console.error( 'No paymentId found in paymentDetails' );
234-
return false;
234+
return {
235+
type: responseTypes.SUCCESS,
236+
};
235237
}
236238

237239
try {
@@ -248,7 +250,10 @@ export const MoneiCCContent = ( props ) => {
248250
if ( result.status === 'FAILED' ) {
249251
const failUrl = new URL( paymentDetails.failUrl );
250252
failUrl.searchParams.set( 'status', 'FAILED' );
251-
window.location.href = failUrl.toString();
253+
return {
254+
type: responseTypes.SUCCESS,
255+
redirectUrl: failUrl.toString(),
256+
};
252257
} else {
253258
// Always include payment ID in redirect URL for order verification
254259
const { orderId, paymentId } = paymentDetails;
@@ -257,17 +262,24 @@ export const MoneiCCContent = ( props ) => {
257262
url.searchParams.set( 'orderId', orderId );
258263
url.searchParams.set( 'status', result.status );
259264

260-
window.location.href = url.toString();
265+
return {
266+
type: responseTypes.SUCCESS,
267+
redirectUrl: url.toString(),
268+
};
261269
}
262270
} catch ( error ) {
263271
console.error(
264272
'Error during payment confirmation:',
265273
error
266274
);
267-
window.location.href = paymentDetails.failUrl;
275+
return {
276+
type: responseTypes.ERROR,
277+
message:
278+
error.message || 'Payment confirmation failed',
279+
messageContext:
280+
props.emitResponse.noticeContexts.PAYMENTS,
281+
};
268282
}
269-
270-
return true;
271283
}
272284
);
273285

‎assets/js/monei-block-checkout-bizum.js‎

Lines changed: 55 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@
218218
// If no token was created, fail
219219
if ( ! requestTokenRef.current ) {
220220
return {
221-
type: 'error',
221+
type: responseTypes.ERROR,
222222
message: __(
223223
'MONEI token could not be generated.',
224224
'monei'
@@ -243,70 +243,75 @@
243243
}, [ onPaymentSetup ] );
244244

245245
useEffect( () => {
246-
const unsubscribeSuccess = onCheckoutSuccess(
247-
( { processingResponse } ) => {
246+
const unsubscribe = onCheckoutSuccess(
247+
async ( { processingResponse } ) => {
248248
const { paymentDetails } = processingResponse;
249249

250250
// In redirect mode, backend returns redirect URL and no paymentId
251251
// WooCommerce Blocks handles redirect automatically
252252
if ( ! paymentDetails?.paymentId ) {
253-
return false;
253+
return {
254+
type: responseTypes.SUCCESS,
255+
};
254256
}
255257

256-
// Component mode: confirm payment with token
257-
const paymentId = paymentDetails.paymentId;
258-
const tokenValue = paymentDetails.token;
259-
monei
260-
.confirmPayment( {
258+
try {
259+
// Component mode: confirm payment with token
260+
const paymentId = paymentDetails.paymentId;
261+
const tokenValue = paymentDetails.token;
262+
const result = await monei.confirmPayment( {
261263
paymentId,
262264
paymentToken: tokenValue,
263-
} )
264-
.then( ( result ) => {
265-
if (
266-
result.nextAction &&
267-
result.nextAction.mustRedirect
268-
) {
269-
window.location.assign(
270-
result.nextAction.redirectUrl
271-
);
272-
}
273-
if ( result.status === 'FAILED' ) {
274-
const failUrl = new URL(
275-
paymentDetails.failUrl
276-
);
277-
failUrl.searchParams.set( 'status', 'FAILED' );
278-
window.location.href = failUrl.toString();
279-
} else {
280-
// Always include payment ID in redirect URL for order verification
281-
const { orderId, paymentId } = paymentDetails;
282-
const url = new URL(
283-
paymentDetails.completeUrl
284-
);
285-
url.searchParams.set( 'id', paymentId );
286-
url.searchParams.set( 'orderId', orderId );
287-
url.searchParams.set(
288-
'status',
289-
result.status
290-
);
291-
292-
window.location.href = url.toString();
293-
}
294-
} )
295-
.catch( ( error ) => {
296-
console.error(
297-
'Error during payment confirmation:',
298-
error
299-
);
300-
window.location.href = paymentDetails.failUrl;
301265
} );
302266

303-
// Return true to indicate that the checkout is successful
304-
return true;
267+
if (
268+
result.nextAction &&
269+
result.nextAction.mustRedirect
270+
) {
271+
return {
272+
type: responseTypes.SUCCESS,
273+
redirectUrl: result.nextAction.redirectUrl,
274+
};
275+
}
276+
if ( result.status === 'FAILED' ) {
277+
const failUrl = new URL( paymentDetails.failUrl );
278+
failUrl.searchParams.set( 'status', 'FAILED' );
279+
return {
280+
type: responseTypes.SUCCESS,
281+
redirectUrl: failUrl.toString(),
282+
};
283+
} else {
284+
// Always include payment ID in redirect URL for order verification
285+
const { orderId, paymentId } = paymentDetails;
286+
const url = new URL( paymentDetails.completeUrl );
287+
url.searchParams.set( 'id', paymentId );
288+
url.searchParams.set( 'orderId', orderId );
289+
url.searchParams.set( 'status', result.status );
290+
291+
return {
292+
type: responseTypes.SUCCESS,
293+
redirectUrl: url.toString(),
294+
};
295+
}
296+
} catch ( error ) {
297+
console.error(
298+
'Error during payment confirmation:',
299+
error
300+
);
301+
return {
302+
type: responseTypes.ERROR,
303+
message:
304+
error.message ||
305+
'Payment confirmation failed',
306+
messageContext:
307+
props.emitResponse.noticeContexts.PAYMENTS,
308+
};
309+
}
305310
}
306311
);
307312

308313
return () => {
309-
unsubscribeSuccess();
314+
unsubscribe();
310315
};
311316
}, [ onCheckoutSuccess ] );
312317

0 commit comments

Comments
 (0)