martpet_unexpected

[icy hearth]

👋 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/1374828276333285499

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

[hexed hearth]

Hi 👋 there are pretty limited appearance customization options for the buttons in the Express Checkout Element, as a lot of the branding there is dictated by the owners of the payment methods (Amazon, PayPal, Apple, etc)

You can review what button themese are available, and how to select those, in this section:
https://docs.stripe.com/elements/express-checkout-element#appearance
but let me know if that doesn't work as expected when you try it.

It looks like those buttons (or at least most of them) are expected to adjust to show a good option based on the them you select via the Appearances API, is that not what you're seeing in testing when you swap the theme being used?

Hm, I don't see them changing for me when I swap themes. Trying to see if I notice any difference setting different themes before rendering the element.

Okay, they definitely change if I use a different theme from the start, now to find the piece I'm missing about the update flow.

[cunning ember]

Yes, setting the "theme" initially on the Elements has effect on the buttons:
let elements = stripe.elements({ appearance: { theme: "night" } })

But updating the "theme" later doesn't affect the buttons:
elements.update({ appearance: { theme: "stripe" } })

I can also set the buttons color via:
let expressCheckout = elements.create("expressCheckout", { buttonTheme: { applePay: "white" } })

But it's not possible to later update it:
expressCheckout.update({ buttonTheme: { applePay: "black" } })

[hexed hearth]

Not the cleanest solution, but I see the theme update if I:

1. Destroy the existing Express Checkout Element
2. Create a new instance of the Express Checkout Element
3. Mount thenew Express Checkout Element

[cunning ember]

Thanks. It worked. I did try before destroying/recreating the Express Checkout Element and it didn't work, but now it does...

[hexed hearth]

Glad to hear that works! I still feel like this should be cleaner on our end, and I'm double checking with a teammate to make sure I'm not overlooking a better approach.