chau_api

[wanton blade]

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

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

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.

• chau_api, 1 hour ago, 10 messages
• chau_api, 2 hours ago, 2 messages
• chau_code, 1 day ago, 17 messages
• chau_api, 5 days ago, 20 messages

[urban zodiac]

Hi

Could you please help me?

I got this error when using this script <script async src="https://js.stripe.com/v3"></script> with async

[frigid linden]

https://docs.stripe.com/js/including#:~:text=You can also load Stripe.js using the async or defer attribute on the script tag. Note%2C however%2C that with asynchronous loading any API calls will have to be made only after the script execution has finished.

[urban zodiac]

How can I improve this?

[frigid linden]

remove the async if you don't want that behavior

[urban zodiac]

we need to increase website performance because stripe js call is causing slow down of our website

[frigid linden]

would you mind sharing your code? or a URL to visit your website and see the source code?

[urban zodiac]

https://dev-omillionaire.bitville.dev/login

this is our website

[frigid linden]

I'm not getting the error you're mentioning

are you using react or vanilla javascript?

[urban zodiac]

I am using vuejs

I am getting this error

[sterile spire]

intesting, unfortunately we don't officially support that so it's not an ecosystem I'm really familiar with

if you're using script async then you will have to change your code to wait for the script to load before you try to do anything with Stripe like calling Stripe(key). Seems like you're not doing that, and trying to access it too early.

[urban zodiac]

So how do we know the script to load successfully before calling something else?

[sterile spire]

you can listen to the load event on the script tag

for reference : https://stackoverflow.com/a/43076418/9769731

[urban zodiac]

<script>
(function() {
document.write('<script async src="https://js.stripe.com/v3"></script>');
})();
</script>

I am adding this script in the header

this.stripeElements = this.$stripe.elements(options);
this.expressCheckoutElement = this.stripeElements.create('expressCheckout', {
buttonType: {
googlePay: 'buy',
},
buttonTheme: {
googlePay: 'white'
},
paymentMethods: {
applePay: VUE_APP_STRIPE_APPLE_PAY,
googlePay: VUE_APP_STRIPE_GOOGLE_PAY
},
layout: {
maxColumns: 1,
maxRows: 0,
overflow: 'never'
},
paymentMethodOrder: ['googlePay', 'applePay']
});

            this.expressCheckoutElement.mount('#express-checkout-element');

I am using this.$stripe

[sterile spire]

you need to investigate how you create that $stripe variable then

[urban zodiac]

const stripe = Stripe('pk_test_oKhSR5nslBRnBZpjO6KuzZeX');

const appearance = { /* appearance / };
const options = { layout: 'accordion', / options */ };
const elements = stripe.elements({ clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

I use example this

[sterile spire]

if you're using script async then you will have to change your code to wait for the script to load before you try to do anything with Stripe like calling Stripe(key). Seems like you're not doing that, and trying to access it too early.

[urban zodiac]

Can you suggest us how to check that load before calling Stripe(key)?

[sterile spire]

you can listen to the load event on the script tag

for reference : https://stackoverflow.com/a/43076418/9769731 (or Google in general "wait for async script tag global")