Create new payment intent on charge attempt error

opencollective · Sep 28, 2024 · ef766d2 · ef766d2
1 parent f339939
commit ef766d2
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/components/contribution-flow/PaymentMethodList.tsx b/components/contribution-flow/PaymentMethodList.tsx
@@ -107,7 +107,7 @@ type PaymentMethodListProps = {
   disabledPaymentMethodTypes: string[];
   stepSummary: object;
   stepDetails: { amount: number; currency: string; interval?: string };
-  stepPayment: { key: string; isKeyOnly?: boolean };
+  stepPayment: { key: string; isKeyOnly?: boolean; chargeAttempt: number };
   isEmbed: boolean;
   isSubmitting: boolean;
   hideCreditCardPostalCode: boolean;
@@ -132,6 +132,7 @@ export default function PaymentMethodList(props: PaymentMethodListProps) {
 
   const hostSupportedPaymentMethods = props.host?.supportedPaymentMethods ?? [];
   const [paymentIntent, stripe, loadingPaymentIntent, paymentIntentCreateError] = usePaymentIntent({
+    chargeAttempt: props.stepPayment.chargeAttempt,
     skip: !hostSupportedPaymentMethods.includes(PaymentMethodLegacyType.PAYMENT_INTENT),
     amount: { valueInCents: props.stepDetails.amount, currency: props.stepDetails.currency },
     fromAccount: props.stepProfile.isGuest

diff --git a/components/contribution-flow/index.js b/components/contribution-flow/index.js
@@ -395,7 +395,11 @@ class ContributionFlow extends React.Component {
         this.setState({ isSubmitted: true, isSubmitting: false });
         return this.handleSuccess(order);
       } catch (e) {
-        this.setState({ isSubmitting: false, error: e.message });
+        this.setState({
+          isSubmitting: false,
+          error: e.message,
+          stepPayment: { ...this.state.stepPayment, chargeAttempt: (this.state.stepPayment.chargeAttempt || 0) + 1 },
+        });
       }
     } else if (stripeError) {
       return this.handleStripeError(order, stripeError, email, guestToken);

diff --git a/lib/stripe/usePaymentIntent.ts b/lib/stripe/usePaymentIntent.ts
@@ -18,6 +18,7 @@ const createPaymentIntentMutation = gql`
 `;
 
 type UsePaymentIntentOptions = {
+  chargeAttempt: number;
   amount: { valueInCents: number; currency: string };
   fromAccount?: AccountReferenceInput;
   guestInfo?: GuestInfoInput;
@@ -29,6 +30,7 @@ type UsePaymentIntentOptions = {
 type StripePaymentIntent = PaymentIntent & { stripeAccount: string };
 
 export default function usePaymentIntent({
+  chargeAttempt,
   amount,
   fromAccount,
   guestInfo,
@@ -105,7 +107,7 @@ export default function usePaymentIntent({
       setPaymentIntent(null);
       setStripe(null);
     };
-  }, [skip, guestInfo?.captcha?.token]);
+  }, [skip, guestInfo?.captcha?.token, chargeAttempt]);
 
   return [paymentIntent, stripe, loading, error];
 }