bootsy_messaging-element-styles | Stripe Developers | Page 1

keen sequoiaBOT May 10, 2024, 5:15 PM

#

humble yewBOT May 10, 2024, 5:15 PM

#

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

bootsy_api, 1 day ago, 76 messages

keen sequoiaBOT May 10, 2024, 5:15 PM

#

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

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

wise depot May 10, 2024, 5:15 PM

#

Screenshot_2024-05-10_at_10.13.30_AM.png

#

is there a way to show logo above text

somber wyvern May 10, 2024, 5:16 PM

#

Hi 👋

No this part isn't something we can customize

wise depot May 10, 2024, 5:16 PM

#

ok

#

are the docs just not up to date with current functionality

somber wyvern May 10, 2024, 5:17 PM

#

That's what I'm curious about. The messaging doc: https://docs.stripe.com/payments/payment-method-messaging shows the logo above the text.

#

But we clearly don't have any feature in the Appearance API to allow you to configure this

wise depot May 10, 2024, 5:18 PM

#

yeah exactly. i like it better above the text like the docs, but if i can't change it so be it

somber wyvern May 10, 2024, 5:19 PM

#

OOC do you have a publicly accessible front-end where I can see this?

wise depot May 10, 2024, 5:20 PM

#

unfortunately i don't

somber wyvern May 10, 2024, 5:21 PM

#

Oh well. I will see if I can reproduce the behavior and raise it internally if I can

wise depot May 10, 2024, 5:21 PM

#

ok, thanks. different question...

somber wyvern May 10, 2024, 5:21 PM

#

Oh wierd, I see them above (forgot I already built this)

wise depot May 10, 2024, 5:22 PM

#

oh

#

i'm sending in this ``` const options = {
amount: 9900, // $99.00 USD // todo pass in amount
currency: 'USD',
// the country that the end-buyer is in
countryCode: 'US',
} as StripePaymentMethodMessagingElementOptions;

#

Screenshot_2024-05-10_at_10.22.51_AM.png

somber wyvern May 10, 2024, 5:23 PM

#

Interesting. I'm specifying the payment methods:

 const options =  {
      amount: 55000, // $550.00 USD
      currency: 'USD',
      paymentMethodTypes: ['klarna', 'afterpay_clearpay', 'affirm'],
      // the country that the end-buyer is in
      countryCode: 'US',
    }

wise depot May 10, 2024, 5:23 PM

#

huh, i can try that

somber wyvern May 10, 2024, 5:24 PM

#

Okay no I just removed that line and they still render above.... weird

wise depot May 10, 2024, 5:25 PM

#

Screenshot_2024-05-10_at_10.25.12_AM.png

#

more than one shows above... wah, wah

somber wyvern May 10, 2024, 5:26 PM

#

Interesting

#

When I only have 1, it shows inline with the text

#

This could be due to a bunch of internal CSS rules

wise depot May 10, 2024, 5:31 PM

#

when you say internal, you mean other CSS rules i have defined in my app's code

#

?

somber wyvern May 10, 2024, 5:37 PM

#

No, I mean CSS rules that are built into how the Messaging Element is rendered to do things like optimize for specific dimensions or layouts. But, to be fair, that's just a guess

wise depot May 10, 2024, 5:42 PM

#

ahh ok. different question. is there any kind of 'loading' variable. i've noticed after i call this.afterPayMessageElement.mount(this.afterPayMessage.nativeElement); there's still a second or two while the UI is empty before the forms load. we try to show a busy overlay when our api's are loading. is there any kind of promise or busy variable I can listen to while the ui is rendering?

somber wyvern May 10, 2024, 5:43 PM

#

You could try listening to the 'ready` event we document here: https://docs.stripe.com/js/element/events/on_ready

wise depot May 10, 2024, 6:10 PM

#

hmm... struggling to use that. when i use that the ui doesn't render at all...


                this.afterPayMessageElement.mount(this.afterPayMessage.nativeElement);
                // type: StripePaymentMethodMessagingElement
                this.afterPayMessageElement.on('ready', function(event) {
                    // Handle ready event
                    debugger;
                    that.busy = false;
                });```

#

if i don't run the .on() method it loads fine

somber wyvern May 10, 2024, 6:12 PM

#

Hmmm

somber wyvern May 10, 2024, 6:41 PM

#

And on('focus' doesn't work either?

wise depot May 10, 2024, 6:44 PM

#

i might have figured it out. not sure what i changed yet

#

it breaks when i have dev tools open

#

:🤦:

keen sequoiaBOT May 10, 2024, 6:46 PM

#

wise depot May 10, 2024, 6:47 PM

#

but it works with dev tools closed so I'm good

somber wyvern May 10, 2024, 6:48 PM

#

🎉

#bootsy_messaging-element-styles