通过cdn在vue应用程序中进行条带支付

Question

我使用 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 时，我不知道如何使用这个库。

Answer 1

在 vue 中，您不能在模板内使用 script 标签。 在你的情况下，你可以使用这个名为“vue-stripe-checkout”的库。 该库以两种方式支持

1. NPM 或纱线

npm 安装 vue-stripe-checkout --save

yarn 添加 vue-stripe-checkout

2. CDN

https://unpkg.com/vue-stripe-checkout/build/vue-stripe-checkout.js

您可以使用第二种方法，将 cdn 包含到您的应用程序中。 请参阅此vue-stripe-checkout了解详细信息。

Answer 2

是的，你可以。首先将所有的 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);

对我有用，希望对任何人都有帮助！