#talmax-React
tawdry lagoon
Hey Jack, so I've been trying to implement Stripe Checkout for a while now, and I've never been able to get it to work. What I mean is to get the items, and then get a session and then make it open up to a new Stripe Session
I've looked at numerous videos, projects, and other repos, and none of them seem to function. Well, go on to the stripe page.
calm sentinel
OK, so you want to open the Checkout URL from your React app?
tawdry lagoon
Yes??? So, the checkout page
I've looked at repos as simple as this one: https://github.com/WebDevSimplified/stripe-checkout-simple/blob/main/client/script.js. But I don't know what I am doing wrong
calm sentinel
Do you see any errors?
tawdry lagoon
This is my repo: https://github.com/talmax1124/creativeduoshop. It won't have any stripe code because I haven't pushed to it.
tawdry lagoon
Do you see any errors?
one time, I've gotten errors like the sessionID was not getting fetched and others were things like it had to be HTTPS even though I was using the test API Keys
I'm stuck
Like, really stuck.
calm sentinel
Can you share with me the error message that you are getting in your application?
tawdry lagoon
Unhandled Promise Rejection: IntegrationError: Missing value for Stripe(): apiKey should be a string.
calm sentinel
Is this coming from backend?
calm sentinel
What params did you pass to stripe.redirectToCheckout()?
tawdry lagoon
This is the code:
const item = cart.cartItems; const checkoutOptions = { lineItems: [item], mode: "payment", successUrl: ${window.location.origin}/success, cancelUrl: ${window.location.origin}/cancel, };
const redirectToCheckout = async () => { setLoading(true); console.log("redirectToCheckout"); const stripe = await getStripe(); const { error } = await stripe.redirectToCheckout(checkoutOptions); console.log("Stripe checkout error", error); if (error) setStripeError(error.message); setLoading(false); };
calm sentinel
OK, it seems like you are doing a client-only checkout https://stripe.com/docs/payments/checkout/client
What's the value of the item in this line: lineItems: [item],
tawdry lagoon
Well, I am trying to make it to get the Items in the cart, which is under cart.cartItems
and then get the stripe checkout, to pay then I want to try to execute this onSuccess,. useEffect(() => { if (success) { history.push(/order/${order._id}); dispatch({ type: USER_DETAILS_RESET }); dispatch({ type: ORDER_CREATE_RESET }); } // eslint-disable-next-line }, [history, success]); const placeOrderHandler = () => { dispatch( createOrder({ orderItems: cart.cartItems, shippingAddress: cart.shippingAddress, paymentMethod: cart.paymentMethod, itemsPrice: cart.itemsPrice, shippingPrice: cart.shippingPrice, taxPrice: cart.taxPrice, totalPrice: cart.totalPrice, }) ); };
But once I get things set up
In my code, I loop through cart Items like this:
calm sentinel
Just do a console.log(item) and send me the result
Anyway, you should check the API reference https://stripe.com/docs/js/checkout/redirect_to_checkout#stripe_checkout_redirect_to_checkout-options-lineItems-price and pass the correct data.
so the item should be something like
price: 'YOUR_PRICE_ID',
quantity: 1
}```
calm sentinel
you should put the console.log in your code, not in console.
calm sentinel
Please check my above message, and make sure you are passing the right data structure for the lineItems
the item should be something like
{
price: 'YOUR_PRICE_ID',
quantity: 1
}```So, pass the parameters, you mean? So, for example price would be item.price
So, it would be like this:
lineItems: [{
price: item.price,
quantity: item.qty
}],
calm sentinel
Yup, it looks good to me, make sure that item.price returns a valid price ID, and item.qty returns a valid integer.
tawdry lagoon
This is my file, just in case
So, I'm getting item not defined, and it I remembered that it is looping through the cart and the cart item has a key. So how would I go about
calm sentinel
You need to check your code and make sure item is defined
tawdry lagoon
I'm sorry if this is fustrating you. I don't know much of react. Would I need to destructure the cart.cartItems?
to get the Item
calm sentinel
Or can you send the updated code in the thread again?
tawdry lagoon
Here is the updated one
tawdry lagoon
Ok, i removed it
radiant night
Hi! I'm taking over this thread. Let me know if you still need help!
radiant night
He had to step away from Discord.
tawdry lagoon
Oh ok
radiant night
Can you share your code and the error message you are seeing?
radiant night
Thanks! Give me a few minutes to look into this.
tawdry lagoon
This is the codesandbox that I got the idea from. https://codesandbox.io/s/stripe-checkout-client-only-zbqh5?file=/src/components/Checkout.js
radiant night
The first error is:
Missing value for lineItems.0.quantity should be a number greater than 0
So can you do a console.log to see the value of the variableitem.qty?
tawdry lagoon
but yeah
I can't access that without doing this: const cartItemsConsole = () => { console.log(cart.cartItems); };
which gives me an object of all the items in the cart
& I loop it here
I'm not as good in react, so I just don't know how to do certain stuff like trying to get this to access the items in that array.
radiant night
To simplify things (for now), can you hardcode the values to see if it works:
lineItems: [{
price: "price_xxx", // replace with a price ID in your account
quantity: 1, // directly set it to 1
}],
Have you read our documentation? The first step to use Checkout is to create Products and Prices. You can learn more about this here: https://stripe.com/docs/payments/checkout/client#create-products-and-prices
tawdry lagoon
Oh, a one time product?
I got an ID. Of a product I made. A One Time Product. price_1LNBmkImEZowwqFqh0t23phS
Ok, pasted it there
Now I get this
radiant night
Can you host your code somewhere so I can reproduce the issue?
tawdry lagoon
It's on github.
But you would need all my ENV variables
But I did try the example on codesandbox, with a set item, and it works.
radiant night
OK. Can you give me more details on the last two errors in your screenshot?
- The 401 error, you should see more details about it in the network tab
- The API key error, if you click on the small arrow next to it, it should show more information about the error
tawdry lagoon
This is the codesandbox. https://codesandbox.io/s/stripe-checkout-client-only-forked-5q7ip7?file=/src/components/Checkout.js
that it works perfectly
This is what it shows that didn't pass through in the network tab
This is what it shows with arrow dropped down
& whats on line 51 is const { error } = await stripe.redirectToCheckout(checkoutOptions);
Hello, @radiant night ???
radiant night
Sorry Discord is a little busy. Having a look now.
tawdry lagoon
Oh sorry...
radiant night
No worries! For the first screenshot, can you also show the other tab called "preview"
tawdry lagoon
{
"error": {
"message": "Invalid API Key provided: undefined",
"type": "invalid_request_error"
}
}
This is what it says in preview
radiant night
Awesome, thanks! So there's an issue with your API keys.
Can you console.log the value of process.env.STRIPE_PUBLISHABLE_KEY?
radiant night
So we found the issue.
I recommend directly setting your publishable key in your code for now. so something like this: loadStripe("pk_test_xxx");
tawdry lagoon
Ok, I did it like that, clicked the button and gave me this
radiant night
The error message means you passed a wrong API key, so make sure you copy-past the key from the Stripe dashboard.
tawdry lagoon
I am copy and pasting from the dashboard.
It's in test mode right now
Oh wow, it was the wrong Key
it had an S for some reason on the home
but when I went to the API dashboard, it didn't have the S
So, now I guess we need to figure out, how to pass the products
radiant night
Are things working now?
tawdry lagoon
Well, now the part shows up with the Product defined with the ID
radiant night
Great, that's a good start!
tawdry lagoon
radiant night
Now you need to update your code, so that all the prices like this:
lineItems: [
{ price: "price_xxx", quantity: 1 },
{ price: "price_yyy", quantity: 1 },
{ price: "price_zzz", quantity: 1 },
]
⁇
radiant night
Earlier we did this:
lineItems: [{
price: "price_xxx", // replace with a price ID in your account
quantity: 1, // directly set it to 1
}],
But this was just a tests. From what I understood you want to dynamically pass multiple prices, no?
tawdry lagoon
Yes
radiant night
That part is not directly related to Stripe and really depends on your integration. So not sure how I can help beside showing you how it should look like:
lineItems: [
{ price: "price_xxx", quantity: 1 },
{ price: "price_yyy", quantity: 1 },
{ price: "price_zzz", quantity: 1 },
]
Yeah. I guess thats true.
Do you know how I would pass a function onsuccess?
because I use this create a new order
so it would need to invoke that placeOrderHandler function
radiant night
Do you know how I would pass a function onsuccess?
What does that mean? You want to know when the customer successfully completed the payment?
tawdry lagoon
So, like when the payment is successful right, it goes to this URL: successUrl: ${window.location.origin}/success, for exampl
e
but is there a method where its not a URL?
radiant night
when the payment is successful right, it goes to this URL: successUrl:
Correct
but is there a method where its not a URL?
You can also use webhook events, this is mentioned in the documentation link I shared earlier: https://stripe.com/docs/payments/checkout/client#payment-success (make sure to click on the "webhook" tab)
tawdry lagoon
Ok. That is going to be a challenge. I don't know how to use webhooks yet. But I'll see if someone can help out with that. Hopefully someone knows how to do it
radiant night
This require to setup a server with some backend code. You can learn more about this here: https://stripe.com/docs/webhooks
tawdry lagoon
Well, I'll see what I can do, if not I'll come back if its something specific