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

Gunpowder

Show us your Stripe configuration, the error tells you clearly you have an empty string, we need for information. – Stratopause

I added the blade file. Let me know if you need any other code. – Gunpowder

Can you log const stripe = Stripe('{{env('STRIPE_KEY')}}'); and tell me if there is actually a proper result, your actual key (don't post your key here...)? – Stratopause

I looked in the console and it shows this: const stripe = Stripe(''); It is not fetching data from env. file. However, it was before. – Gunpowder

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.

Stratopause

As you posted this answer, I also figured it out. I ran php artisan config:clear and it worked. For some reason, I was running php artisan config:clear, and THEN php artisan config:cache. Possibly because I was running php artisan config:cache after was causing the error?? Thank you so much for helping me, I was super upset because I just got this working and then it suddenly stopped working and I had no idea what I did wrong – Gunpowder

@JakeScervino glad to here I had a similiar mistake a couple weeks ago, now I know that one really has to clear the .env file since it always caches the key in it. – Stratopause

You are the best – Gunpowder

Answer 2

Rule of thumb:

Never ever use env directly in the code

So instead of env(SOME_VAR) it should always be config('some_var') otherwise when you run php artisan config:cache on production it will never be read.

Spina

Answer 3

the error is occured from javascript code :

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

STRIPE_KEY is found empty ''

Pulsatory

Yes, but it is not empty. The correct API keys are in my .env file. I ran config:clear and restarted server multiple times. It was working perfectly fine and now its not fetching the data from my .env. – Gunpowder

Yes I did. Thank you for you help as well. – Gunpowder