day0_code

[candid galleon]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1442803443441078465

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[stone haven]

👋 Hi there! Let me take a look

Can you share a screenshot of what you're seeing in the popup, where you expect the line items to be?

Regarding your question about knowing which ECE button was clicked, you can add a click handler: https://docs.stripe.com/js/elements_object/express_checkout_element_click_event

[lunar horizon]

So we just see the total amount

Awesome, thanks for pointing out the click handler

[stone haven]

Thanks for the screenshot! You can certainly set the line items when the ECE is created: https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-lineItems

But I'm looking into how updates should work here. Were you following some specific documentation here?

Yeah, I think you can only update the amount directly when calling update(): https://docs.stripe.com/js/elements_object/update#elements_update-options-amount

But in your click handler, you can update the lineItems just before the popup is shown: https://docs.stripe.com/js/elements_object/express_checkout_element_click_event#express_checkout_element_on_click-handler-resolve-lineItems

For example:

expressCheckoutElement.on('click', (event) => {
  console.log('ECE clicked:', event.expressPaymentType);
  event.resolve({
    lineItems: [
      {
        name: 'First item',
        amount: 123,
      }
    ]
  });
});

[lunar horizon]

I tried following this doc(https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-lineItems), even setting the lineItems during the creation but they didn't show up then as well. I am trying it in the click event now to see.

I can see the subtotal showing the click event now, but is it possible to update the lineItems as changes occur within the window? For example if someone changes the shipping method, we would want to change the price on the shipping line.

[stone haven]

The line items aren't shown by default for Google Pay; you need to click the arrow next to the total price to reveal them

[stone haven]

Yes, you can add a shippingratechange handler: https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event

[stone haven]

To show what I mean: you have to click that arrow to reveal the line items, at least for Google Pay.
So setting line items works when creating the ECE, but it might not be really obvious that they're there 🙂

[lunar horizon]

Yeah, I see the arrow. I think I have it now, just trying it to see.