Uncaught IntegrationError: Please Call Stripe() With Your Publishable Key. You Used An Empty String

- 1 answer

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.



<script src=""></script>

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

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

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

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

                    <button id="card-button" data-secret="{{ $intent->client_secret }}">

<!-- Scripts -->
    window.addEventListener('load', function() {
        const stripe = Stripe('{{env('STRIPE_KEY')}}');
        const elements = stripe.elements();
        const cardElement = elements.create('card');
        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);

                    payment_method: setupIntent.payment_method,
                    plan : plan

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


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.