bjrn-j_api | Stripe Developers | Page 1

radiant solsticeBOT Jun 28, 2024, 5:45 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1256304505729974354

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

fading rampart Jun 28, 2024, 5:47 PM

#

Hi 👋

I'm going to need a lot more detail in order to help.

Can you start with only the relevant parts of your JavaScript code?

#

And the exact error message you are receiving

sturdy flare Jun 28, 2024, 5:51 PM

#

I’m gonna get the code for you, but the error itself come from your side and not mine. There is a problem with fingerprints somehow.

#

I had the same issue a few weeks ago, but you couldn’t reproduce it and all of a sudden it worked for me so it’s quite intermittent

fading rampart Jun 28, 2024, 5:51 PM

#

Regardless of where the error comes from, I need the exact text

sturdy flare Jun 28, 2024, 5:52 PM

#

Yes, of course, give me a minute. The issue is on the computer and I’m writing on my phone.

#

“Could not retrieve elements store”

#

fading rampart Jun 28, 2024, 5:55 PM

#

And you JS code?

sturdy flare Jun 28, 2024, 5:56 PM

#

const cardPaymentElementLoaded = ref(false);
const loadPaymentElements = () => {
const appearance = {
theme: "stripe",
};
elements = stripe.elements({ appearance, amount: totalAmount.value, currency: "sek", mode: "payment" });

const paymentElementOptions = {
layout: "tabs",
fields: {
billingDetails: {
address: {
country: "never",
postalCode: "never",
},
},
},
};

const paymentElement = elements.create("payment", paymentElementOptions);

paymentElement.on("ready", function (event) {
window.setTimeout(() => (cardPaymentElementLoaded.value = true), 200);
});
if (paymentElement) paymentElement.mount("#payment-element");
};

fading rampart Jun 28, 2024, 5:57 PM

#

Would I be correct in assuming this line is the one throwing the error?

elements = stripe.elements({ appearance, amount: totalAmount.value, currency: "sek", mode: "payment" });

sturdy flare Jun 28, 2024, 5:57 PM

#

This is from incognito view

#

No I cannot locate the culprit in my code at all.

#

#

It is working in development as far as I can tell

fading rampart Jun 28, 2024, 6:00 PM

#

Looking at our internal code, this error is thrown when Stripe.Js is trying to use an existing instance of elements but it doesn't exist

#

This most often happens with React when an instance of elements is created/destroyed in response to a user action. It is less common in vanilla JS integrations

sturdy flare Jun 28, 2024, 6:01 PM

#

oh

#

This is vue

#

Can it happen when navigating around and coming back?

fading rampart Jun 28, 2024, 6:05 PM

#

Hmm for Vue, the reactivity is less of an issue

#

Do you create/destroy your Stripe elements instance on navigation or do you persist it?

sturdy flare Jun 28, 2024, 6:06 PM

#

It might persist because i am not destrying on leaving

#

Perhaps I should

fading rampart Jun 28, 2024, 6:06 PM

#

I have a test integration written in Vue and I haven't hit these errors. But I am building a pretty basic approach.

First, you said it runs without error in development?

#

Can you identify any behavior differences between dev and prod?

sturdy flare Jun 28, 2024, 6:06 PM

#

For now, yes

fading rampart Jun 28, 2024, 6:07 PM

#

Like, if you take the exact same steps and the same code, can you repro the error?

sturdy flare Jun 28, 2024, 6:07 PM

#

Not really. I have tried different things. Last time (now that I wrote to you) I removed from cart, changed page and added somthing else, and voila

#

Same steps give different outcome. Even if reload the page, same issue

#

Yeah, okey so:
New chrome profile:

Add to card
To to checkout
Remove from cart
Add other product
Back to checkout - Error

#

I am not seeing this behavior on dev

#

Yes, I am now

#

Okey, so in dev if I just move it out from main thread by wrapping loadPaymentElements in setTimeout it seems to work 100% of the time

fading rampart Jun 28, 2024, 6:13 PM

#

How are you integrating StripeJS into your Vue front-end? Are you using something like stripe-vue to create a single global instance of Stripe?

sturdy flare Jun 28, 2024, 6:14 PM

#

script: [{ hid: "stripe", src: "https://js.stripe.com/v3/" }] in nuxt.config and let stripe; first thing in <script setup> in that view

fading rampart Jun 28, 2024, 6:16 PM

#

Oh, I'm using Nuxt too. But I use vue-stripe plugin so I have

import Vue from 'vue'
import { StripePlugin } from '@vue-stripe/vue-stripe'

export default () => {
  const options = {
    pk: 'STRIPE_PUBLIC_KEY', 
  }
  Vue.use(StripePlugin, options)
}

in a vue-stripe.js file in my plugins directory. Then every page/component has a this.$stripe property

sturdy flare Jun 28, 2024, 6:16 PM

#

oh, I have never used that

fading rampart Jun 28, 2024, 6:17 PM

#

It's not something We built but we do coordinate with the maintainers of that library

sturdy flare Jun 28, 2024, 6:17 PM

#

That do sound more robust

#

I will take a look ASAP

fading rampart Jun 28, 2024, 6:19 PM

#

I try to assign the stripe elements instance to my Page so it persists but I don't have a lot of navigation in my integrations

#

E.g.

this.elements = this.$stripe.elements()

sturdy flare Jun 28, 2024, 6:22 PM

#

I am testing quickly now.

fading rampart Jun 28, 2024, 6:22 PM

#

Okey, so in dev if I just move it out from main thread by wrapping loadPaymentElements in setTimeout it seems to work 100% of the time
I'm still a little confused about this. But it sounds like you are able to both reproduce and eliminate the error

sturdy flare Jun 28, 2024, 6:23 PM

#

Still issue on prod. Just deployed

#

vue-stripe seems to break SSR

fading rampart Jun 28, 2024, 6:29 PM

#

vue-stripe builds their own page with Nuxt.js. Here is their nuxt.config.js file
https://github.com/vue-stripe/vue-stripe-checkout-nuxt-demo/blob/master/nuxt.config.js

#

But I wouldn't necessarily depend on vue-stripe in this case. I suspect the issue is the instance of elements here is being accessed when it doesn't exist

#bjrn-j_api