Payment form errors out
or does nothing.
If the checkout UI shows but payments don't process, it's almost always an initialization issue — Stripe.js not loaded, wrong publishable key, or a JavaScript error on submit.
Check Console first
F12 → Console tab. Look for red errors when you click the payment button. Common ones: Stripe is not defined (script not loaded), Invalid API key (wrong publishable key), or a CORS error.
Common causes & fixes
Make sure <script src='https://js.stripe.com/v3/'></script> is in your HTML before any Stripe code runs.
The publishable key in your frontend must match the environment (test vs live). Check for pk_test_ vs pk_live_.
Check Console for errors when you submit the form. Usually a null reference or missing element ID.
Stripe requires HTTPS. If you're testing on http://localhost, use their test mode — live keys won't work without SSL.
Verify Stripe initializes in your browser console:
// Minimal Stripe checkout check:
const stripe = Stripe('pk_test_YOUR_KEY');
console.log('Stripe loaded:', !!stripe);
// Should log: Stripe loaded: true