Нельзя использовать Stripe с nuxt и машинописью - PullRequest
Новая
       41

Нельзя использовать Stripe с nuxt и машинописью

0 голосов
/ 21 января 2020

У меня проблема, я пытаюсь реализовать Stripe на моем проекте с надписью nuxt / typcript, я также использую vue -property-decorator.

Вот моя голова в nuxt.config. js

head: {
        title: process.env.npm_package_name || '',
        meta: [
            {charset: 'utf-8'},
            {name: 'viewport', content: 'width=device-width, initial-scale=1'},
            {hid: 'description', name: 'description', content: process.env.npm_package_description || ''}
        ],
        script: [{
            src: "https://js.stripe.com/v3/",
            type: "text/javascript"}],
        link: [
            {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
        ]
    },

Мой компонент: 


<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";
    import {Subscription} from "~/models/Subscription";

    @Component({
        components: {}
    })
    export default class PaymentForm extends Vue {

        @Prop()
        public subscription: Subscription;

        mounted() {
            let stripe = Stripe(`MY PUBLIC KEY`),
            elements = stripe.elements(),
            card = undefined;
            card = elements.create("card");
            card.mount(this.$refs.card);
        }
    }
</script>

Но я получил эту ошибку 

Cannot find name 'Stripe'. Did you mean 'stripe'?

Так что я не могу построить свой проект, вы можете помочь меня? Я пытался просто написать этот компонент в js, и он работал, но я хотел бы сохранить свои.

Спасибо!

1 Ответ

1 голос
/ 21 января 2020

Свойство Stripe доступно на стороне клиента как window.Stripe после загрузки скрипта SDK. Во время разработки TypeScript не имеет ссылки на глобальную переменную Stripe.

. Один из способов исправить это - создать определения свойства Stripe для глобального window объекта.

Это может быть делается путем создания (или расширения, если существует) определений типов класса Window. В папке определения типов создайте файл global.d.ts (или любой другой) со следующим кодом: 

interface Window {
  Stripe: any;
}

Это расширит класс Window по умолчанию и позволит использовать Stripe без ошибок в вашем коде, например так: 

const stripe = window.Stripe('MY PUBLIC KEY')

Обратите внимание, что это не обеспечит завершение для методов и свойств sdk.

...