! rendives.nl

[primal lantern]

Hello! Are you seeing errors in your server logs when this happens?

[upbeat sparrow]

hi yes, i found the error: error - unhandledRejection: ReferenceError: session is not defined

[primal lantern]

Which line of the above code did that error come from?

[upbeat sparrow]

session.id

line 46

[primal lantern]

Ah, yeah. session doesn't exist at that point. You need to get the Checkout Session's ID out of the event instead.

Try event.data.object.id I think?

[upbeat sparrow]

yes that works thanks, also how would i then use the line_item data in my sucess page and send a confirmation mail to the customer?

and i am able to send a message to my discord webhook when a payment is succeeded right?

[primal lantern]

Yeah, how you use the data is up to you.

Showing the line item data on your success page is something you would handle on your end. You should have the information in your system at that point thanks to the webhook, and can render whatever you want.

[upbeat sparrow]

what do you mean with 'in your system'? I don't really get where its stored

[primal lantern]

Typically you would save that information in your system when you receive the checkout.session.completed Event if you want to display it on your site later on.

[upbeat sparrow]

localstorage?

[primal lantern]

Customer pays in Checkout > you get the checkout.session.completed Event and update your system with the details of the successful payment on your server > you respond with success to the Event delivery request > the customer is redirected to your success page > your server renders whatever success page you want based on the data stored in your server.

No, localStorage would not typically be involved in a flow like this.

[upbeat sparrow]

is there a doc about this? I don't really get it

on how/where to save the customer details after the event

[primal lantern]

I think the closest thing we have to a doc would be this: https://stripe.com/docs/payments/checkout/fulfill-orders

I'm happy to help further if you can ask more specific questions or let me know what specific parts you need help with.

[upbeat sparrow]

ah okey, i just finished that doc. also what are the options to put in this code?

const fulfillOrder = (lineItems) => {
  // TODO: fill me in
  console.log("Fulfilling order", lineItems);
}

this is where you put code that has to be executed after a succesful checkout right?

[primal lantern]

That's typically where you would save details to your server's DB about the successful payment and what was purchased.

[upbeat sparrow]

ahh okey, do you have a suggestion on how to do that? my idea would be putting the details in localstorage, and then removing it after the customer navigates away from the succes page (where the order confirmation is shown) and then sent them an email

also im now setting up a discord webhook to notify me about the purchase and what is purchased.

[primal lantern]

localStorage is client-side. You likely want this information stored server-side.

This other guide might be the missing piece of the puzzle for you: https://stripe.com/docs/payments/checkout/custom-success-page

[upbeat sparrow]

why is that?

[upbeat sparrow]

i''ll read it thanks.

[primal lantern]

Basically the Checkout Session's ID will be in the URL when they land in your success page. You can use that ID to look up information in your system and render the success page you want them to see.

[upbeat sparrow]

ah okey, so i do have to store the data in a database? because i don't use one to be honest, only for my webshop data

My business is still really small so its very easy to keep track of all the orders manual

[primal lantern]

Let's back up a bit. What do you want to show on your success page?

[upbeat sparrow]

okey so like in the stripe dashboard you have all the details right, so bought product, price, payment method etc etc. You don't provide an order number with that right?

[primal lantern]

Some people use the Checkout Session ID as the order number, but no, we don't provide a separate order number like you're describing.

[upbeat sparrow]

is checkout Session ID noted as created: 1679507516,?

or the one starting with pi_

[primal lantern]

It's the one starting with cs_

Like cs_test_123...

Did you read through https://stripe.com/docs/payments/checkout/custom-success-page? I think it describes what you want to do. Basically you're going to adjust your success_url so it includes the Checkout Session's ID, then on your success page you can write client-side code that asks your server to retrieve that Checkout Session from Stripe. Then you can return details like line items and whatnot from the Checkout Session and display them on the page.

[upbeat sparrow]

ahh okey great, i quickly checked it out but i will again. thanks, i will let you know

also another question i couldn't really find it. this is how i add it know but can i add custom fields for my self to set the purchased size? Now i set it in the description but thats not efficient for me

lineItems.push({
          price_data: {
            currency: "eur",
            product_data: {
              name: cart[item].product,
              description:
                cart[item].product +
                ", " +
                cart[item].size +
                ", " +
                cart[item].sku,
              images: [cart[item].image],
            },
            unit_amount: Number(cart[item].price) * 100,
          },
          quantity: cart[item].BuyQuantity,
        });

[primal lantern]

You can add custom fields to the Checkout Session, but not to an individual line item: https://stripe.com/docs/payments/checkout/custom-fields

[upbeat sparrow]

but these are customer filled in right?

[primal lantern]

Oh, right, sorry. I was thinking of custom fields on Invoices, which are read-only.

The approach you're taking is probably best.

[upbeat sparrow]

okey so doing my approach and then splitting on ',' probably the best way right?

[upbeat sparrow]

So yeah about this, the order number (probably by stripe), customer name, customer address, email, purchased item, including the image url etc. (all included in the line_items) and some additional standard static info

[dusty crystal]

Stepping in for rubeus here 👋

I scanned through the conversation here and I don't understand what you're referring to for splitting here. Are you trying to parse values from the custom fields?

[upbeat sparrow]

what i mean is my description is: ```js
description:
cart[item].product +
", " +
cart[item].size +
", " +
cart[item].sku,

```js
const desc = "product, size, sku";

const splitted = desc.split(", ");

