Полоса с Vue. js

Question

Я пытаюсь заставить Stripe работать с Vue, но у меня возникают некоторые трудности.

Итак, я импортирую его в заголовок моего html файла:

<!--  STRIPE  -->
<script src="https://js.stripe.com/v3/"></script>

После нажатия кнопки я запускаю:

const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxx');

stripe.redirectToCheckout({
    items: [{sku: 'sku_xxxxx', quantity: 1}],

    successUrl: 'http://localhost:5000/success',
    cancelUrl: 'http://localhost:5000/canceled',
})

Но я получаю, что полоса не определена.

Я также пробовал импортировать его из npm, например из Node.

import Stripe from 'stripe'

const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxx');

stripe.redirectToCheckout({
    items: [{sku: 'sku_xxxxx', quantity: 1}],

    successUrl: 'http://localhost:5000/success',
    cancelUrl: 'http://localhost:5000/canceled',
})

Я не получаю Stripe is not defined, но получаю TypeError: stripe.redirectToCheckout is not a function

Answer 1

У меня была такая же проблема.

Если вы включаете srcipt не в html, а в свой vue компонент.

<script src="https://js.stripe.com/v3/"></script>
<script>
    export default {
        name: 'Stripe',
        data() {

        }
    }