6

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
4
  • Show us your Stripe configuration, the error tells you clearly you have an empty string, we need for information.
    – utdev
    Commented Jan 29, 2020 at 19:06
  • I added the blade file. Let me know if you need any other code. Commented Jan 29, 2020 at 19:10
  • 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...)?
    – utdev
    Commented Jan 29, 2020 at 19:16
  • I looked in the console and it shows this: const stripe = Stripe(''); It is not fetching data from env. file. However, it was before. Commented Jan 29, 2020 at 19:17

3 Answers 3

15

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.

3
  • 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 Commented Jan 29, 2020 at 19:23
  • 1
    @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.
    – utdev
    Commented Jan 29, 2020 at 19:25
  • You are the best Commented Jan 29, 2020 at 19:27
1

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.

0

the error is occured from javascript code :

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

STRIPE_KEY is found empty ''

2
  • 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. Commented Jan 29, 2020 at 19:15
  • Yes I did. Thank you for you help as well. Commented Jan 29, 2020 at 19:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.