#el-capitan14_code

1 messages · Page 1 of 1 (latest)

keen mirageBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1397366308219125821

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

hearty abyss
#

Hi there, can you share with me the code? is there a public URL that I visit and replicate the problem?

jaunty compass
#

no its not

#

I could give you a free membership though

#

what part of the code do you want to see?

hearty abyss
#

The error says "Error: Failed to load Connect.js", can you should me how you load the Connect.js ?

jaunty compass
#

Implementation Details

Stack & Dependencies

  • Frontend: React 18.2.0 with Chakra UI
  • Stripe Libraries:
    • @stripe/connect-js: ^3.0.6
    • @stripe/react-connect-js: ^3.0.6
  • Environment: Production (Live mode)
  • Domain: atomiktrading.io (Cloudflare proxy enabled)

Backend Integration ✅ Working

  • Account Sessions API endpoint: /api/v1/creators/create-account-session
  • Successfully creating Stripe Express accounts
  • Account sessions generating valid client_secret tokens
  • Account Sessions configuration:
    components: {
    account_onboarding: {
    enabled: true,
    features: {
    external_account_collection: true
    }
    }
    }

Frontend Implementation

// Component: StripeConnectEmbed.js
const instance = loadConnectAndInitialize({
publishableKey: process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY,
fetchClientSecret: async () => client_secret,
appearance: { /* custom styling */ }
});

// Rendered component:
<ConnectComponentsProvider connectInstance={instance}>
<ConnectAccountOnboarding
onExit={handleOnboardingExit}
collectionOptions={{
fields: 'eventually_due',
futureRequirements: 'include',
}}
/>
</ConnectComponentsProvider>

Current Error

Console Output

🔵 Stripe Connect instance created: true
🔵 Rendering ConnectAccountOnboarding component
❌ Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)

Behavior

  • ✅ Stripe Connect instance creates successfully
  • ✅ ConnectAccountOnboarding component attempts to render
  • ❌ Connect.js library fails to load internally
  • ❌ Component container remains blank

Troubleshooting Completed

CSP (Content Security Policy)

Cloudflare Configuration

  • ✅ Disabled Rocket Loader globally
  • ✅ Added data-cfasync="false" to all Stripe scripts
  • ✅ Confirmed Cloudflare is not interfering

Script Loading

  • ✅ Loading base Stripe library synchronously: <script src="https://js.stripe.com/v3/">
  • ✅ Verified base window.Stripe object is available
  • ✅ Using correct publishable key (pk_test_...)

API Test Results

Account Session Creation - SUCCESS

curl https://api.atomiktrading.io/api/v1/creators/create-account-session
Response: {
"client_secret": "accs_secret__SjIXNRZE...",
"account_id": "acct_1Rnpw0D19aev8rIX",
"expires_at": 1753228288

Stripe Login | Sign in to the Stripe Dashboard

Sign in to the Stripe Dashboard to manage business payments and operations in your account. Manage payments and refunds, respond to disputes and more.

#

Environment Details

  • Browser Testing: Chrome 138.0.0.0, Mobile Safari
  • Network: Production environment with CDN (Cloudflare)
  • Bundle: React production build with code splitting
  • Error Persistence: Occurs consistently across browsers and devices

The backend integration is working perfectly - the issue appears to be specifically with the frontend Connect.js library loading
within our React application environment.

hearty abyss
#

This looks like AI geenerated response to me.

jaunty compass
#

it answers your question right

hearty abyss
jaunty compass
#

i already read that

#

it doesnt have my issue in there

hearty abyss
#

Did you follow this doc to integration Connect.js? Can you share with me the code to load Connect.js?

jaunty compass
#

const instance = loadConnectAndInitialize({
publishableKey,
fetchClientSecret: async () => {
console.log('🔵 Stripe requesting client secret...');
return client_secret;
},
appearance: {
overlays: 'dialog',
variables: {
colorPrimary: '#00C6E0',
colorBackground: '#1a1a1a',
colorText: '#ffffff',
colorDanger: '#df1b41',
fontFamily: 'Inter, system-ui, sans-serif',
spacingUnit: '4px',
borderRadius: '8px',
colorBorder: '#333333',
}
},
});

hearty abyss
# 
      console.log('🔵 Stripe requesting client secret...');
      return client_secret;
    },
#

Looks like you haven't implemented the fetchClientSecret function yet

jaunty compass
#

one sec

jaunty compass
#

still does not work

#

main.88742e6f.js:1 Unhandled promise rejection: Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)
(anonymous) @ main.88742e6f.js:1Understand this error
vendors-ab1cd7d0.8ccd3135.js:1 Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)Understand this error
main.88742e6f.js:1 Unhandled promise rejection: Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)
(anonymous) @ main.88742e6f.js:1Understand this error
vendors-ab1cd7d0.8ccd3135.js:1 Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)Understand this error
main.88742e6f.js:1 Unhandled promise rejection: Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)
(anonymous) @ main.88742e6f.js:1Understand this error
vendors-ab1cd7d0.8ccd3135.js:1 Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)Understand this error
main.88742e6f.js:1 Unhandled promise rejection: Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)
(anonymous) @ main.88742e6f.js:1Understand this error
vendors-ab1cd7d0.8ccd3135.js:1 Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)Understand this error
main.88742e6f.js:1 Unhandled promise rejection: Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)
(anonymous) @ main.88742e6f.js:1Understand this error
vendors-ab1cd7d0.8ccd3135.js:1 Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)Understand this error
main.88742e6f.js:1 Unhandled promise rejection: Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)
(anonymous) @ main.88742e6f.js:1Understand this error
vendors-ab1cd7d0.8ccd3135.js:1 Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)Understand this error
main.88742e6f.js:1 Unhandled promise rejection: Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)
(anonymous) @ main.88742e6f.js:1Understand this error
vendors-ab1cd7d0.8ccd3135.js:1 Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)Understand this error
main.88742e6f.js:1 Unhandled promise rejection: Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)
(anonymous) @ main.88742e6f.js:1Understand this error
vendors-ab1cd7d0.8ccd3135.js:1 Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)Understand this error
main.88742e6f.js:1 Unhandled promise rejection: Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)
(anonymous) @ main.88742e6f.js:1Understand this error
vendors-ab1cd7d0.8ccd3135.js:1 Uncaught (in promise) Error: Failed to load Connect.js
at HTMLScriptElement.<anonymous> (vendors-ab1cd7d0.8ccd3135.js:1:3135)

hearty abyss
#

Is there a staging URL that I can visit and check your integration?

jaunty compass
#

how do i do that

hearty abyss
#

Deploy your website so that I can visit and access it

jaunty compass
#

what is the api endpoint to get the link for the user to be authenticated logged in

hearty abyss
jaunty compass
#

so i give you access to my site and then you could see whats going on

hearty abyss
#

No I can't access your project directly.

jaunty compass
#

so what where you asking for?

#

what part>?

hearty abyss
#

I don't need full access to your project. I just need a public URL to visit the page where you integrated the embedded Connect.js

jaunty compass
#

its not public though

hearty abyss
#

That's why I asked you to deploy to a staging site so that I can test