JavaScript Event for Stripe Element Interaction on Checkout Page

perittav
(@perittav)

1 year, 2 months ago
Hi Support Team,

We are using your “Payment Plugins for Stripe WooCommerce” plugin on our website and implementing custom Google Analytics 4 tracking via Google Tag Manager.

We want to trigger a GA4 add_payment_info event when a user first starts interacting with the Stripe credit card input fields (Card Number, Expiry, CVC) on the WooCommerce checkout page.

We understand these fields load within an iframe for security, which prevents standard JavaScript listeners (focusin, input) on our main page from detecting interaction due to the Same-Origin Policy.

Does your plugin trigger any client-side JavaScript custom events (e.g., on document.body, window, or a specific container) or provide any JavaScript hooks/callbacks that we can listen for, indicating when:
1. The Stripe card input elements are initialized and ready?
2. A user focuses on one of the Stripe card input fields (Card Number, Expiry, or CVC)?
3. The content/value within one of these fields changes?
Having such an event (especially for focus or readiness) would allow us to reliably trigger our GTM tag when user engagement with the payment fields begins. Could you please provide the names of any available events and how to listen for them?

Thank you for your assistance!

Best regards,

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Clayton R
(@mrclayton)

1 year, 2 months ago

Hi @perittav

Thank you for contacting us. I do know there are events that get triggered but given the technical nature of your request, I will need to follow up with an exact explanation and an example.

Kind Regards,

Thread Starter perittav
(@perittav)

1 year, 2 months ago

Thanks for the quick response and for looking into this for us.

We look forward to receiving the detailed explanation and examples regarding the JavaScript events for Stripe element interactions when you have them. An event related to element focus or readiness would be particularly helpful for our Google Tag Manager setup.
Plugin Author Clayton R
(@mrclayton)

1 year, 2 months ago
Hi @perittav

What you will want to do is create a Javascript file that is enqueued on the checkout page and that adds the handle wc-stripe-credit-card as a dependency. In your Javascript file, you can access the credit card instance and add your own events that are triggered by Stripe. Here is an example of what I mean.
```
const {getPaymentMethod} = wcStripeModules.checkoutModules;
const creditCard = getPaymentMethod('stripe_cc');

creditCard.paymentElement.on('focus', (event) => {
    // put your Google Tag code here
});

creditCard.paymentElement.on('change', (event) => {
    // put your Google Tag code here
});

creditCard.paymentElement.on('blur', (event) => {
    // put your Google Tag code here
});
```
Here is Stripe’s documentation on the different events that are triggered on the payment element. https://docs.stripe.com/js/element/events/on_focus

You can use the WordPress action like wp_print_footer_scripts to enqueue your custom script.

Kind Regards

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘JavaScript Event for Stripe Element Interaction on Checkout Page’ is closed to new replies.