Ed.D checkout | Stripe Developers | Page 1

woeful knoll Sep 27, 2021, 4:05 AM

#

copper plaza Sep 27, 2021, 4:05 AM

#

thanks for taking a look 🙂

woeful knoll Sep 27, 2021, 4:06 AM

#

heya @copper plaza, can you share the checkout url? Usually i get this issue when the url i've pasted into my browser isn't correct

copper plaza Sep 27, 2021, 4:06 AM

#

ok 1 moment

#

https://checkout.stripe.com/pay/cs_test_b1g8IyERdtjN7fzSjsowTfar4Tz07ilrzQ2fgStMIPV1BAfWoPOUjHxS1v

#

this is taken from the dev console

#

let me grab the logged payload for you

woeful knoll Sep 27, 2021, 4:08 AM

#

@copper plaza the checkout URL isn't that short, you should refer to this parameter : https://stripe.com/docs/api/checkout/sessions/object#checkout_session_object-url

Stripe API reference – The Session object

Complete reference documentation for the Stripe API. Includes code snippets and examples for our Python, Java, PHP, Node.js, Go, Ruby, and .NET libraries.

copper plaza Sep 27, 2021, 4:08 AM

#

oh one moment

#

youre absolutely right

#

its this:
https://checkout.stripe.com/pay/cs_test_b1g8IyERdtjN7fzSjsowTfar4Tz07ilrzQ2fgStMIPV1BAfWoPOUjHxS1v#fidkdWxOYHwnPyd1blpxYHZxWjA0TWlKa3xHV0E8fE1qSndmb2NhVjFkfGRMVlJUU09zNFJgTGczMjJPYjZfdHRAbXFsS0o9aERDVEZOZE9ERkQ3Q2JSPHFAd1R2UmJIaVxiRDI8aG1dV1ByNTU8MTwwfVY0NycpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPydocGlxbFpscWBoJyknYGtkZ2lgVWlkZmBtamlhYHd2Jz9xd3BgeCUl

woeful knoll Sep 27, 2021, 4:09 AM

#

yep

copper plaza Sep 27, 2021, 4:09 AM

#

😅

#

thanks

#

hopefully i dont come right back with more problames

woeful knoll Sep 27, 2021, 4:10 AM

#

no worries, we're here to help 😄

copper plaza Sep 27, 2021, 4:10 AM

#

i appreciate it. you guys are awesome

#

actually this is quite strange. the url i am redirecting to is actually correct, but for some reason i see requests from my browser being sent to the original one i posted

woeful knoll Sep 27, 2021, 4:14 AM

#

i think you're probably passing in the wrong parameter to redirect to

#

might want to add some logs to see what you're passing in

copper plaza Sep 27, 2021, 4:14 AM

#

i have a react site posting to my backend via axios, which is handling this on the backend by returning the redirect

#

which parameter are you talking about?

woeful knoll Sep 27, 2021, 4:15 AM

#

if you take a look at this sample : https://stripe.com/docs/checkout/integration-builder?client=react

copper plaza Sep 27, 2021, 4:15 AM

#

ok 1 moment

woeful knoll Sep 27, 2021, 4:15 AM

#

there is a line that is returning the url to redirect to i.e.
res.redirect(303, session.url)

#

maybe you can check what is the url you're returning in your response first

copper plaza Sep 27, 2021, 4:21 AM

#

ok let me find that

#

heres relevant code:

        metadata=metadata,
        payment_method_types=['card'],
        line_items=line_items,
        success_url=f'{request.environ["HTTP_ORIGIN"]}/#{trip.trip_description["payments"]["successUrlPath"]}',
        cancel_url=f'{request.environ["HTTP_ORIGIN"]}/#{trip.trip_description["payments"]["cancelUrlPath"]}',
        mode='payment',
        customer_email=trip.customer_email
    )

    return redirect(checkout_session.url, code=HTTPStatus.SEE_OTHER)

#

sorry, are you talking about the python code?

woeful knoll Sep 27, 2021, 4:23 AM

#

oh whoops, yeah, you can refer to the python code sample on that page which would be
return redirect(checkout_session.url, code=303)

copper plaza Sep 27, 2021, 4:24 AM

#

right. looks like thats what im doing

woeful knoll Sep 27, 2021, 4:24 AM

#

so when you log checkout_session.url before the redirect line, it returns the correct url?

copper plaza Sep 27, 2021, 4:25 AM

#

