PeterBoyd-PaymentElement

[dawn basalt]

Hi!

[limpid moth]

hey!

[dawn basalt]

What are you exactly seeing? When did this start? How can I reproduce this on my end?

[limpid moth]

I'm not sure exactly, I'm still bebugging

but I only noticed it happening in local environments that use test mode

just curious if your team was seeing this happen elsewhere

otherwise it's likely something on my end

[dawn basalt]

Let me spin this up on my test environment

I'll confirm in a few

It's working for me and I do not see any other flags for this.

@limpid moth - let me know what errors you're seeing as you debug so we can help further.

[limpid moth]

that's the hard thing, is that I don't see any errors on dev

or prod

it loads instantly on prod but not on dev

[dull mulch]

it's definitely a bug in your code in that case and you need to narrow it down first

likely not returning the client_secret properly and reading the logs/adding logs to various parts to narrow it down is the best next step

[limpid moth]

ah yeah good call

also I'm seeing an issue where payment amount is too small

I believe its a 2 cent

transaction

is there a minimum amount for a payment intent?

[dull mulch]

https://stripe.com/docs/currencies#minimum-and-maximum-charge-amounts

[limpid moth]

got it thank you

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY as string);

export const StripeContext = createContext({});

export const useStripeContext = () => useContext(StripeContext);

type StripeProviderProps = {
  children: JSX.Element;
}

export const StripeProvider = ({ children }: StripeProviderProps) => {
  const { paymentClientSecret, setupClientSecret } = useClientSecretContext();
  const clientSecret = paymentClientSecret ?? setupClientSecret;

  if (!clientSecret) return null;
  
  console.log({clientSecret});
  return (
    <StripeContext.Provider value={{}}>
      <Elements stripe={stripePromise} options={{ clientSecret, appearance: getElementAppearance(), fonts: getCustomFonts() }}>
        {children}
      </Elements>
    </StripeContext.Provider>
  )
};

[dull mulch]

do you have a question about the code? Like what's the problem?

[limpid moth]

the console.log is printing the correct setupsecret from our API

            onFocus={onFocus}
            options={{
              paymentMethodOrder: [PaymentMethodType.BANK_ACCOUNT, PaymentMethodType.CARD],
              fields: {
                billingDetails: {
                  name: "never",
                  email: "never"
                }
              }
            }}
            onReady={() => setIsLoading(false)}
            onChange={handleChange}
            className="w-full"
          />
        )}```

[dull mulch]

I can't really help wth just code

I need more than this I'm sorry

[limpid moth]

got you

trying to figure out why its not calling "onReady"

the element isn't rendering so I'm just seeing the loading icon

one min, I'll try to narrow down the problem

just weird that I'm not seeing this on our prod env

okay sorry, it seems to be okay now. not sure what had happened. thanks

maybe the request was timing out in certain instances

[dull mulch]

weird

[limpid moth]

here!

req_99g0VDdVPtlnsY

this is the

[dull mulch]

Seems to me like your code is trying to confirm a SetupIntent that was already confirmed before?

maybe you use the wrong client_secret?

[limpid moth]

hmm

      customer: user.stripeCustomerId,
      payment_method_types: [
        PaymentMethodType.CARD,
        PaymentMethodType.BANK_ACCOUNT,
      ],
    });

this is the code the creates the secret on our backend

  async setupNewPaymentMethod(userId: string) {
    const stripe = await getStripeClient();
    const user = await this.UserRepository.findById(userId);
    const setupIntent = await stripe.setupIntents.create({
      customer: user.stripeCustomerId,
      payment_method_types: [
        PaymentMethodType.CARD,
        PaymentMethodType.BANK_ACCOUNT,
      ],
    });
    return { clientSecret: setupIntent.client_secret };
  }

[dull mulch]

I'm sorry but you're kinda rushing a bit through errors

Like this is not a Stripe error, this is purely yourcode/logic. Something is either confirming the same SetupIntent twice in a row, or your server returns the SetupIntent's client_secret of an already confirmed one

[limpid moth]

ah I see

[dull mulch]

You might want to take a step back and slowly debug this and run through the steps with clear logs

[limpid moth]

I have a feeling it's cuz we updated to React 18 which runs useEffect twice in dev

you're totally right, that's likely the issue, I'll check the network calls

thanks

it was just difficult cuz I wasn't seeing any network issues or error response from stripe

on our front-end or back-end logs