bojack420 | Stripe Developers | Page 1

agile kayakBOT Sep 12, 2023, 4:19 AM

#

golden junco Sep 12, 2023, 4:20 AM

#

Hi there, you mean to display a loader while it's being loaded?

heady dew Sep 12, 2023, 4:20 AM

#

yeah

golden junco Sep 12, 2023, 4:20 AM

#

https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader

Stripe JS Reference

heady dew Sep 12, 2023, 4:20 AM

#

legend thank you~

golden junco Sep 12, 2023, 4:21 AM

#

Happy to help

heady dew Sep 12, 2023, 4:31 AM

#

I seem to be having trouble to get it to work

#

const options = {
amount: parseInt(this.total * 100),
loader: 'always',
mode: 'payment',
currency: 'aud',
setup_future_usage: 'off_session',
};

  const elements = this.stripe.elements(options);

#

did i implement this correctly?

golden junco Sep 12, 2023, 4:33 AM

#

What problem are you facing?

heady dew Sep 12, 2023, 4:33 AM

#

its not loading the skeleton at all

golden junco Sep 12, 2023, 4:34 AM

#

have you checked browser console? Any error there?

heady dew Sep 12, 2023, 4:35 AM

#

nope no errors

#

besides some content security policy directives but that occured way before hand

golden junco Sep 12, 2023, 4:38 AM

#

Is there a public URL that I can visit and see your integration?

heady dew Sep 12, 2023, 4:38 AM

#

umm not currently, are you able to send a screenshot of what the skeleton is meant to look like?

golden junco Sep 12, 2023, 4:40 AM

#

I don't have but you can visit https://stripe.com/docs/elements/express-checkout-element#try-demo to see demo

Express Checkout Element

Show multiple one-click payment buttons with a single component.

heady dew Sep 12, 2023, 4:40 AM

#

yeah mine isnt showing that little loading animation

#

just confirming this seems to look correct?

        loader: 'always',
        amount: parseInt(this.total * 100),
        mode: 'payment',
        currency: 'aud',
        setup_future_usage: 'off_session',
       };

      const elements = this.stripe.elements(options);
      this.elements = elements

      const expressCheckoutOptions = {
        wallets: {
          applePay: 'always',
          googlePay: 'always',
        }
      };

      const expressCheckoutElement = elements.create("expressCheckout", expressCheckoutOptions);

      expressCheckoutElement.mount("#express-checkout-element");```

#

my html is just
<div id="express-checkout-element"></div>

It doesn't have any css attached to it either

golden junco Sep 12, 2023, 4:45 AM

#

It should be setupFutureUsage instead of setup_future_usage

heady dew Sep 12, 2023, 4:47 AM

#

i've just updated that. seems to not have made a difference haha

golden junco Sep 12, 2023, 4:48 AM

#

If you can upload your work somewhere public, I can take a look and help you troubleshoot

heady dew Sep 12, 2023, 4:49 AM

#

yeah sure, ill chuck it up on ngrok

#

I've dm'd you the link

golden junco Sep 12, 2023, 4:55 AM

#

The ExpressCheckout Element is displaying for me

Screenshot_2023-09-12_at_12.55.14_PM.png

heady dew Sep 12, 2023, 4:56 AM

#

yeah but prior to loading it doesnt display anything

#

like a skeleton or anything

#

Display skeleton loader UI while waiting for Elements to be fully loaded doesnt seem to work

golden junco Sep 12, 2023, 4:57 AM

#

Ah, the loader is only supported for for the Payment Element, the Link Authentication Element, and the Address Element.

#

It doesn't support ExpressCheckout Element yet

heady dew Sep 12, 2023, 4:57 AM

#

ah ok yeah that makes sense

#

so i'll just need to add a custom loader for now im assuming

golden junco Sep 12, 2023, 4:58 AM

#

Yup you can do that

#bojack420