未捕获的错误：您没有设置有效的可发布密钥。使用您的可发布密钥调用 Stripe.setPublishableKey()。一切都很好配置答案

【问题标题】：Uncaught Error: You did not set a valid publishable key. Call Stripe.setPublishableKey() with your publishable key. all things are well config未捕获的错误：您没有设置有效的可发布密钥。使用您的可发布密钥调用 Stripe.setPublishableKey()。一切都很好配置
【发布时间】：2021-09-22 19:12:19
【问题描述】：

.env 文件

STRIPE_KEY = pk_test_123...
STRIPE_SECRET = sk_test_123...

条带格式代码

<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>

提交表单时出错

(index):3 未捕获的错误：您没有设置有效的可发布密钥。使用您的可发布密钥调用 Stripe.setPublishableKey()。更多信息，请参阅https://stripe.com/docs/stripe.js 在 Function.b.validateKey ((index):3) 在 Function.b.create ((index):2) 在 Function.c.createToken ((index):2) 在 HTMLFormElement。（（指数）：103）在 HTMLFormElement.dispatch (jquery-3.5.1.slim.min.js:2) 在 HTMLFormElement.v.handle (jquery-3.5.1.slim.min.js:2)

【问题讨论】：

标签： laravel stripe-payments

【解决方案1】：

Stripe.js 应该是 initialized 和您的可发布密钥：

var stripe = Stripe('pk_test_123');

此外，您不应在自己的表单输入中收集卡片详细信息，因为它具有PCI compliance 含义。相反，您应该使用Stripe Elements 来安全地收集它。 Stripe 的payment guide 详细说明了如何实现这一点。

【讨论】：