#jamesroper_error
ornate mothBOT
đ 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/1222157317349445703
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
modest epochBOT
ornate hull
hi! can you share exactly what your code looks like?
when you debug it and look in your browser devtools network console, is your request to your backend's /create-checkout-session route made? What does it return?
fluid ginkgo
is there a convenient way to add a code bock in this chat?
ornate hull
three backticks
fluid ginkgo
const [clientSecret, setClientSecret] = useState("");
useEffect(() => {
const fetchClientSecret = async () => {
const response = await api.post("/create-checkout-session");
const data = await response.json();
setClientSecret(data.clientSecret);
};
fetchClientSecret();
}, []);
const options = { clientSecret };
return (
<div id="checkout">
<EmbeddedCheckoutProvider
stripe={stripePromise}
options={options}
>
<EmbeddedCheckout />
</EmbeddedCheckoutProvider>
</div>
)
}
export default PaymentScreen;
That's my current version of the frontend
(different from the original - i can change to that if eaier to debug)
as in, the original from the documentation
ornate hull
you need to return the value, not just set it in state
fluid ginkgo
Isn't that done when setting it as options?
ornate hull
no I mean the function fetchClientSecret needs to return a string, here it returns nothing(there's no return statement)
you also do not need to have it in a useEffect and in fact that's just an extra request doing nothing
you just need to change to add return data.clientSecret at the end of the function, and then pass like this
const options = {fetchClientSecret}
<EmbeddedCheckoutProvider
stripe={stripePromise}
options={options}
>
i.e. passing the function, not the result of calling the function
you also don't need const [clientSecret, setClientSecret] = useState(""); since you don't need to store the secret, you instead provide the function to the Provider and it will call the function when it needs the secret
fluid ginkgo
OK i now have the following and receive the same error:
const fetchClientSecret = async () => {
const response = await api.post("/create-checkout-session");
const data = await response.json();
return data.clientSecret
};
fetchClientSecret();
const options = { fetchClientSecret };
return (
<div id="checkout">
<EmbeddedCheckoutProvider
stripe={stripePromise}
options={options}
>
<EmbeddedCheckout />
</EmbeddedCheckoutProvider>
</div>
)
}
export default PaymentScreen;```fetchClientSecret(); you do not need that line
beyond that, let's do some debugging
let toReturn = data.clientSecret;
console.log(toReturn)
return toReturn
check the browser devtools Network tab and see if the request to create-checkout-session is made and what it returns
fluid ginkgo
It returns a 405
<!doctype html>
<html lang=en>
<title>405 Method Not Allowed</title>
<h1>Method Not Allowed</h1>
<p>The method is not allowed for the requested URL.</p>
here is my backend for clarity:
def create_checkout_session():
try:
session = stripe.checkout.Session.create(
ui_mode = 'embedded',
line_items=[
{
# Provide the exact Price ID (for example, pr_1234) of the product you want to sell
'price': 'price_1OyOkHP7FVbVKqazSXqSo10e',
'quantity': 1,
},
],
mode='payment',
return_url='http://localhost:3000' + '/return?session_id={CHECKOUT_SESSION_ID}',
automatic_tax={'enabled': True},
)
except Exception as e:
return str(e)
return jsonify(clientSecret=session.client_secret)```Could it possibly be because headers are passed in my custom api version of axios but this route isn't protected?
ornate hull
possibly! don't know much about your setup
fluid ginkgo
Though i get the same when I change to standard axios
ornate hull
sounds to me like the request is being made as a GET, or it's being recieved on the backend as a GET; or it's sent as a POST and that backend code you posted is not actually deployed/saved and other code that doesn't accept a POST is running
fluid ginkgo
I think it is correctly being sent as a post as this is what I get in the console in dev tools:
paymentscreen.js:16
POST http://localhost:3000/api/create-checkout-session 405 (METHOD NOT ALLOWED)
And to clarify, my proxy to localhost:5000 is correctly setup so the 3000 isn't incorrect
ornate hull
my proxy to localhost:5000 is correctly setup
are you 100% sure?
easy way to check that is look at the response headers and see if they mention Flask as the server
you could also try hardcoding to the Flask server's port too to see if that changes things
also you have app.route('/create-checkout-session (no 'api') but the frontend calls /api/create-checkout-session
fluid ginkgo
OK I found that issue - it should have /api/... in the backend route definition. I now receive the following error:
Uncaught (in promise) IntegrationError: fetchClientSecret failed with error "response.json is not a function"
yes just spotted that
ornate hull
well .json is part of fetch which is what our example uses
I'm sure there's a way in axios to read the JSON data!