title: StripeCheckout is not defined error
body: <p>I'm using stripe but with custom form fields for the user introduce credit card number, card date to charge the card. </p>
  
  <p>But when the "Confirm" button is clicked it appears an error:</p>
  
  <pre><code>Must provide source or customer.
  </code></pre>
  
  <p>This error maybe appears because on the console appears:</p>
  
  <pre><code>"Uncaught ReferenceError: StripeCheckout is not defined"
  </code></pre>
  
  <p>With "            <code>Stripe.setPublishableKey({{config('services.stripe.key')}});</code>
  " before the javascript code it appears:</p>
  
  <pre><code>jquery.min.js:2 Uncaught ReferenceError: pk_test_.... is not defined
          at HTMLDocument.&lt;anonymous&gt;
  </code></pre>
  
  <p>Do you know how to correct the issue?</p>
  
  <p>RegistrationController charge():</p>
  
  <pre><code>public function charge(Request $request)
  {
      Stripe::setApiKey(config('services.stripe.secret'));
      $source = $request-&gt;stripeToken;
      dd($source); //shows null
      Charge::create([
          'currency' =&gt; 'eur',
          'amount' =&gt; 1000,
          'source' =&gt; $source,
      ]);
  }
  </code></pre>
  
  <p>Route:</p>
  
  <pre><code>Route::post('/charge', [
      'uses' =&gt; 'RegistrationController@charge',
      'as'   =&gt; 'registration.charge'
  ]);
  </code></pre>
  
  <p>Form:</p>
  
  <pre><code>&lt;form action="{{ route('registration.charge') }}" method="post" id="paymentForm"&gt;
      {{csrf_field()}}
      &lt;input type="hidden" name="stripeToken" id="stripeToken"/&gt;
      &lt;div class="form-group font-size-sm"&gt;
          &lt;label class="text-gray"&gt;Card Number&lt;/label&gt;
          &lt;input type="text" required class="form-control"&gt;
      &lt;/div&gt;
  
      &lt;div class="form-row"&gt;
          &lt;div class="form-group col-lg-6 font-size-sm"&gt;
              &lt;label class="text-gray"&gt;Date&lt;/label&gt;
              &lt;input type="text" required class="form-control"/&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group font-size-sm col-lg-6"&gt;
              &lt;label class="text-gray"&gt;CVC&lt;/label&gt;
              &lt;input type="text" required class="form-control"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;input type="submit" href="" id="confirmPayment"
       class="btn btn-primary" value="Confirm"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Then I have the javascript to integrate stripe:</p>
  
  <pre><code>&lt;script src="https://js.stripe.com/v3/"&gt;&lt;/script&gt;
  &lt;script&gt;
      let stripe = StripeCheckout.configure({
          key: "{{config('services.stripe.key')}}",
          image: "/square-image.png",
          locale: "auto",
          token: function(token){
              document.querySelector('#stripeToken').value = token.id;
              document.querySelector('#paymentForm').submit();
          }
      });
  
      document.getElementById('#confirmPayment').addEventListener('click', function(e){
          stripe.open({
              amount: 1000
          });
          e.preventDefault();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>If I pass the key directly like:</p>
  
  <p>var stripe = Stripe({{config('pk_....')}});</p>
  
  <p>It shows:</p>
  
  <pre><code>jquery.min.js:2 Uncaught Error: Invalid value for Stripe(): apiKey should be a string. You specified: undefined.
  </code></pre>