#Oracle
sharp nova
Hi there
I have created a web application that uses Stripe for payments.
As of now, users must input their credit card details each time they wish to make a purchase.
However, as you must understand, this can become extremely tedious.
I wanted to be able to have it prefilled/saved or any alternative as to allow the user to save time upon purchase.
Someone else tried to help me earlier however I never was really able to follow it as it seemed quite advanced
I use React and Node.js
I have been trying to set it up all day. However I am having an extremely difficult time following the documentation
faint widget
@sharp nova I can try to help though I think @stoic flare helped in details earlier in the channel too. It would help to understand what is still blocking you at this point
I'm also curious if you considered using Checkout instead to solve all of this for you entirely
sharp nova
sorry @faint widget whats checkout?
faint widget
https://stripe.com/docs/payments/checkout that's our hosted payment page product
sharp nova
is that no-code option?
faint widget
that way you don't need to do anything to collect card details yourself and it supports showing the previously saved card too
sharp nova
right but when a purchase is made I need to a function to be performed
faint widget
And that is totally supported with Checkout
sharp nova
So for example.
When the person visits checkout and inputs their payment details, and the payment goes through.
I need to send their order details to the backend,
can you create a call back function with checkout?
faint widget
after Checkout is done, the payment is already created/successful and then we redirect them back to your website/server and you can do what you need
sharp nova
Right but I create an 'order' and send it to the backend, immediately when the user clicks ' purchase '
Is this possible? a call back function of sorts
I have had alot of trouble following stripe documentation, although everyone says its very easy lol, Im a bit of a beginner
faint widget
@sharp nova it's hard to know for sure without understanding why you want this. what is the point of the order callback? Like are you checking inventory to decide if you an accept the payment?
Overall, Stripe is easy but there are some steps that are harder if you're a beginner developer, which is true of most products/APIs/services. Using Checkout will solve so much pain for you because you just defer to us for the payment
You can always replace Checkout later, though you likely will not 🙂
sharp nova
I have a web app, that allows users to make an order
(i.e. custom ecommerce product).
Once the user has completed providing their order details, they must pay to create the order.
Once the user Successfully pays for the order I want their order details to be saved in my Database and update certain attributes of the User upon completion.
This is why I feel I would need a function to automatically run after payment is successful
Do you know how I can get that happen? most simply perferable lol.... @faint widget
faint widget
@sharp nova Honestly you want to read the docs first. You seem to have completely lost yourself in our different product offerings here. Take a step back and a breath, it's easier than it looks
Read the Checkout docs and try the demo/samples first. The flow is extremely easy
1/ Decide what the customer wants to order
2/ Create a Checkout Session server-side with the right list of line item(s) to charge for
3/ Redirect the customer to Stripe where they pay.
4/ After a successful payment, Stripe sends them back to your server to confirm they paid
5/ Do whatever you want with that information (record the order, send the physical product, give them access to your online service, etc.)
This all starts with https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=checkout
sharp nova
I just read the documentation, it seems that after step 4 that youve mentioned you are forwarded to the success page.
but in the same way that once the payment has succeeded, instead of gbeing redirected to the success url, is there a simple way to instead a function...
Sorry for the amateur questions...
merry gulch
hey there, catching up
simple way to instead a function
can you rephrase that?
what do you want to do instead?
sharp nova
sorry
Using stripe checkout
you are able to make a purchase and be redirected to the success URL
but I want to be able to send the order details to the database, immediately when the purchase goes through
How might I do this with stripe checkout?
I have a very hard time following documentation.....
merry gulch
ah gotcha, so you have two choice there
you can either listen to the webhook and handle those details there in your webhook handler: https://stripe.com/docs/payments/checkout/fulfill-orders#create-event-handler
or, you can include a templated query parameter to get the session id on your success page and fetch from your server when your customer arrives:
https://stripe.com/docs/payments/checkout/custom-success-page#modify-success-url
sharp nova
the first sounds a little simpler lol
so its just as simple as posting this in my server.js?
app.post('/webhook', bodyParser.raw({type: 'application/json'}), (request, response) => {
const payload = request.body;
console.log("Got payload: " + payload);
response.status(200);
});
well, sort of, yes
you need to configure the endpoint: https://stripe.com/docs/webhooks
and there are some best practices to be aware of, like verifying signatures: https://stripe.com/docs/webhooks/best-practices
paper fiber
How are things going @sharp nova?
sharp nova
Im still not able to get it working...
Im continually told to refer to documentation, but I really dont understand it
Is there no simple solution?
I mean Stripe is hugely popular for simplicity,
surely therer is a simple way to save payment details for the next purchase.
Most e-commerce platforms save payment details so that your next purchase can be done quickly, I dont understand why its so difficult
@paper fiber
faint widget
@sharp nova It would help if you said where you're blocked. I know you're a beginner, but if you accept payments in your product/website/app you must be confident enough and familiar with writing a basic web/app integration
It's extremely easy to integrate Stripe if you are an experienced developer. If you are not, there's a learning curve, the same way there is for learning a programming language, CSS, a UI library, etc.
We have numerous examples, demo apps, office hours videos, etc.
What is blocking you, where did you start? Are you able to run your entire app locally and understand it but you don't know where to put Stripe? Which step are you on
sharp nova
I am not a basic beginner when it comes to Full stack, I've built a multi-user blogging platform, marketplace, logisitics web app etc.
but i suppose when it comes to Stripe in specific i face alot of difficulty
faint widget
I'm sorry but to be direct: right now we've had multiple hours of conversations, and we don't see what's blocking. I know it's difficult, but what have you tried
Because it should take you a few minutes as a web developer to have an endpoint that creates a Checkout Session (everything hardcoded for now) and then redirect to Checkout. Have you tried doing that first? Does that work? If not what error(s) do you get?
If you try to solve everything it will be daunting. But if you split the work in small pieces it makes a lot more sense. With Checkout, the step 1 is to have a page on your app that you load, that makes a call to https://stripe.com/docs/api/checkout/sessions/create in your server-side code and then redirects to that Session's URL with the url property (also server-side)
sharp nova
I am able to setup Stripe checkout, I have done so as well in the past.
Where im running into issues, is how to then send the order details the user provided to the backend, upon successful payment.
faint widget
Okay, so it's similar to what we discussed before too. Can you try to provide detailed information about what's blocking you exactly? We can't really help you solve this if you don't explain what you try adn where you are stuck
sharp nova
Okay sorry, one moment
faint widget
Of course. And we really want to help, we aren't just punting you to docs, but when you ask how to do something we explain at a high level and show a relevant doc. IF you come back with "this is my code, this is the line where it fails, I don't see X" then we can help. For example maybe you'll ask how to find the Session's metadata or line items
sharp nova
Okay so I have this in my frontend:
and this in my backend
This provides this checkout button in the frontend
When I click this check out button.
I get redirected Nowhere....
However as you can see when i console.log the session in the backend, I receive this:
and when i visit this link, I am sent to the checkout page
So The question is, why does it output the session.url perfectly fine, but fail to redirect? @faint widget
is that okay?
faint widget
You are trying to redirect server-side in Node, from an "ajax request" which will never work
Either you return the URL from the server, client-side you parse that URL and then do a window.location = xxxxx or you switch your axios thingy to a real form submission (full page redirect) which will lead to the server-side redirect
sharp nova
When i just try using a regular form i get Cannot post /checkout, so im going to try your first alternative
faint widget
Didn't you say earlier in the thread you've integrated Checkout before without any issue though?
Understanding how Javascript/HTML form submission is different from an AJAX request (your axios post thingy) is quite crucial
https://www.pluralsight.com/guides/form-submission-in-reactjs is an example basic guide on React + submitting a form (Without a post request)
faint widget
@sharp nova any progress?
sharp nova
I've been running into some errors, I didnt want to bother you with it just yet
faint widget
I can try to help, what's up?
sharp nova
This is the frontend
This is the action call to communicate with the backend
The is the checkout controller
What is currently happening?
In the backend I am able to console.log the session object as well as the session.url perfectly fine., as shown:
So I continued to return the the session object back to the frontend, however no matter what I receive 'undefined'.
Im quite sure this isnt a stripe related issue, which is why I was hesitant to ask
faint widget
protip: you're a developer, don't send screenshot of code, I can't copy-paste it and fix it for you
discord lets you format code with three `
sharp nova
right sorry
one second
import React from "react";
import { restrictedAccess } from "../actions/auth";
import { checkout } from "../actions/order";
const About = () => {
const handleCheckout = (e) => {
e.preventDefault();
checkout()
.then((res) => {
console.log(res);
})
.catch((err) => console.log("STRIPE CHECK OUT ERROR:", err));
};
return (
<div>
<form onSubmit={handleCheckout}>
<button type="submit">Checkout</button>
</form>
</div>
);
};
export default About;
what does console.log(res) outputs? Where do you get the URL back?
I don't see you do a redirect anywhere and I don't know what you get from the res and also don;t return the entire session, just return the URL
sharp nova
I was sending the URL back earlier, but I kept getting undefined.
in the screeenshot, i instead used just an object with a string, but even that itself if undefined
exports.checkout = async (req, res) => {
try {
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
line_items: [
{
price_data: {
currency: "usd",
product_data: {
name: "T-shirt",
},
unit_amount: 2000,
},
quantity: 1,
},
],
mode: "payment",
success_url: "http://localhost:3000/guarantee",
cancel_url: "http://localhost:3000/faq",
});
console.log("SESSION", session.url);
console.log(session);
console.log("Payment sent successfully.....");
return res.status(200).json({
url: session.url,
});
} catch (error) {
console.log(error);
console.log("PAYMENT ERROR : ", error);
return res.status(400).json({
message: error.message,
});
}
};
I'm... a bit confused
sharp nova
and this is the action call
export const checkout = async () => {
await axios.post(`${process.env.REACT_APP_API}/create-checkout-session`);
};
Are you mixing client and server-side code here?
ah okay you name both checkout that's confusing lol
sharp nova
oh sorry yea
faint widget
await axios.post(`${process.env.REACT_APP_API}/create-checkout-session`); so this returns something, how are you parsing it? Have you used axios.post before? what's the different with all the other parts of your existing integration not related to Stripe?
https://stackoverflow.com/a/68907593/1606729 for example says ry { const res = await axios.get("/end-point"); console.log("JSON data from API ==>", res.data); } catch (error) { // handle error }
sharp nova
Thats exactly it, Ive used axios.post a hundred times, I appear to be using it the same way I've always been using it
faint widget
your code seems to mix an exported function as async/await and then calling with then.
Sorry I have never done React code beyond debugging someone's code. Have you confirmed what you get back from that await? Don't you need to return something?
should it be export const checkout = async () => { return await axios.post(`${process.env.REACT_APP_API}/create-checkout-session`); }; maybe? Wildly guessing but you must have another part of your app that does the same thing
I'd also add logs in that exported function if I were you
faint widget
it's okay, we all do that all the time
sharp nova
Thanks, thats wonderful, now I am able to be redirected to the session url.
faint widget
debugging assumptions is what matters. Hopefulluy me talking out loud about how I think about it makes sense
and yay congrats, one step done 🙂
sharp nova
lol yea, thats the first step, now I need to be able to save the order details into the database upon submitting an order