Uncaught IntegrationError: Please call Stripe() with your publishable key. You used an empty string

Question

Stripe was working fine with my Laravel application, and suddenly it started giving me this error in the console: Uncaught IntegrationError: Please call Stripe() with your publishable key. You used an empty string.

View

@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

The .env file has the correct keys. Someone please help me figure this out, it was working perfectly fine until now. I ran the following commands along with restarting the server multiple times:

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

Answer 1

Since this line:

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

is not getting the Stripe key from .env. You need to clear your cache.

Run following commands:

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

If that does not work I would try to create a hidden input with your key inside:

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

And access the value like this:

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

There is also a way to require a .dotenv extension in your webpack mix file.

With that you can directly access the key using javascript.