Use separate isSubmitting flag

AngelProtocolFinance · Jan 15, 2024 · 82c2b88 · 82c2b88
1 parent 3c11011
commit 82c2b88
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/components/donation/Steps/DonateMethods/Stripe/Checkout.tsx b/src/components/donation/Steps/DonateMethods/Stripe/Checkout.tsx
@@ -17,6 +17,7 @@ export default function Checkout({ onBack }: { onBack: () => void }) {
  const { handleError } = useErrorContext();
 
  const [isLoading, setLoading] = useState(true);
+ const [isSubmitting, setSubmitting] = useState(true);
 
  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
  e.preventDefault();
@@ -27,7 +28,7 @@ export default function Checkout({ onBack }: { onBack: () => void }) {
  return;
  }
 
- setLoading(true);
+ setSubmitting(true);
 
  const { error } = await stripe.confirmPayment({
  elements,
@@ -47,7 +48,7 @@ export default function Checkout({ onBack }: { onBack: () => void }) {
  handleError("An unexpected error occurred.");
  }
 
- setLoading(false);
+ setSubmitting(false);
  };
 
  return (
@@ -82,7 +83,7 @@ export default function Checkout({ onBack }: { onBack: () => void }) {
  disabled={!stripe || !elements}
  type="submit"
  >
- <LoadText text="Processing..." isLoading={isLoading}>
+ <LoadText text="Processing..." isLoading={isSubmitting}>
  Pay Now
  </LoadText>
  </button>