lil-nasty_unexpected

[rustic pendant]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1218288583794753628

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[iron dew]

Wasn't able to replicate this on my test page. Working fine for me

Do you have a screenshot?

Also do you have a test page published we can take a look at?

[silk haven]

Unfortunately not... I'll get a screenshot for you though

[iron dew]

Can you share some code as well?

Ultimately we'll probably need access to a test page though

[silk haven]

Select test institution then Agree and continue and then it just loads forever and gives the error in the console

Here's the code for the Payment Form

export default function StripeSubscriptionPaymentForm({ returnUrl }: { returnUrl: string }) {
  const [canSubmit, setCanSubmit] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [paymentSubmitting, setPaymentSubmitting] = useState(false);

  const stripe = useStripe();
  const elements = useElements();
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    try {
      e.preventDefault();
      setPaymentSubmitting(true);

      if (!stripe || !elements) return;

      const result = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: returnUrl,
        },
      });

      if (result.error) {
        const { error } = result;
        if (error.message) {
          setErrorMessage(error.message);
        } else {
          setErrorMessage(
            'Unknown error occurred. Please try again or contact us if the issue persists.',
          );
        }
      }
    } finally {
      setPaymentSubmitting(false);
    }
  };
  return (
    <form
      onSubmit={handleSubmit}
      className="flex flex-col gap-4 sm:rounded-lg sm:border sm:border-border-default-default sm:bg-surface-default-default sm:p-8"
    >
      <PaymentElement onChange={(e) => setCanSubmit(e.complete)} />
      <PaymentTermsInfo />
      {errorMessage && (
        <Text variant="body2" className="text-content-negative-default">
          {errorMessage}
        </Text>
      )}
      <Button
        size="large"
        variant="filled"
        className="w-full"
        disabled={!canSubmit}
        type="submit"
        loading={paymentSubmitting}
        loadingPosition="end"
      >
        Pay Now
      </Button>
    </form>
  );
}

[iron dew]

Do you have any browser plugins installed? Maybe an ad blocker?

[silk haven]

oof that was it

[iron dew]

Ah yeah

[silk haven]

We had one that messed w/ CSP because another iframe we utilize

Had forgotten I used it

Anyways, thanks!

[iron dew]

No problem