poczikdavid

[frail abyss]

Hi! Let me help you with this.

[teal flare]

Hi, thanks in advance

[frail abyss]

Yes, you can listen to "change" events: https://stripe.com/docs/js/element/input_validation

[teal flare]

yes but event.error property is not in the event object

[frail abyss]

What version of Stripe.js are you using?

[teal flare]

is there any way to detect errors like this:

"@stripe/stripe-js": "^1.48.0",

[frail abyss]

The latest version is 1.54.0. Could you try updating it? https://www.npmjs.com/package/@stripe/stripe-js

[frail abyss]

That's an Address Element by the way.

Could you listen for changes in the Payment Element?

[teal flare]

i could but i wan to listen to every input element of the form.

so
addressElement
authenticationElement
paymentElement

[teal flare]

okok

[frail abyss]

Do you see the error if you listen to paymentElement?

[teal flare]

give me a sec, i'll try

change is not working with paymentElement

it works with authentication and addressElement

and i upgraded the stripejs package

[frail abyss]

What do you mean it's not working?

[teal flare]

i mean change event is not triggered for paymentElement

[frail abyss]

Could you please share the code?

[frail abyss]

What are you getting back when do:

console.log(this.stripeElements.getElement("payment"));
console.log(this.stripeElements.getElement("authentication"));
console.log(this.stripeElements.getElement("address"));

[teal flare]

for payment element eg

[agile hare]

👋 taking over for my colleague. Let me catch up.

[teal flare]

hi, thanks

[agile hare]

I'm not really sure I understand what's the issue here

[teal flare]

im trying to get access to stripe form input validation error messages

and push them to google analytics data layer

but right now i cannot access the error messages on validation

[agile hare]

I just saw it

the problem is in this callback

            console.log(event);
            console.log(this.stripeElements.getElement("payment"));
            console.log(this.stripeElements.getElement("authentication"));
            console.log(this.stripeElements.getElement("address"));
        }

even though you're trying to bind the function with the this, I think there's something wrong with that

a better way of achieving what you want

is to create the callback as an arrow function

and remove the bind

something like

 const eventCallback = (event)=> {
            console.log(event);
            console.log(this.stripeElements.getElement("payment"));
            console.log(this.stripeElements.getElement("authentication"));
            console.log(this.stripeElements.getElement("address"));
        }

        this.addressElement = this.elements.create(this.fields.address.name, this.fields.address.options);
        this.authenticationElement = this.elements.create(this.fields.authentication.name, this.fields.authentication.options);
        this.paymentElement = this.elements.create(this.fields.payment.name, this.fields.payment.options);

        this.addressElement.on('change', (e)=> eventCallback(e));
        this.authenticationElement.on('change', (e)=> eventCallback(e));
        this.paymentElement.on('change', (e)=> eventCallback(e));

try this out

[teal flare]

let me check

something wrong with my ssl cert (iis)

[agile hare]

is it a self-signed certificate?

[teal flare]

yes

[agile hare]

don't use an SSL certificate on test mode https://stripe.com/docs/security/guide#:~:text=If need be%2C you can test your integration without using HTTPS%2C and enable it once you’re ready to accept live charges. However%2C all interactions between your server and Stripe must use TLS 1.2 (i.e%2C when using our libraries).

[teal flare]

okok thanks for the help