Quasar Framework 客户端 Stripe 的问题 [英] Trouble with client side Stripe with Quasar Framework
问题描述
我目前正在尝试配置 stripe.js 的客户端部分，以便我可以使用它的元素 API 源创建功能来收集用户付款信息.然而，客户端包只能通过脚本标签使用.我已经尝试通过 index.template.html 引入它(这不适用于 quasar)但是一旦我去初始化一个 Stripe 客户端它总是错误;
vue.stripe = Stripe(‘pk_live_dMLr0hShLxaZmXesv1buhndd’)
错误是;
未定义错误条纹.
我尝试了各种替代方法在包中导入，scriptjs，手动挂载到register.vue中的dom，都没有找到Stripe变量，实例化一个客户端.或者，如果我将 Stripe 设置为等于 script 标签，那么我会得到一个 Stripe is not a function 错误.这是我正在学习的教程；
https://stripe.com/docs/stripe-js
和我的代码；
https://github.com/Screen-Art-Studios/TimeCrunch/blob/master/src/pages/Register.vue(第 74-76 行和 142-203 行我想调用元素 api 的注册页面)
https://github.com/Screen-Art-Studios/TimeCrunch/blob/master/src/plugins/stripe.js(我用来导入包的类星体插件)
任何帮助都可以挽救生命，因为这是阻止此应用完成的全部因素.
*更新我仍然无法准确理解正在发生的事情，但是一旦我将其更改为this.$Stripe()"与Stripe()"，它就不再抛出 Stripe is not defined 错误，我认为将引用 Quasar 生成的插件并且它确实编译了.但是现在它抛出一个 stripe.elements 不是函数错误；var stripe = this.$Stripe(‘pk_test_EUZwPeinKym4DDl0d9kMbrOw’)var 元素 = stripe.elements()这几乎正是教程所规定的 [唯一的区别是从 Stripe() 更改为 this.$Stripe()].我将继续对此感到困惑，对整个 Quasar 包事情的任何澄清和/或对解决此问题的见解都将是救命稻草.
我使用 Quasar 和 Typescript(以及 vue-property-decorators)，下面的效果很好.
如果愿意，您可以轻松地将其调整为纯 JS.
模板部分
<p>卡片</p><div id="卡片元素"></div>脚本部分
//动态包含 Stripe.jsincludeStripe(URL:字符串，回调:任何){让 documentTag = 文档让标签 = '脚本'让对象 = documentTag.createElement(tag)让 scriptTag = documentTag.getElementsByTagName(tag)[0]object.setAttribute('src', `//${URL}`)如果(回调){object.addEventListener('加载'，功能(e){回调(空，e)},错误的)}scriptTag.parentNode!.insertBefore(object, scriptTag)}条纹:任何元素:任意卡:任何异步 configureStripe() {const pubKey = 等待 getStripePubKey()this.stripe = (window as any).Stripe(pubKey)this.elements = this.stripe.elements()this.card = this.elements.create('card')this.card.mount('#card-element')}创建(){//检查 Stripe 是否尚未加载，在 localhost 中热加载时很有用const stripeComponents = document.getElementById('card-element')如果 (!stripeComponents)this.includeStripe('js.stripe.com/v3/', this.configureStripe)}}请注意，我通过自定义 API 函数调用(从服务器检索)获取 pubKey，以便稍后在需要时动态更改它.
您也可以跳过检查 -- Stripe.js 是否已经加载 -- 尽管在开发时控制台中始终没有警告很有用....
你也可以选择添加 <script src="https://js.stripe.com/v3/"></script> 的手动"、非动态插入版本. 自己在 Quasar 的 index.template.html;不过，我不确定这是不是最好的主意，因为它会不必要地在整个应用程序中加载它.
I am currently attempting to configure the client side portion of stripe.js so I can use its elements api source creation feature to collect user payment information. However the client side package is only available via script tag. I’ve tried bringing it in via the index.template.html (this doesn't work with quasar) however it always errors as soon as I go to initialize a Stripe client with;
vue.stripe = Stripe(‘pk_live_dMLr0hShLxaZmXesv1buhndd’)
the error is;
Error Stripe is not defined.
I’ve tried a variety of alternative methods for importing in the package, scriptjs, hand mounting it to the dom in register.vue, all to no avail as it can’t find the Stripe variable and instantiate a client. Or if I set Stripe equal to the script tag then I get a Stripe is not a function error.
here’s the tutorial I’m following;
https://stripe.com/docs/stripe-js
and my code;
https://github.com/Screen-Art-Studios/TimeCrunch/blob/master/src/pages/Register.vue (Line 74-76 & 142-203 The register page where I would like to call the elements api)
https://github.com/Screen-Art-Studios/TimeCrunch/blob/master/src/plugins/stripe.js (The quasar plugin that I used to import the package)
Any help would be a life saver as this is all that is preventing the completion of this app.
*Update I still am having issues with understanding exactly what is going on but its no longer throwing a Stripe is not defined error once I changed it over to ‘this.$Stripe()’ vs ‘Stripe()’ thinking that would reference the plugin Quasar generated and it did compile. However now its throwing a stripe.elements is not a function error when; var stripe = this.$Stripe(‘pk_test_EUZwPeinKym4DDl0d9kMbrOw’) var elements = stripe.elements() which is almost exactly what the tutorial prescribes [The only difference being the change from Stripe() to this.$Stripe()]. I’m gonna keep banging my head about this, any clarification on the whole Quasar package thing and / or insight into solving this problem would be a lifesaver.
I use Quasar with Typescript (and vue-property-decorators), and the below works great.
You could easily adapt it for plain JS if preferred.
template part
<div>
<p>Card</p>
<div id="card-element"></div>
</div>
script part
// Includes Stripe.js dynamically
includeStripe(URL: string, callback: any) {
let documentTag = document
let tag = 'script'
let object = documentTag.createElement(tag)
let scriptTag = documentTag.getElementsByTagName(tag)[0]
object.setAttribute('src', `//${URL}`)
if (callback) {
object.addEventListener(
'load',
function(e) {
callback(null, e)
},
false
)
}
scriptTag.parentNode!.insertBefore(object, scriptTag)
}
stripe: any
elements: any
card: any
async configureStripe() {
const pubKey = await getStripePubKey()
this.stripe = (window as any).Stripe(pubKey)
this.elements = this.stripe.elements()
this.card = this.elements.create('card')
this.card.mount('#card-element')
}
created() {
// checks that Stripe is not loaded already, useful when hot-reloading in localhost
const stripeComponents = document.getElementById('card-element')
if (!stripeComponents)
this.includeStripe('js.stripe.com/v3/', this.configureStripe)
}
}
Note that I get the pubKey via a custom API function call (retrieved from a server), so as to be able to dynamically change it later on if needed.
You could also skip the check -- whether Stripe.js was already loaded-- though it is useful when developing to not have the warning in console all the time....
And you could also go for the "manual", non-dynamically inserted version of adding <script src="https://js.stripe.com/v3/"></script> yourself in Quasar's index.template.html; not sure that's the best idea though, as it would keep it loaded throughout the entire app unnecessarily.
这篇关于Quasar Framework 客户端 Stripe 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
