bradtraversy / proshop_mern

Shopping cart built with MERN & Redux
1.99k stars 1.18k forks source link

Paying at the end! Why? How to fix this? #149

Closed Gabriel7553 closed 3 years ago

Gabriel7553 commented 3 years ago

Alright so I don't know why we place the order before we pay. Wouldn't it be way better for it to be on the PlaceOrderScreen.js and not on OrderScreen.js. Aren't we just flooding the database or whatever with all these orders that they haven't paid for? Even if this is is just a demo? How would we know if someone even paid if 100 people order something they didn't pay for and that 1 person that did we would have to look for them.

Screenshot (192) Screenshot (191) Screenshot (190)

If anyone did this themselves please let me know how to do this if anything I would really appreciate that!

basir commented 3 years ago

when you redirect a user to a payment gateway like PayPal you need to have all data about that order in the database to have reference if there was an issue in the payment. that's why we have to save orders in the database. also we can have a scheduled task to run at midnight to remove all unpaid orders.

Gabriel7553 commented 3 years ago

@basir Thank you for letting me know! I'm a beginner and I'm trying to learn more. I want to create my own ecommerce website and this helped a bunch with others feedback and with their own code that I can add to mine and learn. I'm kind of confused about your last sentence though how did you do that if you don't mind sharing your code or giving me code to do that. If its something you can't show I understand and instead if you can give me a reference of where I can learn and implement that myself and how and where should I do it. I would appreciate appreciate that so much!

Chanelmermaid commented 3 years ago

What about that?

ในวันที่ พฤ. 3 มิ.ย. 2021 11:52 น. Gabriel7553 @.***> เขียนว่า:

Closed #149 https://github.com/bradtraversy/proshop_mern/issues/149.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bradtraversy/proshop_mern/issues/149#event-4835273732, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARDHPRJESRFMHLY5AUU7VQLTQ4DBPANCNFSM45ZV77CA .

Gabriel7553 commented 3 years ago

@Chanelmermaid I just didn't know that some websites I guess you pay at the very end like this one. I wanted it where the customers puts their information in say their bank card information before they press "pay order" so it doesn't fill up the database with unpaid orders. If you look at the second screenshot and the third you will see that I havent paid but I was still able to place an order and i have a order id. I still have to pay though thats why it shows the paypal buttons on the second post but say if im admin and i go to all my orders. I will see a whole bunch of people who made an order but never paid.

talmax1124 commented 3 years ago

@Gabriel7553 One way that I would recommend if you want to accomplish this is to change the place order screen into a step, then change the code for generating a order id and the pay differently. So do something like if order.isPaid then dispatch orderId and the the other things and redirected to the other page with all the information

Gabriel7553 commented 3 years ago

@talmax1124 thank you again! I wonder if you could help me doing that. I tried many ways of doing this but I always get errors I don't know how to fix and spend hours wondering how could this work what should I change. I understand if you don't want to or you don't feel like it. It's alright but thank you for giving me an idea! I'll try to work on doing that eventually as I'm trying to learn more but if you can help doing it I would appreciate that very much! I hope you have a great day!

basir commented 3 years ago

hello there, about this: "also we can have a scheduled task to run at midnight to remove all unpaid orders" this is a library to run a task periodically. https://www.npmjs.com/package/node-cron you can use it to delete unpaid orders.

talmax1124 commented 3 years ago

I have it done in my repo. Just have a minor issue. I will share my repo code later.

On Sun, May 30, 2021 at 4:09 PM Gabriel7553 @.***> wrote:

Alright so I don't know why we place the order before we pay. Wouldn't it be way better for it to be on the PlaceOrderScreen.js and not on OrderScreen.js. Aren't we just flooding the database or whatever with all these orders that they haven't paid for? Even if this is is just a demo? How would we know if someone even paid if 100 people order something they didn't pay for and that 1 person that did we would have to look for them.

[image: Screenshot (192)] https://user-images.githubusercontent.com/60830448/120118549-03c54c80-c148-11eb-95e4-2b4a1603396e.png [image: Screenshot (191)] https://user-images.githubusercontent.com/60830448/120118551-0627a680-c148-11eb-8be3-09495de75471.png [image: Screenshot (190)] https://user-images.githubusercontent.com/60830448/120118555-07f16a00-c148-11eb-8bcd-8da9ed51676e.png

