How to delay the stripe client side component?

[karh]

I’m using stripe connect, I need to add the connected ‘account_id’ to the client side Stripe component.
So I get the account_id from the db, and load it in there using a dynamic attribute:

However, it takes too long for the server connect to get the ‘account_id’ which causes the stripe component to initialise without the account_id.

That is throwing me errors that the paymentIntent_id is missing

The error disappears and works as expected when I add the account_id as a static value.

How can I delay the loading of the stripe component so it’ll wait for the {{account_id}} to be populated?

[karh]

@Fred_K Maybe you can help again, I see all the forum posts about Stripe connect are from you

[mebeingken]

Try putting the Stripe component in a conditional region that displays when your server connect has a value.

[Fred_K]

The Connected Account was indeed necessary when initializing Stripe JS a few months ago, but they removed this requirement. It is no longer needed in the Stripe JS element. See mine below, works perfectly fine:

However, make sure the Connected Account is specified in the Header of the Server Side Stripe APIs, for example right there in the Create Checkout Session:

Also make sure your Stripe JS script is loaded on every single page of your webapp, in order to enable Stripe’s “advanced fraud functionality”.

[karh]

@Fred_K Thanks for your help… I’m really confused how your integration is working. I guess the difference lies in that you’re using ‘Create Checkout Session’ and not ‘paymentIntent’, is that true?

I have the same set up now:

1. Server side an action ‘Create Payment Intent’, with the connected account and API key in the options:
   

   

2. Client side I have the stripe component empty like yours:
   

   

3. It doesn’t work:

• In the logs of the platform account I can see that the payment intent is created

  

• In the logs of the connected account I see that the payment intent is also created.

  

• But it’s trying to confirm it in the platform account (first screenshot). When I add the account_id on the client side it does work. But then I’m back to the original problem, it’s initialising the stripe element before the account_id is retrieved from the db.

---

@mebeingken Thanks - also tried this. But then stripe throws an error.
I put it in a simply conditional region first, based on a toggle.
Whenever it’s trying to work inside the conditional region I get this error:
TypeError: Cannot read properties of null (reading ‘getElement’)

The set up in wappler:

[Fred_K]

I remember having the same issue at some point.
Can you please show the entire server side Stripe payment steps?

[karh]

@Fred_K I really appreciate the help, because it was time sensitive I fixed it by using EJS. I’m getting the stripe connect variable before the page is loaded and put it in an EJS variable. Then I put it into the ‘stripe’ component from wappler.

However, I do think this is something the Wappler devs should fix by delaying the execution of the component until the variable for “account_id” is loaded from the database.

[Fred_K]

Glad ou figured it out.
Not sure I ever understood the issue about timed account_id load. My Connected_Account loads at the right moment.
What is EJS?

[karh]

I documented what I did here How to send a query parameter to a (server side data) server action and use the output through EJS

It’s possible that your database query is faster and loaded just in time, mine takes 300-500ms. There’s a lot of data being loaded.