未捕获的集成错误：请使用您的可发布密钥调用 Stripe()。你使用了一个空字符串

Question

Stripe 在我的 Laravel 应用程序上运行良好，突然它开始在控制台中给我这个错误：Uncaught IntegrationError: Please call Stripe() with your publishable key。您使用了一个空字符串。

看法

@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')}}');

没有从.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;

还有一种方法可以在 webpack 混合文件中要求 .dotenv 扩展名。

有了它，您可以使用 javascript 直接访问密钥。