Stripe: give session/checkout info to success page

How can I capture the checkout info on the ‘success page’ after a successful purchase? (using ‘stripe checkout’ so not a custom checkout page)

I’d imagine it should be possible by doing something like this?:

Use case:
Checkout successful → redirect to /welcome → grab the name/email/product from checkout → add name/email to database → show forms on /welcome to add more data to user in the database(password etc.)

I just need to pass the checkout ID to the page I guess, that way I can look it up with ‘retrieve checkout session’ and get all that info image

Solution:
Add session_id={CHECKOUT_SESSION_ID} to the success url image

Then:

  1. Pass the query to the server action image
  2. Server side: use the session ID to retrieve the check out customer ID → retrieve customer info with that. (turn output on)
  3. Show variables on page / do what you want with the data

From:
https://stripe.com/docs/payments/checkout/custom-success-page

2 Likes

I have a similar situation where I need to pass the paymentMethodID generated by the Stripe Card Element on the client side to the server side. I do see it:
image

But the value returned in a hidden field or POST-> DB insert or GET var is: [object Object]
image

Do you have any clue what is happening?

I’m not 100% sure what you’re trying to do (haven’t worked with Elements yet)
But this might help: https://stackoverflow.com/questions/4750225/what-does-object-object-mean

Looks like you’re trying to show an object (how are you printing the var now?)

1 Like

Thanks, indeed, stripe.createPaymentMethod JS creates an object on the client side.

But i see an ID (pm_xxxxx). How do I grab it and pass to the client side?
image
How is this payment method ID sent over to the server for use in the API?
Are you familiar with Stripe development?

I’ve been diving into the Stripe dev since last week, so I can try help you figure it out.

Can you send me some more (less zoomed in) screenshots so I can see more context?

  • Where can you see the pm_1J2 ID?

Been on it for over a month, learned a few things/tricks so do not hesitate to ask away.

Trying to figure out how the payment method is handled between client side and server side.
As instructed by Stripe doc, I use on click stripe.confirmCardSetup (to complete the setupIntent) and stripe.createPaymentMethod:

It creates an Object. Below is the Chrome Dev Tool response.
image

Where does this Object or ID go, how can i retrieve it in my API flow? @max_gb suggested I save the ID in the DB but it turns out dynamic attribute stripecard1.paymentMethod is an Object, not an ID.

Then Stripe says using “methods like stripe.confirmCardSetup or stripe.confirmCardPayment will automatically create a PaymentMethod when I confirm a SetupIntent or a PaymentIntent (API).”


image
Yet I see no payment methods availalble for my APIs on the server side…

Definitely will! Have you figured it out since your last post?

I think I need to rebuild what you’re trying to do, it’s hard to think with you otherwise.
If possible you can share the relevant pages/server actions on github so I can look at it on my machine?

If not, can you tell me the broader goal? I will have to work with stripe elements this week as well so chance is high I need the same thing you’re doing.

Sorry I don’t know how to use GitHub. I really need to check some tutorials abt it. I don’t know coding at all. I’m from a marketing background!

Didn’t figure it out yet. Still asking the community with this post and Teodor trying to help: Help with the right input variables/object

karh I am totally lost on this section. Where is the server connect properties info? It says Action: /api/payments..... but I don't get how to make this part in order to retrieve customer session information form a successful purchase. would really appreciate some more walk through help on this.

  1. You have to define a query param on the page, where the return URL with the session id leads to. This query param has to have the name "session_id" if you use the default template for the creation of a checkout session.
  2. You have to create a server connect action where you define your own GET param named "sessionid" or something else.
  3. When you now insert a server connect action on the page, where you created the query param. Then you have to choose your server connect action from the backend and on refresh instead of "sort" and "dir" there should be an additional field named the same, you had named it in the GET parameters. This is where you insert {{query.session_id}}.
  4. Put the server connect action on auto load and in the backend you have to choose the retrieve checkout session component with the id being data binded with the GET param. This should give out all infos.

Man thank you, but still totally lost. Appreciate the explanation, but I need a visual walkthrough if at all possible.

Okay, hold on brother.

If you use an embedded checkout, usually you would have to define an return URL. When you use the template from the server connect components, it does automatically generate the return URL for the embedded checkout. For the hosted checkout it would generate a success and cancel URL.

After drawing the template component into your server action, it should immediately spawn a try/catch statement along some other components:
Q12

Your return URL should look like this:

Now you need to create a new page. Name it also "complete" so the routing will be the same. If you don't name it complete, you have to change the path to the same URL as stated in the URL Field.
Head to the "APP" component of the page and click on it.
Then click on the "define query params".


Then click right click on the query and add a variable named 'session_id'


Save it!

Then immediately add a serverconnect component for later:

Head to your workflows and add a new API Action. Call it what you want.
Go to the $_GET and click right click on it and add a new variable. Name it "session_id" or something else.


THEN SAVE THE SERVER ACTION.

Now head back to your 'complete' page and go to the server connect component and choose the API Action you just created.


Then a field with the name "session_id" or whatever you named it under $_GET should appear:
Q22

CLICK ON THE DATABINDING and write the following in the code section:

Then press select! And your field should look like this:
Q24

Now go back to your "retrieve" server action and insert a component named "retrieve checkout session" and insert the $_GET variable we defined into the session databinding.

Now just add a set value (for demonstrating purposes) and make it output.


Then click on the databinding and look for the following value:

Save it and it should output the value.

1 Like

@jpena If there is still a problem. Please post it.

Thought I followed it exactly as you say, but get this on my page:

Not Acceptable!

An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security.

I am beyond flustered now

Can you please send a screenshot of the server logs?;

Are you also making sure that you get to the complete page after failing/authorizing the test payment?

@jpena do you have maybe csrf enabled?