Question

我已将文档中必要的Stripe代码复制并粘贴到我的Laravel应用程序中的checkout.blade.php中。

@section('content')
<!-- Stripe elements -->
            <form action="/charge" method="post" id="payment-form">
                <div class="form-row">
                  <label for="card-element">
                    Credit or debit card
                  </label>
                  <div id="card-element">
                    <!-- A Stripe Element will be inserted here. -->

                  </div>

                  <!-- Used to display form errors. -->
                  <div id="card-errors" role="alert"></div>
                </div>

                <button>Submit Payment</button>
            </form>
            <!-- end Stripe elements -->
@endsection

@section('stripe')
    <script>
        (function(){
        // Create a Stripe client.
        var stripe = Stripe('blablabla');

        // Create an instance of Elements.
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
            color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
        };

        // Create an instance of the card Element.
        var card = elements.create('card', {style: style});

        // Add an instance of the card Element into the `card-element` <div>.
        card.mount('#card-element');

        // Handle real-time validation errors from the card Element.
        card.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
        });

        // Handle form submission.
        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
        event.preventDefault();

        stripe.createToken(card).then(function(result) {
            if (result.error) {
            // Inform the user if there was an error.
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
            } else {
            // Send the token to your server.
            stripeTokenHandler(result.token);
            }
        });
        });

        // Submit the form with the token ID.
        function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
        }
                })();
    </script>
@endsection

标签和按钮显示在屏幕上，但是由于某些原因，实际的信用卡输入字段将不会显示。

card.mount('#card-element');


<div id="card-element">
<!-- A Stripe Element will be inserted here. -->              
</div>

是否应该使用上面的代码自动安装它？

阅读文档后，我认为应该将UI组件包含在代码中并显示所有内容。

我想念什么？

Answer 1

在您的html中包含Stripe js

<script src="https://js.stripe.com/v3/"></script>

Laravel：Stripe集成不会显示信用卡字段

1 个答案: