pbj-payment-element-next | Stripe Developers | Page 1

soft mesaBOT Oct 10, 2022, 1:53 PM

#

crisp agate Oct 10, 2022, 1:56 PM

#

Hello 👋
The repo you've linked is for a legacy version of the elements

The issue I'm having is that the change event handler doesn't actually fire after every change so it's proving to be impossible to know with certainty we're submitting a form that has a completed Stripe Payment element.
As far as I know, it should. Do you have an example repo or repl.it that I can take a look at?

glacial drum Oct 10, 2022, 2:02 PM

#

Hey @crisp agate thanks for such a quick response.

I can try to spin up a public example today and pull out any parts not relevant (we have a stepper quiz/application that i can remove).

Give me a few min!

crisp agate Oct 10, 2022, 2:02 PM

#

Yup, no problem 🙂

glacial drum Oct 10, 2022, 2:13 PM

#

@crisp agate pardon the delay here, Repl.it doesn't have a config for a Nuxt project so trying to piece it back together.

Happy to show code samples too if that is helpful!

crisp agate Oct 10, 2022, 2:14 PM

#

All good, yeah looking at the code would help

#

pbj-payment-element-next

glacial drum Oct 10, 2022, 2:23 PM

#

@crisp agate quick gist which was easier to spin up than Replit (still working on the Replit)

https://gist.github.com/patrickbjohnson/493bb5c9271961a80f0270af9e97ac1e

Gist

Stripe Elements & Nuxt Code

Stripe Elements & Nuxt Code. GitHub Gist: instantly share code, notes, and snippets.

#

We're using a Stripe Nuxt package to load the keys and mount the stripe JS file to the HTML as well.

Generally speaking, the the event listeners do fire just not with every form change.

The blur and focus events return, but its an empty object.

#

Adding, the fetchUpdates promise always returns an empty object even with the form isn't entirely filled out

crisp agate Oct 10, 2022, 2:31 PM

#

So what behavior are you seeing with the change event listener?
When does it fire/not fire?

glacial drum Oct 10, 2022, 2:37 PM

#

There is a chance this is a Vue issue, btw. But looking into that now.
Basically in my stripe object that is local to my template we have a completed property which is set to false by default. When Stripe tells us the payment object is complete we update this.stripe.completed to true based on that update, it should allow the final submit button to appear.

That last step of displaying the final submit button doesn't seem to be working.

#

@crisp agate okay, this may have been a false alarm. The event is firing correctly, something in Vue is messing around!

thank you for hearing me out. Apologies for using your time on something relatively trivial and clearly not a Stripe issue 😄

crisp agate Oct 10, 2022, 2:41 PM

#

NP! 🙂 All good
happy to help

#pbj-payment-element-next