diff --git a/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx b/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx index 10d5abd792..05b613e1ac 100644 --- a/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx +++ b/support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx @@ -395,7 +395,12 @@ function OneTimeCheckoutComponent({ elements, }); } - if (paymentMethod === 'Stripe' && stripe && cardElement) { + if ( + paymentMethod === 'Stripe' && + stripe && + cardElement && + recaptchaToken + ) { paymentMethodResult = await stripe.createPaymentMethod({ type: 'card', card: cardElement, @@ -448,7 +453,6 @@ function OneTimeCheckoutComponent({ billingPostcode, ), publicKey: stripePublicKey, - // ToDo: validate recaptchaToken for card payments recaptchaToken: recaptchaToken ?? '', paymentMethodId: paymentMethodResult.paymentMethod.id, }; @@ -459,29 +463,31 @@ function OneTimeCheckoutComponent({ } } - setThankYouOrder({ - firstName: '', - paymentMethod: paymentMethod, - }); - const thankYouUrlSearchParams = new URLSearchParams(); - thankYouUrlSearchParams.set('contribution', finalAmount.toString()); - const nextStepRoute = paymentResultThankyouRoute( - paymentResult, - geoId, - thankYouUrlSearchParams, - ); - setIsProcessingPayment(false); - if (nextStepRoute) { - window.location.href = nextStepRoute; - } else { - setErrorMessage('Sorry, something went wrong.'); - if ( - paymentResult && - 'paymentStatus' in paymentResult && - paymentResult.paymentStatus === 'failure' - ) { - setErrorContext(appropriateErrorMessage(paymentResult.error ?? '')); + if (paymentResult) { + setThankYouOrder({ + firstName: '', + paymentMethod: paymentMethod, + }); + const thankYouUrlSearchParams = new URLSearchParams(); + thankYouUrlSearchParams.set('contribution', finalAmount.toString()); + const nextStepRoute = paymentResultThankyouRoute( + paymentResult, + geoId, + thankYouUrlSearchParams, + ); + if (nextStepRoute) { + window.location.href = nextStepRoute; + } else { + setErrorMessage('Sorry, something went wrong.'); + if ( + 'paymentStatus' in paymentResult && + paymentResult.paymentStatus === 'failure' + ) { + setErrorContext(appropriateErrorMessage(paymentResult.error ?? '')); + } } + } else { + setIsProcessingPayment(false); } } }; @@ -765,7 +771,7 @@ function OneTimeCheckoutComponent({ } onChange={() => { setPaymentMethod(validPaymentMethod); - + setPaymentMethodError(undefined); // Track payment method selection with QM sendEventPaymentMethodSelected(validPaymentMethod); }} @@ -821,11 +827,6 @@ function OneTimeCheckoutComponent({ type="submit" /> -
- - - -
{errorMessage && (
)} +
+ + + +