我正在尝试让 Stripe 与我的 Vue.js 2 应用程序一起工作。出于 PCI-DSS 原因，Stripe 要求其 Javascript总是从加载js.stripe.com https://stripe.com/docs/web/setup#setup。我已按照以下说明进行操作：
- 如何将外部 JS 脚本添加到 VueJS 组件 https://stackoverflow.com/questions/45047126/how-to-add-external-js-scripts-to-vuejs-components
- 如何在没有 NPM 或 Webpack 的情况下将 CDN 包含到 VueJS CLI？ https://stackoverflow.com/questions/49330055/how-to-include-a-cdn-to-vuejs-cli-without-npm-or-webpack
但我得到一个'Stripe' is not defined当我尝试使用该库时出错。这些解决方案似乎只是为了获得<script>标记到输出 HTML 中（例如用于分析），而不是实际使用该脚本中的函数和对象。
我的 Javascript 组件如下所示：
<script>
export default {
name: "PaymentPage",
mounted() {
let stripeScript = document.createElement('script');
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
document.head.appendChild(stripeScript);
let s = Stripe('pk_test_Fooo');
console.log(s);
}
}
</script>
我还尝试将脚本标签添加到我的public/index.html文件，但我得到了相同的结果。这可能是我的首选路线，因为 Stripe 鼓励开发人员在网站的所有页面上导入他们的脚本 https://stripe.com/docs/web/setup#setup.
<!DOCTYPE html>
<html lang="en">
<head>
// ...
<script src="https://js.stripe.com/v3/"></script>
</head>
如何从外部 CDN 提取脚本并在组件的 Javascript 中使用它？
我知道一些库可以将 Vue.js 与 Stripe 集成（例如matfish2/vue-stripe https://github.com/matfish2/vue-stripe and jofftiquez/vue-stripe-checkout https://github.com/jofftiquez/vue-stripe-checkout），但前者对我来说不能正确导入（我正在打问题＃24 https://github.com/matfish2/vue-stripe/issues/24），后者是针对旧的 Stripe API 构建的，新版本仍处于测试阶段。
在检查是否之前没有给脚本时间加载Stripe有没有。你需要的是这样的：
<script>
export default {
name: "PaymentPage",
mounted() {
let stripeScript = document.createElement('script');
stripeScript.setAttribute('src', 'https://js.stripe.com/v3/');
stripeScript.onload = () => {
let s = Stripe('pk_test_Fooo');
console.log(s);
};
document.head.appendChild(stripeScript);
}
}
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
