.simon1709

[earnest tartan]

Hi 👋 is there more context? Are you getting that while calling a Stripe function provided by one of our libraries?

[light drum]

yeah

hey toby how are you

its when i call confirm payment

const { error } = await stripe.confirmPayment({

i have this code

const [form, fields] = useForm({
    id: "billing-details",
    lastSubmission: fetcher?.data?.submission,
    defaultValue: {
      first_name: "",
      last_name: "",
      email: "",
      contact_number: "",
      heard_about: "",
      opt_in: "",
      accept_terms: "",
      code: "",
    },
    onValidate({ formData }) {
      return parse(formData, {
        schema: BillingDetailsSchema,
      });
    },
    async onSubmit(event) {
      event.preventDefault();

      setStripeError(undefined);
      setIsProcessing(true);

      if (!stripe || !elements) {
        return;
      }

      const { error } = await elements.submit();

      if (error) {
        setStripeError(error.message);
        setIsProcessing(false);
        return;
      }

      fetcher.submit(event.target as HTMLFormElement);
    },
    shouldRevalidate: "onBlur",
  });

[earnest tartan]

I'm doing alright, hm, okay. Also I see "remix" mentioned in your initial description, is that relevant here, is that part of the context?

[light drum]

i think so

ive done this before in my react SPA

and working in prod etc

but im migrating to remix

async function handleCompletePayment(
    data: DataProps,
    billingDetails: z.infer<typeof BillingDetailsSchema>
  ) {
    const redirectUrl = `${window.location.origin}/bookings/success`;

    if (!stripe || !elements) {
      return;
    }

    const { error } = await stripe.confirmPayment({
      elements,
      redirect: "if_required",
      clientSecret: data.client_secret,
      confirmParams: {
        return_url: redirectUrl,
        payment_method_data: {
          billing_details: {
            name: billingDetails.first_name + " " + billingDetails.last_name,
            email: billingDetails.email,
            phone: billingDetails.contact_number,
          },
        },
      },
    });

    if (
      error &&
      (error.type === "card_error" || error.type === "validation_error")
    ) {
      setStripeError(error.message);
      setIsProcessing(false);
      return;
    }

    if (error) {
      setStripeError("An unexpected error occurred.");
      setIsProcessing(false);
      return;
    }

    navigate("./success");
  }

 const isLoading = navigation.state !== "idle" || isProcessing;

  if (isLoading && fetcher?.data && fetcher?.data?.status === "success") {
    const res = fetcher.data.data;
    const submission = fetcher.data.submission;

    if (res?.status === "payment_requires_completion") {
      handleCompletePayment(res, submission.value);
    }
  }

i am collecting my own billing details

[earnest tartan]

What is remix?

[light drum]

remix is a react framework

like next js

[earnest tartan]

Hm, nothing is jumping out at me so far. The error (based on the below post) does seem like one we've seen before, but typically when the payment request modal is being surfaced manually.
https://stackoverflow.com/questions/74387665/stripe-failed-to-execute-postmessage-on-window-delegation-is-not-allowed-w

If I recall correctly, the gist of the concern there is that Google Pay doesn't think it's a customer-action triggering the flow and they don't like that.

[light drum]

yeah

ive seen other people post on here but i am already doing their fixes

[earnest tartan]

Unfortunately, I'm not sure I'm going to be able to be much help. Let me make sure I'm understanding correctly though. It sounds like you're able to get this working in React as expected, where we have official first-party support. But when you try to move the same flow into another framework, that we don't offer direct first-party support for, issues are encountered?

[light drum]

i think its probably due to too many renders

in result of loaders working