stripe.confirmPayment and gtag event purchase

Question

I'm working with stripe as payment gateway and I want to register a Google event purchase when a customer pay on my platform.

I'm using stripe elements to get the payment form on my platform and I've created on this case a subscription that must be payed and would be active once the payment is confirmed (until here everything is working fine)

However now that I want to implement the gtag; I'm not sure where and how to do it.

 const {error} = await confirmIntent({
                        elements,
                        clientSecret,
                        confirmParams:{
                            return_url:{{url.success}}
                        }
                    });
if (error) {
                            // This point is only reached if there's an immediate error when
                            // confirming the payment. Show the error to your customer (for example, payment details incomplete)
                            handleError(paymentError);
                        } else {
                            // Your customer is redirected to your `return_url`. For some payment
                            // methods like iDEAL, your customer is redirected to an intermediate
                            // site first to authorize the payment, then redirected to the `return_url`.
                        }

This code was provided by stripe, and apparently due to the fact that the call is async and on confirmParams there is an URL for the redirect, nothing happens other than the redirect when the payment is successful.

The gtag should look like:

gtag("event", "purchase", {
                            currency: 'EUR',
                            items: [{
                                item_id: 'item_id',
                                item_name: 'item_name',
                                coupon: 'coupon',
                                affiliation: 'AAAA',
                                item_category: 'subscription',
                                price: 10.50,
                                currency: 'EUR',
                                quantity: 1
                            }],
                            value: 10.50
                    });

I would appreciate any help.

I've tried removing the confirmParams and the return_url from the call, and then added in the if error else the gtag call and a window.location.href to the success URL but the confirmParams is required.

Answer 1

You could include the gtag logic on the return_url page.

Answer 2

Set redirect:'if_required' on your confirmPayment call, then no redirect will be triggered*, and your code won't be interrupted.

This is documented here.

*Some payment method types (like iDEAL and other bank redirects) require a redirect to work, so this won't work universally. But cards - including with 3DSecure - will not redirect with this argument set.