'url': 'https://checkout.stripe.com/pay/cs_test_b1FyViNFe61v5IquN7KYqNrmTNVP14hIgAecRtVld65RRSvO1GNRt9qtiM#fidkdWxOYHwnPyd1blpxYHZxWjA0TWlKa3xHV0E8fE1qSndmb2NhVjFkfGRMVlJUU09zNFJgTGczMjJPYjZfdHRAbXFsS0o9aERDVEZOZE9ERkQ3Q2JSPHFAd1R2UmJIaVxiRDI8aG1dV1ByNTU8MTwwfVY0NycpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPydocGlxbFpscWBoJyknYGtkZ2lgVWlkZmBtamlhYHd2Jz9xd3BgeCUl'}

#

seems so

#

copying the link address from my browser:
https://checkout.stripe.com/pay/cs_test_b1YD0ouHTWpByQGqrsM2Za5KJQ6yZnYl0PFIhs3RTZPoU3G31ABdtSxWNv

#

POST from axios -> flask backend with redirect -> followup request to that url..

#

not sure why

woeful knoll Sep 27, 2021, 4:27 AM

#

okay, then in your frontend, can you record the responses from your network request and check what exactly is being returned when you make the request to create-checkout-session

copper plaza Sep 27, 2021, 4:27 AM

#

okay let me take a stab

#

Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:84)

#

let me preface, im no frontend dev

woeful knoll Sep 27, 2021, 4:30 AM

#

do you have a live site which i can take a look at?

copper plaza Sep 27, 2021, 4:30 AM

#

i have this:

axiosInstance.interceptors.response.use(
  response => {
    console.log(response)
    return response
  },
  error => {
    console.log(error)
    return error.response && error.response.status === 401 ?
      redirect('/') :
      Promise.reject((error.response && error.response.data) || 'Something went wrong')
  }
);

#

i can make a deployment 1 sec

#

ok try this:
http://dev.trvlsport.com/#/guides/twende-safari-maasai-mara/trips/tour-maasai-mara

T R V L S P O R T

T R V L S P O R T | From tourist to traveler

#

you just have to hit book now and go through the short process

#

then continue to payment

woeful knoll Sep 27, 2021, 4:37 AM

#

hrm, you have a cors issue now though

copper plaza Sep 27, 2021, 4:37 AM

#

i dont understand why

#

any other requests have no issues

#

ugh. cors within scope for stripe support

#

is not*

#

but do you see where that request is going? its not the rediect url

#

this must be something im fundamentally misunderstanding about this

woeful knoll Sep 27, 2021, 4:38 AM

#

give me a second

copper plaza Sep 27, 2021, 4:38 AM

#

ok

#

i can open cors up to the world if that is easier

#

or is there some sort of stripe origin i should be adding to the whitelist?

woeful knoll Sep 27, 2021, 4:49 AM

#

your issue looks almost exactly similar to this : https://stackoverflow.com/questions/68630229/stripe-checkout-example-running-into-cors-error-from-localhost

copper plaza Sep 27, 2021, 4:49 AM

#

oh interesting

#

ok 1 moment

woeful knoll Sep 27, 2021, 4:51 AM

#

honestly, i'm not that familiar with axios too so we're going to have to muddle through together

copper plaza Sep 27, 2021, 4:51 AM

#

me neither 🙂

#

heres the post if this helps

#

let me add some clarity to logs 1 moment

#

ok i added some messages

woeful knoll Sep 27, 2021, 4:57 AM

#

@copper plaza to clarify, how are you making the request from your frontend to create the checkout session?

copper plaza Sep 27, 2021, 4:57 AM

#

like so:

woeful knoll Sep 27, 2021, 4:57 AM

#

are you doing it as per the sample i.e. using a form?

copper plaza Sep 27, 2021, 4:57 AM

#

const onSubmit = (): void => {
        const data = getFormData()

        console.log('THE POST DATA', data)

        axios.post(`/payments/checkout/${guideSlug}/${tripSlug}`, { data })
            .then(response => console.log(response))
            .catch(error => console.log(error))
    };

#

and this is the relevant part of the form:

#

<form onSubmit={handleSubmit(onSubmit)}>

#

im just loggin the response, but its not coming through

safe raptor Sep 27, 2021, 4:59 AM

#

axios is firing AJAX request, correct?

copper plaza Sep 27, 2021, 4:59 AM

#

believe so

#

confirmed

safe raptor Sep 27, 2021, 5:00 AM

#

normally to redirect to Checkout, you would want a direct request instead. Like a form with a submit action

copper plaza Sep 27, 2021, 5:00 AM

#

i assume theres an example of this in the stripe docs

woeful knoll Sep 27, 2021, 5:01 AM

#

right here : https://stripe.com/docs/checkout/integration-builder

#

you can select the relevant language

copper plaza Sep 27, 2021, 5:04 AM

#

this is where i suck at this. the backend stuff is no problemo, but i dont know how to post json this way:

