Stripe JS making duplicate requests & new requests on state change

Question

I'm using the stripe JS library on my frontend and just setting the token, not actually using the library for anything. Odd thing is that when I load any page stripe will make a bunch of odd requests and lots of them are duplicates. Often it'll look like this:

https://m.stripe.com/4
https://m.stripe.com/4
https://stripensrq.global.ssl.fastly.net/s/e
https://stripensrq.global.ssl.fastly.net/s/o
https://m.stripe.com/4

Then if I change the page state using the History API it makes all these calls again even though this is a single page webapp. Is this normal?

Answer 1

This behavior caught me by surprise, too. If you have import { loadStripe } from '@stripe/stripe-js anywhere in your SPA, Stripe will begin phoning home on every page load from the moment your app opens.

Option 1: Deferring Stripe's library load

As of @stripe/stripe-js v1.4.0, you can use the /pure import path, which defers the load of Stripe's library until the app actually calls loadStripe:

import { loadStripe } from '@stripe/stripe-js/pure';

Once you call loadStripe, Stripe will continue sending requests to https://m.stripe.com/4 on every URL change until the browser navigates to a new page through an HTTP request (not through a JavaScript route change) or until the browser reloads.

Option 2: Disabling Stripe's fraud detection mechanisms

stripe.js makes requests to https://m.stripe.com/4 as part of its fraud detection mechanisms. As of @stripe/stripe-js v1.5.0, you can disable this behavior by setting {advancedFraudSignals: false}:

import {loadStripe} from '@stripe/stripe-js/pure';

loadStripe.setLoadParameters({advancedFraudSignals: false})
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

Note that disabling this feature increases your risk of receiving fraudulent transactions.

More details

I wrote a blog post about this if you're interested in additional details: https://mtlynch.io/stripe-recording-its-customers/