#geiselle-checkout-reactpython

1 messages · Page 1 of 1 (latest)

winter sedgeBOT
orchid pewter
#

Hi there! Just to cover our bases, are you able to log the value of checkout_session.url to confirm the value?

#

Can you share some of your frontend code?

desert marlin
# orchid pewter Can you share some of your frontend code?

import React, { useState, useEffect } from "react";
import axios from "axios";

const handleCheckout = async () => {
await axios.post(
${process.env.REACT_APP_BACKEND_URL}/create-checkout-session
);
};

const ProductDisplay = () => (
<section>
<div className="product">
<img
src="https://i.imgur.com/EHyR2nP.png"
alt="The cover of Stubborn Attachments"
/>
<div className="description">
<h3>Stubborn Attachments</h3>
<h5>$20.00</h5>
</div>
</div>
<section>
<form onSubmit= {handleCheckout}>
<button type="submit">
Checkout
</button>
</form>
</section>
</section>
);

const Message = ({ message }) => (
<section>
<p>{message}</p>
</section>
);

function ViewCart() {
const [message, setMessage] = useState("");

useEffect(() => {
// Check to see if this is a redirect back from Checkout
const query = new URLSearchParams(window.location.search);

if (query.get("success")) {
  setMessage("Order placed! You will receive an email confirmation.");
}

if (query.get("canceled")) {
  setMessage(
    "Order canceled -- continue to shop around and checkout when you're ready."
  );
}

}, []);

return message ? (
<Message message={message} />
) : (
<ProductDisplay />
);
}export default ViewCart;

Imgur
#

That my front end code... I just copied it from the template and changed the form to do call a axios function for onSubmit instead of action = "/checkout" method ="POST"

dusk dock
#

Hi 👋

#

Are you seeing the request hit your server?

#

And when you say you copied it from the template, which template is that?

desert marlin
#

Hello! When I push the checkout button on the frontend it gives me this on my backend:
127.0.0.1 - - [06/Feb/2023 15:38:23] "POST /create-checkout-session HTTP/1.1" 200 -

dusk dock
#

The redirect shown in server.py should be returning a status of 303

#

as a response to a POST request to /create-checkout-session

desert marlin
#

hmmmmm that makes sense....

#

do you think my handleCheckout post request needs to be taking in my order data in a json response body format?

glacial basalt
#

geiselle-checkout-reactpython

desert marlin
#

I wasn't sure because the backend route has my products in there already in the line_items

dusk dock
#

You can extract the information from the route parameters but it's more "standard" to put them in the body of the POST request

#

I would add some print() statements in the create_checkout_session() function to ensure it's doing what you expect

desert marlin
#

Awesome! So I'll make my POST request take in my order data. And that will be posted to the line_items in the route

dusk dock
#

You will need to handle that in your Python code (extracting the order data and putting it in the line_items for the Checkout Session)

desert marlin
#

Print statements are a good idea

dusk dock
#

I do a lot of development in Python and they save me a lot of headache

#

Also, since you are handling the POST request using axios you will need to handle the redirect on the front-end in that function.

desert marlin
#

Ohhhh I was going to save my order data in a piece of state on the front end and pass it in that way but maybe on the backend is better! I have a database set up that saves the order info

#

Ohhhhhhhhhh 🤯 handle the redirect on the frontend!!!

#

I can do that! Thanks for all the great ideas!

dusk dock
#

To be clear, you still need to pass back the URL from your server to your front-end. But since you created the POST request using axios you'll need to catch the Checkout URL in the response to that axios call and redirect the browser there.

desert marlin
#

Ohhh now I see... that's more complicated than I originally thought but I can do that. Thanks for the clarification!

glacial basalt
#

it'd be best to move away from Axio, do a normal form submission on your page and do the server-side redirect

desert marlin
#

That's how it is originally on the form but it wasn't working for me. I thought because my all my other API request to my back end are made using axios... I'm going to try it again the normal way just to be sure

glacial basalt
desert marlin
#

That's when I use

<form action="/create-checkout-session" method="POST">

instead of my axios function

#

My backend is using localhost:5000

glacial basalt
#

That's something specific to your own integration. You need to make sure that you post to the right endpoint/URL/port since you use React and it has a different port

desert marlin
#

I remember now I got this error before and my work around was to use the axios function because it posts to
${process.env.REACT_APP_BACKEND_URL}/create-checkout-session

I'm trying now to figure out how to use that directly in the form but
action=${process.env.REACT_APP_BACKEND_URL}/create-checkout-session isn't working... I'll keep tinkering with it. I'm sure its a Syntax thing at this point

#

Hmmm actually maybe not a Syntax thing... action= puts http://localhost:3000 in front of everything I try but I need it to go to my REACT_APP_BACKEND_URL

glacial basalt
#

basically you configure your React app to know where the server lives, in your case on port 5000 instead of 3000

desert marlin
#

I'm getting a this error message now but I'll work on troubleshooting it

Request req_pMHFltyzZrMT6D: No such price: '{{price_1MYbslDxl1uhmuInTEyOXSuo}}'

desert marlin
#

Ok I might need help trouble shooting.... I made a new product and put the price API id into the line_items in my backend but it gave me the same error

bold crest
desert marlin
#

req_ywNt6bSmibTZoJ
req_3CpJII0FOhdxhs

#

I got this one now when I restarted the server

req_u8nSVeSkPqL3yv

bold crest
desert marlin
#

YAAAAAASSSSS!!!!!! That worked!!!! Curly bracket 🤦‍♀️