Uncaught Error: You did not set a valid publishable key. Call Stripe.setPublishableKey() with your publishable key. all things are well config - laravel

Question

.env file
STRIPE_KEY = pk_test_123...
STRIPE_SECRET = sk_test_123...
Stripe Form Code
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
$(function () {
var $form = $(".stripe-payment");
$('form.stripe-payment').bind('submit', function (e) {
var $form = $(".stripe-payment"),
inputVal = ['input[type=email]', 'input[type=password]',
'input[type=text]', 'input[type=file]',
'textarea'
].join(', '),
$inputs = $form.find('.required').find(inputVal),
$errorStatus = $form.find('div.error'),
valid = true;
$errorStatus.addClass('hide');
$('.has-error').removeClass('has-error');
$inputs.each(function (i, el) {
var $input = $(el);
if ($input.val() === '') {
$input.parent().addClass('has-error');
$errorStatus.removeClass('hide');
e.preventDefault();
}
});
if (!$form.data('cc-on-file')) {
e.preventDefault();
Stripe.setPublishableKey($form.data('stripe-publishable-key'));
Stripe.createToken({
number: $('.card-num').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeRes);
}
});
function stripeRes(status, response) {
if (response.error) {
$('.error')
.removeClass('hide')
.find('.alert')
.text(response.error.message);
} else {
var token = response['id'];
$form.find('input[type=text]').empty();
$form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
$form.get(0).submit();
}
}
});
</script>
<form role="form" action="{{ route('make-payment') }}" method="post" class="stripe-payment"
data-cc-on-file="false" data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"
id="stripe-payment">
#csrf
<div class='form-row row'>
<div class='col-xs-12 form-group required'>
<label class='control-label'>Name on Card</label> <input class='form-control'
size='4' type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label> <input autocomplete='off'
class='form-control card-num' size='20' type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-xs-12 col-md-4 form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='e.g 595'
size='4' type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Month</label> <input
class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Year</label> <input
class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-md-12 hide error form-group'>
<div class='alert-danger alert'>Fix the errors before you begin.</div>
</div>
</div>
<div class="row">
<button class="btn btn-success btn-lg btn-block" type="submit">Pay</button>
</div>
</form>
Error when submit the form
(index):3 Uncaught Error: You did not set a valid publishable key.
Call Stripe.setPublishableKey() with your publishable key. For more
info, see https://stripe.com/docs/stripe.js
at Function.b.validateKey ((index):3)
at Function.b.create ((index):2)
at Function.c.createToken ((index):2)
at HTMLFormElement. ((index):103)
at HTMLFormElement.dispatch (jquery-3.5.1.slim.min.js:2)
at HTMLFormElement.v.handle (jquery-3.5.1.slim.min.js:2)

Answer 1

Stripe.js should be initialized with your publishable key:
var stripe = Stripe('pk_test_123');
Additionally, you should not be collecting card details in your own form inputs, as it has PCI compliance implications. Instead, you should use Stripe Elements to securely collect this. Stripe's payment guide details how to implement this.