If anyone did this themselves please let me know how to do this if anything I would really appreciate that!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bradtraversy/proshop_mern/issues/149, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOVNS3SSJY3PXJQVVLTBGHTTQKLQJANCNFSM45ZV77CA .

Gabriel7553 commented 3 years ago

@talmax1124 Thanks for letting my know and also thank you!

talmax1124 commented 3 years ago

Wait so you are the spammer on my site? https://github.com/Gabriel7553

On Sun, May 30, 2021 at 4:09 PM Gabriel7553 @.***> wrote:

Alright so I don't know why we place the order before we pay. Wouldn't it be way better for it to be on the PlaceOrderScreen.js and not on OrderScreen.js. Aren't we just flooding the database or whatever with all these orders that they haven't paid for? Even if this is is just a demo? How would we know if someone even paid if 100 people order something they didn't pay for and that 1 person that did we would have to look for them.

[image: Screenshot (192)] https://user-images.githubusercontent.com/60830448/120118549-03c54c80-c148-11eb-95e4-2b4a1603396e.png [image: Screenshot (191)] https://user-images.githubusercontent.com/60830448/120118551-0627a680-c148-11eb-8be3-09495de75471.png [image: Screenshot (190)] https://user-images.githubusercontent.com/60830448/120118555-07f16a00-c148-11eb-8bcd-8da9ed51676e.png

If anyone did this themselves please let me know how to do this if anything I would really appreciate that!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/bradtraversy/proshop_mern/issues/149, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOVNS3SSJY3PXJQVVLTBGHTTQKLQJANCNFSM45ZV77CA .

talmax1124 commented 3 years ago

@Gabriel7553

Gabriel7553 commented 3 years ago

@talmax1124 yeah my bad about that I wanted to see how your website worked out compared to mine. I'll stop if that was bothering you.

talmax1124 commented 3 years ago

Yes, because I had to shut it down because of you. @gabriel7553

Do you know how to do dispatch?

Gabriel7553 commented 3 years ago

Yes, because I had to shut it down because of you.

My bad I'll stop. At first I was just testing your website. I like to see other peoples website and test them to see if their was any problems with mine or I can add something. I'll make sure not to do that again. I'm sorry about that! If anything I can give you some advice about your website just let me know.

Gabriel7553 commented 3 years ago

@talmax1124 One thing I noticed about your website is when some places an order and lets say that everything was in stock (20 in stock). If they go back to the homepage and go back to that product. The stock is still 20 unless they reload the page. So you should probably make it where it reloads the page each time they go into a product. If they don't reload the page they can add it in their cart and pay for it again and if you check the products in the admin it will be in its negatives.

The next thing if someone registers an account through google. They don't get the email verification. I don't know if that's how it always is so yeah

Lastly I tested this on mine right now. If someone pays and their was 20 in stock and they buy all of it of course it will be all good but if another person is paying at the same and they already have the product in their cart then the can still place the order. So you product will go in negatives and idk if you can tell but when your product stock goes in negatives you can still click the product to go in the cart so when they click the button they just see a blank screen.

talmax1124 commented 3 years ago

Well it happens when you click on it fast because It is working normally. I tried it myself

On Mon, Jun 14, 2021 at 2:45 PM Gabriel7553 @.***> wrote:

@talmax1124 https://github.com/talmax1124 One thing I noticed about your website is when some places an order and say that they everything that was in stock (20 in stock). If they go back to the homepage and go back to that product. The stock is still 20 unless they reload the page. So you should probably make it where it reload the page each time they go into a product. If they don't reload the page they can add it in their cart and pay for it again and if you check the products in the admin it will be in its negatives.

The next thing if someone registers an account through google. They don't get the email verification. I don't know if that's how it always is so yeah