<form 
  onSubmit={handleSubmit(onSubmit)}
  action={`${BASE_URL}/payments/checkout/${guideSlug}/${tripSlug}`}
  method="POST"
>

#

i saw something like this:
https://stackoverflow.com/questions/49601795/making-redirects-after-an-axios-post-request-with-express

Stack Overflow

Making redirects after an axios post request with express

I'm having trouble getting redirects to work after accepting a post request from Axios. I do know that the request is being sent and that it at least gets some response from the '/' route, because my

woeful knoll Sep 27, 2021, 5:07 AM

#

@copper plaza i'd suggest trying without all your additional parameters first. Lets just try it simply i.e.

<form action=${BASE_URL}/create-checkout-session method="POST">

copper plaza Sep 27, 2021, 5:07 AM

#

ok

woeful knoll Sep 27, 2021, 5:07 AM

#

the code didn't format very well, but you get the point

copper plaza Sep 27, 2021, 5:07 AM

#

sure

woeful knoll Sep 27, 2021, 5:07 AM

#

you would need to edit your Express route and code to some extent also

copper plaza Sep 27, 2021, 5:09 AM

#

so i got the request in flask and here's what's logged:

127.0.0.1 - - [27/Sep/2021 01:08:17] "OPTIONS /payments/checkout/twende-safari-maasai-mara/tour-maasai-mara HTTP/1.1" 200 -
{"trace_id": "d9796f73-872b-4bbf-b381-30862e79bc12", "request_payload": {"date": {"start": "2021-09-30T05:08:15.785Z", "end": "2021-10-07T05:08:15.785Z"}, "travelers": {"adults": 1, "children": 0}, "rooms": {"Tent": 1, "Guest room": 0}, "addtlItems": {}}, "event": "attempting_trip_booking", "timestamp": "2021-09-27T05:08:17.327963Z", "level": "info"}
[{'price_data': {'currency': 'usd',
                 'product_data': {'name': 'adults'},
                 'unit_amount': 51100},
  'quantity': 1},
 {'price_data': {'currency': 'usd',
                 'product_data': {'name': 'Tent'},
                 'unit_amount': 28000},
  'quantity': 1}]
{"trace_id": "d9796f73-872b-4bbf-b381-30862e79bc12", "request_payload": {"date": {"start": "2021-09-30T05:08:15.785Z", "end": "2021-10-07T05:08:15.785Z"}, "travelers": {"adults": 1, "children": 0}, "rooms": {"Tent": 1, "Guest room": 0}, "addtlItems": {}}, "booking_metadata": {"guide_id": "twende-safari-maasai-mara", "trip_id": "tour-maasai-mara", "dstart": "datetime.datetime(2021, 12, 9, 0, 0)", "guide_contact": "twendesafarimaasaimara@gmail.com"}, "event": "initiating_checkout_session", "timestamp": "2021-09-27T05:08:17.333972Z", "level": "info"}
127.0.0.1 - - [27/Sep/2021 01:08:18] "POST /payments/checkout/twende-safari-maasai-mara/tour-maasai-mara HTTP/1.1" 303 -

#

this was after removing the handleSubmit stuff

#

so that hasnt changed

woeful knoll Sep 27, 2021, 5:10 AM

#

alright, how about the redirect, is it working now?

copper plaza Sep 27, 2021, 5:10 AM

#

it's still throwing the same error

#

wait a second

#

no im wrong

#

one moment

woeful knoll Sep 27, 2021, 5:13 AM

#

sure

copper plaza Sep 27, 2021, 5:15 AM

#

its not posting anything

#

i guess thats why i am using axios to post

woeful knoll Sep 27, 2021, 5:16 AM

#

could you elaborate a bit more on "it's not posting anything"?

copper plaza Sep 27, 2021, 5:17 AM

#

if i log the request data on the backend it is None

#

using axios, i get the payload and i can parse/validate etc

#

the trouble is the redirect i guess

woeful knoll Sep 27, 2021, 5:18 AM

#

umm, onesec, lets take this one step at a time

copper plaza Sep 27, 2021, 5:18 AM

#

ok

#

i appreciate the help. its starting to look like this is not stripe related entirely

woeful knoll Sep 27, 2021, 5:19 AM

#

so lets verify that you using the form post action solves the issue first

#

just hard code some valid values, to make sure the the checkout session is created

copper plaza Sep 27, 2021, 5:19 AM

#

ok sure

woeful knoll Sep 27, 2021, 5:19 AM

#

and it returns a valid checkout_session.url

#

so that we can validate that

#

on a side note, when you're done with that, are you accessing the POST request data using request.form?

copper plaza Sep 27, 2021, 5:26 AM

#

