[英]Unable to integrate Stripe checkout into Vue JS app
I am trying to redirect to stripe checkout using a click event that calls the payStripe function我正在尝试使用调用 payStripe function 的点击事件重定向到条带结帐
<button @click="payStripe" class="btn btn-primary" type="button">Place Order</button>
I have imported stripe into my Vue component like so;我已经像这样将 stripe 导入到我的 Vue 组件中;
import { loadStripe } from "@stripe/stripe-js";
const stripe = loadStripe('MY-KEY');
I am using Firebase cloud functions and axois to fetch the session and store this to a data property, this works fine.我正在使用 Firebase 云函数和 axois 来获取 session 并将其存储到数据属性中,这工作正常。
But, the payStripe method, when called, gives the following error;但是,调用 payStripe 方法时会出现以下错误;
Error in v-on handler: "TypeError: stripe.redirectToCheckout is not a function"
Here is the function i am using which, from all accounts is similar to the Stripe API docs;这是我正在使用的 function,从所有帐户来看都类似于 Stripe API 文档;
data() {
return {
sessionId: null,
}
},
methods: {
//This function sends us to the stripe checkout
payStripe() {
stripe.redirectToCheckout({
sessionId: this.sessionId
})
.then(function(result) {
console.log(result);
}).catch(function(error) {
console.log(error);
});
}
},
I had original issues with babel-core, so i updated to @babel/core to get rid of rest operator issues when compling code, but faced with this new issue.我有 babel-core 的原始问题,所以我更新到 @babel/core 以在编译代码时摆脱 rest 运算符问题,但面临这个新问题。 Any advice would be great.
任何建议都会很棒。 Thank you
谢谢
According to the documentation here , loadStripe
returns a promise that you must wait to resolve.根据此处的文档,
loadStripe
返回一个您必须等待解决的承诺。
Try something like尝试类似的东西
import { loadStripe } from "@stripe/stripe-js"
const stripeInit = loadStripe('MY-KEY') // returns a promise
and when you want to use stripe当你想使用条纹时
methods: {
//This function sends us to the stripe checkout
payStripe() {
// wait for the promise to resolve first
stripeInit.then(stripe => {
stripe.redirectToCheckout({
sessionId: this.sessionId
}).then(function(result) {
console.log(result);
}).catch(function(error) {
console.error(error);
});
})
}
}
Using Laravel Homestead as a vm, I turned ssl: true
in Homestead.yaml, and entered https://site.test
manually in the URL. I didn't get a valid https certificate, but the vue-stripe components load and it works使用 Laravel Homestead 作为虚拟机,我在 Homestead.yaml
ssl: true
为 true,然后在 URL 中手动输入https://site.test
。我没有获得有效的 https 证书,但没有获得有效的 https 组件作品
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.