Uncaught IntegrationError: Пожалуйста, вызовите Stripe () со своим публикуемым ключом. Вы использовали пустую строку

Question

Stripe работал нормально с моим Laravel приложением, и внезапно он начал выдавать мне эту ошибку в консоли: Uncaught IntegrationError: Пожалуйста, вызовите Stripe () с вашим публикуемым ключом. Вы использовали пустую строку.

Просмотр

@extends('layouts.app')

@section('head-scripts')
<script src="https://js.stripe.com/v3/"></script>
@endsection

@section('content')
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Subscribe</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <select name="plan" class="form-control" id="subscription-plan">
                        @foreach($plans as $key=>$plan)
                            <option value="{{$key}}">{{$plan}}</option>
                        @endforeach
                    </select>

                    <input id="card-holder-name" type="text">

                    <!-- Stripe Elements Placeholder -->
                    <div id="card-element"></div>

                    <button id="card-button" data-secret="{{ $intent->client_secret }}">
                        Pay
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- Scripts -->
<script>
    window.addEventListener('load', function() {
        const stripe = Stripe('{{env('STRIPE_KEY')}}');
        const elements = stripe.elements();
        const cardElement = elements.create('card');
        cardElement.mount('#card-element');
        const cardHolderName = document.getElementById('card-holder-name');
        const cardButton = document.getElementById('card-button');
        const clientSecret = cardButton.dataset.secret;
        const plan = document.getElementById('subscription-plan').value;

        cardButton.addEventListener('click', async (e) => {
            const { setupIntent, error } = await stripe.handleCardSetup(
                clientSecret, cardElement, {
                    payment_method_data: {
                        billing_details: { name: cardHolderName.value }
                    }
                }
            );
            if (error) {
                // Display "error.message" to the user...
            } else {
                // The card has been verified successfully...
                console.log('handling success', setupIntent.payment_method);

                axios.post('/subscribe',{
                    payment_method: setupIntent.payment_method,
                    plan : plan
                }).then((data)=>{
                    location.replace(data.data.success_url)
                });
            }
        });
    });
</script>
@endsection

Файл .env имеет правильные ключи. Кто-нибудь, пожалуйста, помогите мне разобраться в этом, до сих пор он работал отлично. Я выполнил следующие команды вместе с перезагрузкой сервера несколько раз:

php artisan config:clear
php artisan cache:clear
composer dump-autoload
php artisan view:clear
php artisan route:clear

Answer 1

С этой строки:

const stripe = Stripe('{{env('STRIPE_KEY')}}');

не получает ключ Stripe от .env. Вам необходимо очистить кеш.

Запустите следующие команды:

php artisan cache:clear
php artisan config:clear
php artisan view:clear

Если это не сработает, я попытаюсь создать скрытый ввод с вашим ключом внутри:

<input type="hidden" id="stripe_key" value="{{ env('STRIPE_KEY) }}"/>

И получите доступ к значению, как это:

const stripeKey = document.getElementById('stripe_key').value;

Существует также способ требовать расширения .dotenv в вашем файле микса веб-пакета.

С этим вы можете получить прямой доступ к ключу используя javascript.

Answer 2

Правило большого пальца:

Никогда не используйте env непосредственно в коде

Так что вместо env(SOME_VAR) всегда должно быть config('some_var') в противном случае при запуске php artisan config:cache на производстве никогда не будет прочитано.

Answer 3

ошибка произошла из javascript кода:

 const stripe = Stripe('{{env('STRIPE_KEY')}}');

STRIPE_KEY найден пустым ''