我无法在Laravel中使用条纹元素

Question

I am building a subscription application with Laravel and I am trying to use Stripe Elements but I can't seem to get it to work.

here is my form

<form method="POST" action="/subscribe" id="payment-form">
    {{ csrf_field() }}

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="col-md-8 order-md-1">
        <h4 class="mb-3">User Info</h4>

        <div class="mb-3">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="Your Name" required>
        </div>

        <div class="mb-3">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="you@example.com" required>
        </div>

        <div class="mb-3">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" name="password" required>
        </div>

        <div class="mb-3">
            <label for="password-confirm">Confirm Password</label>
            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
        </div>

        <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 Element errors. -->
            <div id="card-errors" role="alert"></div>
        </div>

        <hr class="mb-4">

        <div class="form-group">
            <button class="btn btn-outline-primary btn-lg btn-block" type="submit">Join Now</button>
        </div>

    </div>
</form>

I have followed stripe documentation and copied and pasted most of it.

Here are my scripts at the end of my page

<script src="https://js.stripe.com/v3/"></script>
<script>
    var stripe = Stripe('my_api_code');
    var elements = stripe.elements();
</script>
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/subscribe.js') }}" defer></script>

Here is my subscribe.js file

// Custom styling can be passed to options when creating an Element.
var style = {
    base: {
        // Add your base input styles here. For example:
        fontSize: '16px',
        color: "#32325d",
    }
};

// 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');

card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
});

// Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
    event.preventDefault();

    stripe.createToken(card).then(function(result) {
        if (result.error) {
            // Inform the customer that 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);
        }
    });
});

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();
}

Any help would be greatly appreciated! Thank you!

Answer 1

I ran into this issue as well. It was fixed by adding <div class="form-group"> after the <div class="form-row"> .

<div class="form-row">
    <div class="form-group"> <!-- Added -->

         <label for="card-element">
         Credit or debit card
         </label>

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

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

    </div> <!-- Added -->
</div>