我使用 vue 作为 CDN,因为应用程序非常简单。 此时当我添加代码时
<div id="app">
<!-- some code here -->
<form action="/charge" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= stripePublishableKey %>"
data-amount="2500"
data-name="ec-system payment"
data-description="You will pay this money for something!"
data-locale="auto">
</script>
</form>
</div>
这段代码给了我类似下面的错误。
模板应该只负责将状态映射到 UI。 避免在模板中放置具有副作用的标签,例如 ,因为它们不会被解析
我发现了一些像“vue-stripe”这样的 npm 库,但是当我使用 vue 和 cdn 而不是 vue-cli 时,我不知道如何使用这个库。
在 vue 中,您不能在模板内使用 script 标签。 在你的情况下,你可以使用这个名为“vue-stripe-checkout”的库。 该库以两种方式支持
- NPM 或纱线
npm 安装 vue-stripe-checkout --save
yarn 添加 vue-stripe-checkout
- CDN
https://unpkg.com/vue-stripe-checkout/build/vue-stripe-checkout.js
您可以使用第二种方法,将 cdn 包含到您的应用程序中。 请参阅此vue-stripe-checkout了解详细信息。
是的,你可以。首先将所有的 stripe.js 脚本加入队列,然后创建一个与此类似的组件:
const VueStripe = {
props: ['pm_id', 'public_key', 'settings'],
template: '#stripe-template',
data: () => ({
stripe: null,
card: null,
stripe_error: '',
}),
mounted() {
try {
this.stripe = Stripe(this.public_key);
this.init();
} catch (exceptionVar) {
console.log(exceptionVar)
}
},
watch: {
card: {
handler(newVal, oldVal) {
if (newVal.error) {
this.stripe_error = newVal.error.message;
} else {
this.stripe_error = '';
}
}
}
},
methods: {
init() {
// Create an instance of Elements
var elements = this.stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: this.settings.conf_backend_dark_mode ? '#fff' : '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
this.card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
this.card.mount('#card-element');
},
payNow() {
this.stripe.createToken(this.card).then((result) => {
if (result.error) {
this.stripe_error = result.error.message;
} else {
this.stripeTokenHandler(result.token);
}
});
},
stripeTokenHandler(token) {
console.log('Token received:', token);
// You can now send the token to your server for processing payment
}
}
};
.v-stripe-input .v-field__input > input[type="text"] {
display: none;
}
<template id="stripe-template">
<v-text-field label="Input credit card details"
:density="settings.conf_backend_inputs_density"
:variant="settings.conf_backend_inputs_variant"
dirty
class="v-stripe-input mb-2"
:error="stripe_error !== ''"
:error-messages="stripe_error"
>
<template #default>
<div id="card-element" class="d-block" style="width: 100%"></div>
</template>
</v-text-field>
<v-btn @click="payNow()"
:density="settings.conf_backend_buttons_density"
:variant="settings.conf_backend_buttons_variant"
>Pay Now
</v-btn>
</template>
然后将包含所有这些的文件包含在您的主文件中,最后将其作为全局组件添加到您的应用程序中,例如,执行以下操作: app.component('vue-stripe', VueStripe);
对我有用,希望对任何人都有帮助!