having Issue rendering a Java script form from replex

[ismailbhayat-lang]

I am trying to render a JS form and getting the following error. Any help will be appreciated

Initializing Finix form...
VM156:55 Finix init exception: TypeError: Finix.PaymentForm is not a function
at window.initFinixForm (:23:23)
at eval (eval at applyEvent (state.js:355:13), :1:8)
at applyEvent (state.js:355:13)
at processEvent (state.js:502:23)
at queueEvents (state.js:471:9)
at Socket. (state.js:683:7)
at Emitter.emit (socket__io-client.js?v=20a81098:330:70)
at Socket.emitEvent (socket__io-client.js?v=20a81098:3168:14)
at Socket.onevent (socket__io-client.js?v=20a81098:3160:28)
at Socket.onpacket (socket__io-client.js?v=20a81098:3134:10)

[manimovassagh]

The error Finix.PaymentForm is not a function means the Finix SDK script has not fully loaded by the time your initialization code runs. This is a common timing issue when loading third-party JS in Reflex.

Here is how to fix it:

1. Make sure the script is loaded before calling it

Add the Finix SDK script to your app's head:

app = rx.App(
    head_components=[
        rx.el.script(src="https://js.finix.com/v1/finix.js"),
    ],
)

2. Wait for the script to be available

The problem is that rx.call_script / eval runs immediately, but the external script might not have loaded yet. Wrap your init code in a retry or a check:

class State(rx.State):
    def init_finix(self):
        return rx.call_script("""
            function waitForFinix() {
                if (typeof Finix !== "undefined" && typeof Finix.PaymentForm === "function") {
                    // Finix is ready, initialize the form
                    const form = Finix.PaymentForm({
                        environment: "sandbox",
                        // ... your config
                    });
                } else {
                    // Not loaded yet, retry in 100ms
                    setTimeout(waitForFinix, 100);
                }
            }
            waitForFinix();
        """)

3. Trigger init after page load

Don't call the init on page render — trigger it from an on_mount event handler so the DOM and scripts are ready:

@rx.page(on_load=State.init_finix)
def payment_page() -> rx.Component:
    return rx.box(
        rx.el.div(id="finix-form-container"),
    )

4. Check your Finix SDK version

The Finix.PaymentForm constructor was introduced in v1 of their SDK. If you are loading an older or different version of the script, the API might differ. Double-check the script URL matches their current docs.

The core issue is just script loading order — once you add the wait-and-retry pattern, it should work.