Полоса не вызывается - PullRequest
Новая
       10

Полоса не вызывается

3 голосов
/ 06 октября 2019

Я пытаюсь использовать Vue.js для моего внешнего интерфейса, чтобы вызвать Stripe и создать токен, который затем отправляется на мой бэкэнд. Я протестировал все, используя простой HTML / JS, и все работает нормально, моя проблема заключается в попытке использовать Vue.js. Я думаю, что моя проблема может заключаться в том, как я связываю открытый ключ чередования. Ниже приведен мой код, и у меня нулевой вывод, о котором я говорю, я просто перенаправлен на ту же страницу, но с ? в конце URL. Ничего другого, консоль ничего не показывает и никаких сообщений об ошибках или что-либо отправить на мой сервер.

код шаблона

Существует больше, но не связано 

<div class="col-md-8">
    <card class='stripe-card col-md-8'
        :class='{ complete }'
        :stripe='stripeKey'
        :options='stripeOptions'
        @change='complete = $event.complete'
    />
    <button class='pay-with-stripe' @click='pay' :disabled='!complete'>Submit Payment Details</button>
   <br>
</div>

секция сценария с добавленным релятивом 

import { Card, createToken } from 'vue-stripe-elements-plus'
import axios from 'axios';

export default {
    components: { Card },
    data() {
        return {
            errorMessage: null,
            successMessage: null,
            complete: false,
            stripeKey: process.env.VUE_APP_STRIPE_PUB_KEY,
            stripeOptions: {
                // see https://stripe.com/docs/stripe.js#element-options for details
                hidePostalCode: true
            },
            current: {
                stripe: {
                    plan: null,
                    last4: null
                }
            },
        }
    },
    methods: {
        pay () {
            createToken().then(result =>  {
                axios.post('/billing/updateCard', {
                token: result.token,
                })
                .then(res => {
                if(res.data.success == true) {
                    this.successMessage = res.data.message
                    console.log(res.data.message)
                }
                if(res.data.success == false) {
                    this.errorMessage = res.data.message // Display error message from server if an error exists
                }
                })
                .catch((err) => {
                if(err) console.log(err)
                if(err) this.$router.push('/company/settings?success=false')
                })
            }); 
        }
    }
}
</script>

Я проверил, что ключ API действительно находится в значении данных, выполнив <p>{{ stripeKey }}</p> и увидев, как это значение отображается. Так что да, ключ есть, и ключ действителен (проверено копирование / вставка в мой тест HTML / JS)

1 Ответ

0 голосов
/ 07 октября 2019 
created(){
   this.key=process.env.VUE_APP_STRIPE_KEY;
}

попробуйте, я использовал этот фрагмент кода в своем проекте, и он сработал ... возможно, проблема в том, что ваш ключ еще не инициализирован, когда карта нам предоставила idk. может быть, ключ не проблема вообще. попробуйте это и дайте мне знать, если работает, и мы будем отлаживать это вместе.

...