const product = splitted[0]
const size = splitted[1]
const sku = splitted[2]

like this but then with line_items.description of course

[dusty crystal]

If you're already using ad-hoc prices and products, you can also include metadata within product_data to avoid having to parselike that. You can make your data structured :).
https://stripe.com/docs/api/checkout/sessions/create#create_checkout_session-line_items-price_data-product_data-metadata

This won't show to the customer within checkout, so you likely want it in both places

but for ingestion after payment, the metadata will be much nicer for you to work with

[upbeat sparrow]

ahh okey, good to know thanks! also another question

you can't search for orders in the dashboard by the customer session id right?

and also i get the error Uncaught (in promise) FetchError: Error fetching https://r.stripe.com/0: NetworkError when attempting to fetch resource. in my console after a checkout is finished, idk why

and i still get the [ERROR] Failed to POST: Post "http://localhost:3000/api/stripe-webhook": context deadline exceeded (Client.Timeout exceeded while awaiting headers)

[dusty crystal]

No not by session id

[dusty crystal]

Is this blocking you from doing anything? That should just be an internal issue that doesn't impact your integration in any way

[dusty crystal]

Is that happening while forwarding using the CLI?

[upbeat sparrow]

im not sure yet.

[upbeat sparrow]

this happens after i authorize the payment

[dusty crystal]

Yes but in what context?

That looks like a failed webhook delivery and I'm asking if that's something youve configured in teh CLI to forward to your local endpoint

[upbeat sparrow]

do you want to see my code?

[dusty crystal]

If it's relevant to that error, sure, but you haven't told me where that happens

[upbeat sparrow]

well i don't really know. I do the payment etc, everything goes well and then after around 30 seconds this one is logged

[dusty crystal]

Where is it logged?

[upbeat sparrow]

at the stripe listen log

[dusty crystal]

ok so thats the Stripe CLI!

and you're presumably using --forward-to to try to send this to a local webhook endpoint

and that fails

Is your server running and ready to receive those events? Do you have any server logs when the CLI tries to deliver them?

[upbeat sparrow]

it is running yes, what would a log look like where it tries to deliver?

by the way, step 2 here https://stripe.com/docs/payments/checkout/custom-success-page?

is that in the webhook.js file?

[dusty crystal]

No, the success page would be where you point your success_url for the customer redirect after the session

The webhook endpoint is separate, for notifications to your server directly from Stripe

[upbeat sparrow]

also why isn't the price_data shown in the line_items when fulfilling the order ? i do this in my checkout-session.js :

lineItems.push({
          price_data: {
            currency: "eur",
            product_data: {
              name: cart[item].product,
              description: cart[item].size + " , " + cart[item].sku,
              images: [cart[item].image],
            },
            unit_amount: Number(cart[item].price) * 100,
          },
          quantity: cart[item].BuyQuantity,
        });
      }

      const session = await stripe.checkout.sessions.create({
        
        line_items: [...lineItems],
        mode: "payment",
        success_url: `${req.headers.origin}/order-succes`,
        cancel_url: `${req.headers.origin}/order-canceled`,
      });

so as you can see it should include price_data right?

should i expand it or something like that?

if (event.type === "checkout.session.completed") {
      // Retrieve the session. If you require line items in the response, you may include them by expanding line_items.
      const sessionWithLineItems = await stripe.checkout.sessions.retrieve(
        event.data.object.id,
        {
          expand: ["line_items"],
        }
      );
      const lineItems = sessionWithLineItems;

      // Fulfill the purchase...
      fulfillOrder(lineItems);
    }

[zinc tundra]

Hello, synthrider had to step out but I can help. Catching up here now...

[dusty crystal]

One last note before I have to run, you likely just need to extend your expansion to the product within the price: expand: ["line_items.data.price.product"],

[upbeat sparrow]

doesn't work

still not included

[zinc tundra]

Sorry to hear. What is included in the product object when you expand like that?

[zinc tundra]

Can you try printing out line_items.data? Looks like it just shows [Object] in that example output

[upbeat sparrow]

sure thing

[upbeat sparrow]

that logs undefined

oh my bad i forgot one

lineItems.line_items.data logs:

  {
    id: 'li_1MoYd5DoGY3M8BfmRkqsVcjH',
    object: 'item',
    amount_discount: 0,
    amount_subtotal: 9999,
    amount_tax: 0,
    amount_total: 9999,
    currency: 'eur',
    description: 'Nike Dunk Low SE Copper Swoosh (GS)',
    price: {
      id: 'price_1MoYd5DoGY3M8Bfm1QDOJ5iZ',
      object: 'price',
      active: false,
      billing_scheme: 'per_unit',
      created: 1679518291,
      currency: 'eur',
      custom_unit_amount: null,
      livemode: false,
      lookup_key: null,
      metadata: {},
      nickname: null,
      product: [Object],
      recurring: null,
      tax_behavior: 'unspecified',
      tiers_mode: null,
      transform_quantity: null,
      type: 'one_time',
      unit_amount: 9999,
      unit_amount_decimal: '9999'
    },
    quantity: 1
  }

but lineItems.line_items.data.price logs undefined

okey so lineItems.line_items.data[0].price gives what i want.

but then i also have to loop over it for every product in the order

[true wigeon]

Hi, stepping in and catching up here.

[upbeat sparrow]

oki

[true wigeon]

That was a lot of context, that is correct. Glad it's working now.