jagged breach
I recently spun up a site and integrated stripe into it. I made a functional sign up/in and customer portal using astro. When i try to deploy it on netlify, whenever I access a page that uses stripe, it gives me a 500 error status code and the following error:
It works perfectly when i run it in dev, but everything that uses stripe stops working during production.
My output is server and I have stripe in my node_modules.
hearty furnace
Can you share a stackblitz or the code where you are using the stripe module?
vital flare
Yeah basically this is saying its trying to pull code from a package called 'stripe' and it cant find it
so you might need to make sure its included as a dependancy in your package.json
but a stackblitz will be very helpful
jagged breach
Can you share a stackblitz or the code where you are using the `stripe` module?
This is the code where i use stripe ```---
import Base from "@/layouts/Base.astro";
import { createRequire } from 'module';
import SigninSlider from "@/layouts/function-components/SigninSlider.jsx";
import { Phone } from "react-feather";
import Notice from "@/layouts/shortcodes/Notice.jsx"
const require = createRequire(import.meta.url);
const stripe = require('stripe')(STRIPE_KEY);
const errors = { username: "", email: "", password: "" };
if (Astro.request.method === 'POST') {
// parse form data
const formData = await Astro.request.formData();
const name = formData.get('name'); // get the name field
const childName = formData.get('childName');
const childAge = formData.get('childAge');
const tel = formData.get('tel');
const email = formData.get('email');
const password = formData.get('password');
const bestTimes = formData.get('bestTimes');
if (typeof name !== "string" || name.length < 1) {
errors.username += "Please enter a Name.";
}
if (typeof password !== "string" || password.length < 6) {
errors.password += "Password must be at least 6 characters. ";
}
const customers = await stripe.customers.search({
query: email:\'${email}\',
});
if (customers["data"].length ==0 ) {
const customer = await stripe.customers.create({
name: name,
email: email,
phone: tel,
metadata: {
childName: childName,
childAge: childAge,
password: password,
bestTimes: bestTimes,
},
});
console.log(customer['id'])
Astro.cookies.set("id",customer['id'])
return Astro.redirect("/signin")
} else{
errors.email += "Email is already registered.";
}
}
---```
How do i get a stackblitz?
My dependencies already include stripe
"stripe": "^15.7.0",
"@stripe/stripe-js": "^3.4.0"
my bad i accidentally deleted it
hearty furnace
This is probly our culprit const stripe = require('stripe')(STRIPE_KEY);
jagged breach
i replace my stripe key with the actual key with enviorment variables
hearty furnace
For sure, as you should
jagged breach
and all this code works perfectly when i run astro dev
but when i do it in production it fails
and gives a 500
hearty furnace
Did you set up your environmental variables on your hosting service?
jagged breach
yup
i feel like there i should add something to my imports at the top of the page, but i also think that if thats working in dev it should work in the final build
hearty furnace
This mite sound odd but sometimes the Vite bundler is weird
can you try naming the variable VITE_STRIPE_KEY
jagged breach
i should rename my enviorment variable to this too right
jagged breach
This mite sound odd but sometimes the Vite bundler is weird
can you try naming ...
unfortunatley im getting the same error
hearty furnace
Ah darn I'll look around a bit more and see if i can dig anything
jagged breach
Thanks
jagged breach
btw if you need it
this is the git for all of my code:
and the site is https://stembotics.org
hearty furnace
Sweet thanks that should help
hearty furnace
Hmmm unfortunately i haven't been able to turn anything up yet
Hopefully when the activity kicks up again in the morning someone will have some more insight for you 
vital flare
const stripe = require('stripe')(STRIPE_KEY); is CSJ and astro is ESM so youll want to use https://github.com/stripe/stripe-js
import {loadStripe} from '@stripe/stripe-js';
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
Or Oliver will just slip in 2 minutes later with a likely solution
jagged breach
That probably is the answer, and this is probably a Stripe question rather than an Astro question but the stripe-js package makes me lose a LOT of functionality in my code, like it takes away my abilty to add/retrieve customers. Is there ANY way to use a CSJ package like the regular stripe API, instead of using the stripe-js package?
vital flare
there probably is an ESM version of the regular stripe api package
i realized after i said that youre wanting the server side package and i linked the client side
oh yeah
has
import Stripe from 'stripe';
const stripe = new Stripe('sk_test_...');
const customer = await stripe.customers.create({
email: '[email protected]',
});
console.log(customer.id);
in the readme
vital flare
anytime, if you finish up your project and want to do a write up about it the community would appreciate it
hearty furnace
Bro I just distracted you till Oliver could save the day 🤣