it does the redirect

woeful knoll Sep 27, 2021, 5:26 AM

#

yay!

copper plaza Sep 27, 2021, 5:26 AM

#

i hardcoded the line_items

#

but no im not accessing the post request data by request.form

woeful knoll Sep 27, 2021, 5:26 AM

#

alright! now moving on to the next issue - your POST request data

#

maybe you'd want to try that then

copper plaza Sep 27, 2021, 5:26 AM

#

yesss

#

so.. i dont know how to post json in the form

#

all those components that select travelers/accommodations update a global state object which is just posted via aios. this is probably not the right way to do this...

woeful knoll Sep 27, 2021, 5:28 AM

#

you wouldn't access a form data as json i think (i admit i'm not that familiar with python too), but i was looking at this reference : https://pythonbasics.org/flask-http-methods/

copper plaza Sep 27, 2021, 5:28 AM

#

ok let me check

#

are you more a JS guy?

woeful knoll Sep 27, 2021, 5:28 AM

#

yeah

copper plaza Sep 27, 2021, 5:28 AM

#

good im a python guy hahaha so we can do it between the both of us

#

i can access the form just fine on the backend, but the trouble i was having is actually posting form data with my json blob

#

i'm probably using forms wrong...

woeful knoll Sep 27, 2021, 5:30 AM

#

i think the problem is with your additional parameters like ${guideSlug} and ${tripSlug}?

#

you can't figure out how to pass those in as well?

copper plaza Sep 27, 2021, 5:30 AM

#

those params just resolve the url which it posts to

woeful knoll Sep 27, 2021, 5:31 AM

#

maybe you'd need to explain a bit more about your json blob

copper plaza Sep 27, 2021, 5:31 AM

#

ok sure

woeful knoll Sep 27, 2021, 5:31 AM

#

cause i'm still a bit lost as to where it's coming from

copper plaza Sep 27, 2021, 5:31 AM

#

so in my react project, i have a global context containing all lineitems

#

this context gets posted to the backend where validation and stripe stuff happens

#

let me see if i can produce a sample

#

THE POST DATA {"date":{"start":"2021-09-30T05:33:25.092Z","end":"2021-10-07T05:33:25.092Z"},"travelers":{"adults":1,"children":0},"rooms":{"Tent":1,"Guest room":0},"addtlItems":{}}

#

its trip related data used for booking

#

this gets converted into lineitems in flask

#

and sent through to the checkout session

woeful knoll Sep 27, 2021, 5:39 AM

#

but shouldn't all of those be form data already? and it should be automatically sent on to flask when submit/post the form?

copper plaza Sep 27, 2021, 5:39 AM

#

i wasnt sure how to store json data in a form

#

i know this is probably basic stuff

#

i didnt think that posting it the way i have been would give me redirect problems

#

shows how little i know about front end stuff

#

and web dev in general

#

could i just create an <input> as json string?

woeful knoll Sep 27, 2021, 5:43 AM

#

i haven't taken a look at your frontend code, but lets take this step by step too, i've generally found breaking down an issue into smaller problems makes it all solvable

copper plaza Sep 27, 2021, 5:43 AM

#

good plan

woeful knoll Sep 27, 2021, 5:43 AM

#

if you take a look at this, https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data

#

generally, including the input fields in the html form element, will automatically send whatever input values there are over in the request

<form action="http://www.foo.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
</form>

#

so maybe what i'd suggest you do, is to include one input field, key in some value, click on the submit button and then see if it's sent on to your backend

copper plaza Sep 27, 2021, 5:46 AM

#

maybe i can try:
<input hidden={true} id="trip_data" value={JSON.stringify(getFormData)}/>

woeful knoll Sep 27, 2021, 5:46 AM

#

that might work too

#

i remember seeing that suggestion on stackoverflow haha

copper plaza Sep 27, 2021, 5:47 AM

#

ok let me take a stab

woeful knoll Sep 27, 2021, 5:54 AM

#

@copper plaza i'm going to be stepping out for lunch, but feel free to continue posting here if you have follow up questions. @safe raptor will step in to help

copper plaza Sep 27, 2021, 5:54 AM

#

you know what! i think we've figured it out!

#

im seeing the json data on my backend in the form

woeful knoll Sep 27, 2021, 5:54 AM

#

that's great!

copper plaza Sep 27, 2021, 5:54 AM

#

you da man!

#

when this goes into prod im sending you on a kenya safari 🙂

woeful knoll Sep 27, 2021, 5:55 AM

#

maybe when covid is all over, hope you're safe whereever you are

copper plaza Sep 27, 2021, 5:56 AM

#

you as well

#

thanks for waling me through a non stripe related issue

#Ed.D checkout