Stripe payments 提出重复请求&；关于国家变更的新要求

我在我的前端使用stripe 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

然后，如果我使用History API更改页面状态，它会再次执行所有这些调用，即使这是一个单页webapp。这正常吗？

编辑：自撰写本文以来，Stripe更新了他们的库以解决这些问题，这在很大程度上要归功于@mtlynch出色的调查工作。最新的答案见上面他的答案

---

对于那些想要避免这种情况的人来说，与其像文档描述的那样导入条带库，不如：

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

端点，您可以动态导入库，以便仅在实际需要条带功能时调用该库（例如，如果使用redux或vuex，则不会在每个页面上调用）：

---

很好的警告，我不确定m.stripe.com的功能是什么，因此在需要执行库之前只导入库可能会产生意外的副作用，但这似乎在我的测试中起作用。

这种行为也让我大吃一惊。如果你在SPA中的任何地方从“@stripe/stripe js导入{loadStripe}，stripe将从你的应用程序打开的那一刻起开始在每次页面加载时打电话回家

选项1：延迟条带的库加载 从@stripe/stripe js v1.4.0开始，您可以使用

/pure

导入路径，这将延迟stripe库的加载，直到应用程序实际调用

loadStripe

：

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

调用

loadStripe

后，Stripe将继续向

https://m.stripe.com/4

，直到浏览器通过HTTP请求（而不是通过JavaScript路由更改）导航到新页面，或者直到浏览器重新加载

选项2：禁用Stripe的欺诈检测机制 stripe.js向

https://m.stripe.com/4

作为其功能的一部分。从@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');

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

更多细节

---

如果你对其他细节感兴趣，我写了一篇关于这一点的博客：

完全同意这里的其他答案。动态导入

让事情进一步发展，你可以考虑在同一个原点框架中运行你的支付处理，这意味着一旦你完成了它，就可以迫使库卸载。

//从任何你想要的地方加载它
常量html=`
常量stripe=stripe（{stripe_KEY}'）；
/**
*这里是条带实现
*/
//一旦我们有了代币，我们就会将其发送回我们的应用程序
stripe.createToken（/*{stripe\u CARD}*/）。然后（{token}）=>
postMessage（{type:'stripe-token'，token}，'*'）；
`;
//等待帧加载，然后写入我们的身体
iframe.addEventListener（'load'，（）=>
iframe.contentWindow.document.write（html））；
}
//将iframe添加到页面，Stripe.js将加载（并开始ping其服务器！）
document.body.append（iframe）；
//等待框架确认我们已经完成了Stripe.js（参见上面的html片段）
addEventListener（'message'，（{data}）=>{
if（data.type==='stripe-token'）{
console.log（data.token）；
//我们有一个令牌！我们可以删除我们的帧（并卸载Stripe.js及其所有遥测数据！）
if（hasSrcdoc）iframe.srcdoc=''；
else iframe.src=''；
document.body.removeChild（iframe）；
}
});

---

此处的完整详细信息：

是的，这些请求类型的请求并不寻常，看起来像来自Stripe的CDN或analytics的呼叫。@henry，你找到什么了吗？？有什么解决办法吗？@RohitS没有，它们看起来很正常，尽管我在文档中找不到关于它们的任何信息。我相信duck的话。不幸的是，仍然不可能完全禁用这些跟踪器。禁用

advancedFraudSignals

后，当您将鼠标悬停在条带元素上时，仍然可以看到发生的事件：

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

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

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