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
Jake Scervino
  • 581
  • 4
  • 9
  • 26
  • Show us your Stripe configuration, the error tells you clearly you have an empty string, we need for information. – utdev Jan 29 '20 at 19:06
  • I added the blade file. Let me know if you need any other code. – Jake Scervino Jan 29 '20 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 Jan 29 '20 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. – Jake Scervino Jan 29 '20 at 19:17

3 Answers3

13

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.

utdev
  • 3,942
  • 8
  • 40
  • 70
  • 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 – Jake Scervino Jan 29 '20 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 Jan 29 '20 at 19:25
  • You are the best – Jake Scervino Jan 29 '20 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.

Abhishek
  • 3,900
  • 21
  • 42
0

the error is occured from javascript code :

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

STRIPE_KEY is found empty ''

Saurabh Mistry
  • 12,833
  • 5
  • 50
  • 71
  • 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. – Jake Scervino Jan 29 '20 at 19:15
  • Yes I did. Thank you for you help as well. – Jake Scervino Jan 29 '20 at 19:37