Lastly I tested this on mine right now. If someone pays and their was 20 in stock and they buy all of it of course it will be all good but if another person is paying at the same and they already have the product in their cart then the can still place the order. So you product will go in negatives and idk if you can tell but when your product stock goes in negatives you can still click the product to go in the cart so when they click the button they just see a blank screen.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/bradtraversy/proshop_mern/issues/149#issuecomment-860910119, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOVNS3RDM6IC572SQ5OAGDLTSZE4TANCNFSM45ZV77CA .

talmax1124 commented 3 years ago

Do you know how to work with dispatch @Gabriel7553

Gabriel7553 commented 3 years ago

Do you know how to work with dispatch @Gabriel7553

Oh not really just started react and everything so I'm not that good. Also one more thing you can add to your website is when someone clicks on the product. It's not at the top of the screen like you have to scroll up. You can easily fix this by looking it up. Here is my code if anything. components/ScrollToTop.js: `import React, { useEffect, Fragment } from "react"; import { withRouter } from "react-router-dom";

function ScrollToTop({ history, children }) { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); }; }, []);

return {children}; }

export default withRouter(ScrollToTop); `

I just added it to the homescreen and the product screen cuz it does the same for the home screen if you click the back arrow. It will start from the top if you click "go back" but most people won't click that button in my opinion. (well you can add however you like if you like it like that I might change it to just the product screen.)

Gabriel7553 commented 3 years ago

@talmax1124 do you know how to implement something like this? The first image is how I want and the second is if you don't know how. I don't really like how the user has to click the go back arrow all the time or the name to go back to the homepage. I would rather it have an x button and goes back to the product they were just viewing or have it like the first image where they can still see the product page and the cart just pops up and you can close it. It just makes everything look way better in my opinion. Screenshot (243) Screenshot (242)_LI

talmax1124 commented 3 years ago

Look since you dont know much about react, I will recommend to look for a repo from Netlify templates that has commercejs. They have something like this. Just if you want to have something fast that is still usable and customizable. Also, you could do this with an of-canvas menu from the react-bootstrap website. You will just need to pass the states to that. @Gabriel7553

Gabriel7553 commented 3 years ago

@talmax1124 I mean for the second image i have it done but I kinda suck with styling cuz I can't get it to where I like it but the user can go back to the product page or wherever they were last. For the first image yea I don't really know. Im kinda new to all this just trying to learn every step of the way. I would like it like the first image so the user doesn't really have to go through all that hassle and looks way better compared to the second one. I'll try to get it done if you ever do it just let me know lol.

Gabriel7553 commented 3 years ago

@talmax1124 did you ever get to finish the paypal thing? The last time I checked all that was missed up was that whenever someone paid it would still say "Not paid" but you would get the money. If you gave up it's all good just let me know.

talmax1124 commented 3 years ago

I had to revert it because it was sending it to the sandbox URL which it wasn't supposed to do. I have to revise it again and try it again. @Gabriel7553

Gabriel7553 commented 3 years ago

@talmax1124 yeah I was noticing that. I was testing it out and it started to work but it ended up reverting back to the sandbox url so I was getting confused. Just let me know if you end up finishing it! I hope you have a great day!

sujankarki269 commented 3 years ago

In order to ScrollToTop just add window.scrollTo(0, 0) to useEffect of ProductScreen ..it works.. @Gabriel7553 @talmax1124

Gabriel7553 commented 3 years ago

I had to revert it because it was sending it to the sandbox URL which it wasn't supposed to do. I have to revise it again and try it again. @Gabriel7553

@talmax1124 Hey you almost done with it or you gave up on it? Just wondering just in case so I'm not waiting and you end up not doing it. Also I ended up finding another problem! You can check this out yourself! The user doesn't need to sign in to get to the shipping page! You put any item in the cart and you can start doing it or without any item. Put the url and then /shipping and you skip the login page. I did it on mine and it didn't let the user place the order on mine but idk why for you the page just goes blank and you have to get of the browser and stuff.

talmax1124 commented 3 years ago

You can just wrap everything in a {userInfo ? (

)} Look at the productscreen page and look at how he put the sign in link if not signed in in the review part. @Gabriel7553 I stopped working on it but you should continue to find a workaround. @Gabriel7553
Gabriel7553 commented 3 years ago

@talmax1124 alright thank you and google luck on your website!