Dynamic Key on Stripe Checkout component does not work

Wappler General How To
#1

Wappler: v4.9.1, MacOS, NodeJS

I have created a table in the DB (DEV & PROD) where I’m storing Stripe Publishable Keys. On the checkout page, I have added this key inn the Stripe Checkout component. The api key value is being returned correctly from the DB, however, the Stripe Card Payment component is not loading. The Stripe component works correctly if the publishable key is hard coded.

Is this a bug or is there something wrong with my setup? Any assistance to resolve this issue is greatly appreciated.

<dmx-stripe id="stripe1" dmx-bind:key="sc_stripe_app_settings.data.q_stripe_app_settings[0].api_key" dmx-bind:line-items="" checkout="server"></dmx-stripe>

This is the error I’m getting in the dev console.

Screen Shot 2022-08-02 at 3.39.01 pm
Screen Shot 2022-08-02 at 3.39.01 pm1126×300 61.3 KB

#2

Update

I have moved the Server Connect that is getting api-key value from the content page (checkout page) to the layout page (main). This seems to have resolved the issue as the api-key value becomes available as soon as the website is loaded.

Is it a correct setup or is there a better way to achieve the same outcome?

#3

I’ve moved my Key into a page level variable and it works correctly with a dynamic bind.

#4

Hi @scalaris, thanks for your response. Is the variable getting api-key value from the database via a SC?

#5

It’s not but it does need to eventually so will do that today and let you know how I get on

#6

Thanks @scalaris. If Server Connect to fetch the api-key value is on the same page as Stripe component, then the issue seems to be with the initialisation of Stripe Payment component before the api-key value becomes available.