#Atef-checkout
spring patio
wispy wagon
Yup, I'm looking into your code
inner ledge
awesome. thanks so much!
wispy wagon
The code looks fine. Could you paste the code here, so that I can debug in my machine?
inner ledge
sure
import {useEffect} from 'react';
import {loadStripe} from '@stripe/stripe-js';
import '@stripe/stripe-js';
const stripe = loadStripe(
// here goes the publishable key
);
export default function PreviewPage() {
useEffect(() => {
// Check to see if this is a redirect back from Checkout
const query = new URLSearchParams(window.location.search);
if (query.get('success')) {
console.log('Order placed! You will receive an email confirmation.');
}
if (query.get('canceled')) {
console.log('Order canceled -- continue to shop around.');
}
}, []);
const handleSubmit = async (e) => {
e.preventDefault()
const endpoint = "/api/checkout_sessions"
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
quantity: 5,
})
}
const response = await fetch(endpoint, options)
const session = await response.json()
const result = await stripe.redirectToCheckout({
sessionId: session.id,
});
if (result.error) {
}
}
stripe here is a Promise, so it doesn't have redirectToCheckout function. Can you try this?
(await stripe).redirectToCheckout(..)
let me try
it seems to be working 🙂
thank you so much
but now when i tried to pass the price from the user input it stopped working!
this is what i changed:
body: JSON.stringify({
quantity: 5,
})
the change is:
body: JSON.stringify({
Price: 55,
quantity: 5,
})
this is the line_items in the api page
wispy wagon
Could you share the error message?
inner ledge
no error message
when i click on checkout it doesn't go anywhere
just doesn't do anything
wispy wagon
Can you find the request ID (req_xxx) for Checkout creation from the dashboard? Maybe it'll give you some hints. Here’s how you can find it: https://support.stripe.com/questions/finding-the-id-for-an-api-request
inner ledge
will do
by the way, i managed to figure the error
this is how i did it in the api page :
i just used "amount" instead of "price" and also added "currency"
But thank you so much for your help 🙂
wispy wagon
great that it works for you!