#bernardor_api
broken perchBOT
👋 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/1361396088023810233
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
wide quail
azure wren
Thanks for sharing this. I'm going to reach out internally to see what I can learn.
wide quail
thank you!
dim glen
👋 sorry for the delay. @wide quail does anything happen to change here if you don't use Custom Checkout and just render the Address Element standalone?
Yeah it clearly does exist: https://github.com/stripe/stripe-js/blob/630af32d51e92bad8b120a3912946a84d341cbcf/types/stripe-js/elements/address.d.ts#L146 ... interesting
wide quail
you mean without using the react library?
avoiding @stripe/react-stripe-js and using @stripe/stripe-js instead?
dim glen
The React JS library uses the Stripe JS library here for the types: https://github.com/stripe/react-stripe-js/blob/6029e7f621bbf32d04068877acf1523a992fc995/src/types/index.ts#L512C21-L512C48
wide quail
I'm not doing any custom checkout, I'm just rendering the AddressElement alone
<AddressElement
id="shipping-address-element"
options={{
mode: "shipping",
display: {
name: "split",
},
defaultValues: {
name: fullName,
firstName: initialFirstName,
lastName: initialLastName,
},
}}
/>
I removed out all code that might be messing up with this:
"use client";
import { AddressElement } from "@stripe/react-stripe-js";
interface AddressFormProps {
initialFirstName?: string | null;
initialLastName?: string | null;
}
export function AddressForm({
initialFirstName,
initialLastName,
}: AddressFormProps) {
const fullName =
initialFirstName && initialLastName
? `${initialFirstName} ${initialLastName}`
: "";
return (
<div className="space-y-4">
<div>
<AddressElement
id="shipping-address-element"
options={{
mode: "shipping",
display: {
name: "split",
},
defaultValues: {
name: fullName,
firstName: initialFirstName,
lastName: initialLastName,
},
}}
/>
</div>
</div>
);
}
That code also works fine for me...
wide quail
still see the errors, aare you sing the same package versions as me?
"@stripe/react-stripe-js": "^3.6.0",
"@stripe/stripe-js": "^7.0.0",
"stripe": "^18.0.0",
Can you try reinstalling Stripe JS and Stripe React JS
"@stripe/react-stripe-js": "^3.6.0",
"@stripe/stripe-js": "^7.0.0",
Yep same
wide quail
trying now
still same result, I don't get any errors on vscode either, only when I run the app
dim glen
What are you wrapping your AddressElement with? An Elements provider?
wide quail
Its wrapped in this:
"use client";
import { CheckoutProvider } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { type ReactNode, useEffect, useState } from "react";
import { clientEnv } from "../../lib/environment";
import { CheckoutDataProvider } from "./checkout-context";
import { stripeElementsOptions } from "./stripe-elements-options";
const stripePromise = loadStripe(clientEnv.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, {
betas: ["custom_checkout_beta_6"],
});
interface StripeCheckoutProviderProps {
children: ReactNode;
}
export function StripeCheckoutProvider({
children,
}: StripeCheckoutProviderProps) {
const [isLoading, setIsLoading] = useState(true);
const [sessionData, setSessionData] = useState<any>({
amount: 0,
currency: "usd",
lineItems: [],
});
useEffect(() => {
const fetchInitialData = async () => {
try {
const response = await fetch("/api/stripe/create-checkout-session", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
if (data.error) {
throw new Error(data.error.message);
}
setSessionData({
amount: data.amount,
currency: data.currency,
lineItems: data.lineItems,
});
} catch (error) {
console.error("Error fetching initial checkout data:", error);
} finally {
setIsLoading(false);
}
};
fetchInitialData();
}, []);
const fetchClientSecret = async () => {
if (sessionData?.checkoutSessionClientSecret) {
return sessionData.checkoutSessionClientSecret;
}
const response = await fetch("/api/stripe/create-checkout-session", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
if (data.error) {
throw new Error(data.error.message);
}
return data.checkoutSessionClientSecret;
};
return (
<CheckoutDataProvider checkoutData={sessionData} isLoading={isLoading}>
<CheckoutProvider
stripe={stripePromise}
options={{
fetchClientSecret,
elementsOptions: stripeElementsOptions,
}}
>
{children}
</CheckoutProvider>
</CheckoutDataProvider>
);
}
I don't see AddressForm anywhere in that code?
But I assume you pass through as children via props
wide quail
yep