#uhoh-react-paymentelement

1 messages · Page 1 of 1 (latest)

sudden orioleBOT
wet ravine
#

Hello! You can do loadStripe(platformAPIKey, { stripeAccount: connectedAccountID }) to initialize for direct charges on a connected account.

stuck quarry
#

Hey, my use case is a bit particular, because I have two products. One with connetedAccountId and one without connectedACcountId

#

On the first render, before the user selects anything, there is no connectedAccountId. I would like it so that when the user selects something, it will then rerender with a connectedAccountId

# 
function StripeWrapper({ stripeAccount, children }) {
  const [stripeObject, setStripeObject] = useState(null);

  useEffect(() => {
    const fetchStripeObject = async () => {
      const stripeAccountObj = stripeAccount ? { stripeAccount } : {};
      const stripePromise = await loadStripe(`${platformAPIKey}`, stripeAccountObj);

      setStripeObject(stripePromise);
    };

    fetchStripeObject();
  }, [stripeAccount]);

  return (
    <Elements stripe={stripeObject}>
      {children}
    </Elements>
  );
}```
#

If I put a console log in useEffect, it shows that it is re-rendering when the user selects something. But for some reason, the connectedAccountId stays null.

wet ravine
stuck quarry
#

I just tried the solution suggested but it does not seem to work

glacial root
#

👋

#

Where are you defining stripeAccount?

#

Oh that is a prop

stuck quarry
#

yes!

#

it's a pro

#

prop*

#

I'm basically using the StripeWrapper around my whole App

#

so what's happening is

#
  1. The app renders with this StripeWrapper, where stripeAccount is null.
  2. The user selects a product, and it changes the value of stripeAccount, which rerenders StripeElements. But for some reason the value of the connectedAccountID is null when using Stripe's createPaymentMethod.
#
  1. This causes an error because my backend is expecting a Payment Method that is createdw ith a connectedAccountID. This throws the error No such PaymentMethod: [...]; OAuth key or Stripe-Account header was used but API request was provided with a platform-owned payment method ID. Please ensure that the provided payment method matches the specified account.
glacial root
#

I think the issue here is that you need to define stripeAccount inside of StripeWrapper otherwise it won't mutate.

#

So right now, on each render, your stripeAccount is basically being reset to null

stuck quarry
#

I am using stripeAccount in an outer component, which is controlled by a state

#

Would that not work?

#

That outer component contains the logic for the user selecting a product, which ten changes the stripeAccount state (that state is passed down into StripeWrapper)

cedar forge
#

Taking over but sadly I have next to no knowledge about React myself

#

I think the first thing I'd recommend is to add clear logs to the code that initializes Stripe to make sure you hit it and set the right account id right there

#

so inside fetchStripeObject add a clear log to print both the API key and the account id

#

uhoh-react-paymentelement

stuck quarry
#

Yep, I checked the logs and it is the right account. But I believe that the Elements is initializing without a stripe account id...

cedar forge
#

I'm not sure what you called "I checked the logs". Like which logs?

#

there's no console.log or equivalent in the code you shared above

stuck quarry
#

I added console.logs! i Just removed them so it was easier to read the code for you

cedar forge
#

Okay so can you share your exact logs? Is there a page when I can easily reproduce in Test mode myself?

#

I assume setStripeObject(stripePromise); is what's not working if your logs are correct

stuck quarry
#

I feel like maybe it's <Elements stripe={stripeObject} options={ELEMENTS_OPTIONS}> {children} </Elements>

#

that isn't working correctly

#

I will look into the solution suggested here more.

#

Thank you!!