julian1001_code

[plain meadow]

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

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

[finite ocean]

So elements.getElement('cardExpiry') isn't working because cardExpiry isn't an Element type. This function gets the entire Stripe Element component and can't be used with specific form inputs

[fossil hinge]

Okay, so to get it to work, I would have to change the approach and use the individual elements instead like CardNumberElement?

[finite ocean]

You can't use those sub-elements with getElement().

What are you trying to do here specifically? Why do you need to get the form input?

Stripe doesn't allow you to access raw card credentials, so there's no way to get those values.

[fossil hinge]

I want to fire tracking events for analytics onBlur for each of the elements within the payment element.

But if I pass in onBlur to PaymentElement it does onBlur when you leave the whole composite element

[finite ocean]

You don't pass onBlur. The onBlur is an event that you would create an event-listener for.

What you're likely looking for is the on('change') event to detect when something changes in the Payment Element: https://docs.stripe.com/js/element/events

[fossil hinge]

Problem is the event looks like this, it tells you if the entire payment element has been completed or not.

{
elementType: 'payment',
complete: false,
empty: false,
collapsed: false,
value: { type: "card" },
}

However I have been asked by the analytics team to fire an event when the user leaves each of the fields onBlur. I'm wondering if I should go back and say it's not possible unless we move to using individual elements instead of this payment element.

[finite ocean]

Unfortunately you're right, it's not that customizable for security reasons, so if you wanted that you'd have to build your own custom form, which brings a whole bunch of baggage, since you would be touching raw PANs and would need to prove you're PCI compliant

[fossil hinge]

Great thanks

[finite ocean]

Sure thing!