Stripe JS在状态更改时发出重复请求和新请求

Question

我在我的前端使用条带JS库,只是设置令牌,而不是实际使用库.奇怪的是,当我加载任何页面条带时会产生一堆奇怪的请求,其中很多都是重复的.通常它看起来像这样:

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

然后,如果我使用历史记录API更改页面状态,即使这是单页面webapp,它也会再次进行所有这些调用.这是正常的吗？

Answer 1

这种行为也让我感到意外。如果您import { loadStripe } from '@stripe/stripe-js的 SPA 中有任何位置，从您的应用程序打开的那一刻起，Stripe 就会在每个页面加载时开始打电话回家。

选项 1：推迟 Stripe 的库加载

从@stripe/stripe-js v1.4.0 开始，您可以使用/pure导入路径，它将 Stripe 库的加载推迟到应用程序实际调用loadStripe：

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

一旦您调用loadStripe，Stripe 将继续https://m.stripe.com/4在每次 URL 更改时发送请求，直到浏览器通过 HTTP 请求（而不是通过 JavaScript 路由更改）导航到新页面或直到浏览器重新加载。

选项 2：禁用 Stripe 的欺诈检测机制

https://m.stripe.com/4作为其欺诈检测机制的一部分，stripe.js 发出请求。从@stripe/stripe-js v1.5.0 开始，您可以通过设置禁用此行为{advancedFraudSignals: false}：

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

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

请注意，禁用此功能会增加您收到欺诈交易的风险。

更多细节

如果您对其他详细信息感兴趣，我写了一篇关于此的博客文章：https : //mtlynch.io/stripe-recording-its-customers/

Answer 2

编辑：自从写这篇文章以来，Stripe 已经更新了他们的库来解决这些问题，这在很大程度上要归功于 @mtlynch 所做的出色的调查工作。请参阅上面他的回答以获取最新答案。

对于那些想要避免这种情况的人来说，似乎不需要像文档描述的那样导入 Stripe 库：

import { loadStripe } from "@stripe/stripe-js";

// when wanting to actually load Stripe this method is called,
// but `m.stripe.com` was fired on page load, before this was called
const publicKey = "yourPublicKey";
const stripe = await loadStripe(publicKey);

...它将自动调用m.stripe.com端点，您可以动态导入库，以便仅在您真正需要 Stripe 功能时调用（不是在每个页面上，例如，如果使用 redux 或 vuex）：

// create a new async function `stripeJs` that returns the library
const stripeJs = async () => await import("@stripe/stripe-js");

// later, we can call this before we need to use the library
// (e.g. in a vuex/redux action)
// STRIPE's TRACKING SCRIPT WILL BE CALLED NOW, RATHER THAN ON LOAD
const { loadStripe } = await stripeJs();
const publicKey = "yourPublicKey";
const stripe = await loadStripe(publicKey);

// example Stripe call
stripe.redirectToCheckout(...)

公平警告，我不确定是m.stripe.com什么，因此在需要执行之前仅导入库可能会产生意想不到的副作用，但这似乎在我的测试中有效。