Laravel-Stripe.js不显示卡输入

Question

我是付款方面的新手。我有几个月的时间。我把代码像文档一样放置，但是，卡的输入没有出现...我检查了html，css甚至JS，似乎没有任何问题。

请帮助我。

使用Laravel 5.6 条纹v3

这是HTML表单：

<form action="{{ route('checkout') }}" method="post" id="checkout-form">
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <div class="form-group">
                        <input type="text" name="first_name" class="form-control StripeElement StripeElement--empty" placeholder="Name">
                    </div>
                </div>
                <div class="col-xs-12 col-md-6">
                    <div class="form-group">
                        <input type="text" name="last_name" class="form-control StripeElement StripeElement--empty" placeholder="Last Name">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <input type="email" name="email" class="form-control StripeElement StripeElement--empty" placeholder="Email Address">
            </div>
            <div class="form-row">

                <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 class="btn btn-primary">Submit Payment</button>
            {{ csrf_field() }}
        </form>

这是JS代码：

var stripe = Stripe('sk_test_XXX');


var elements = stripe.elements();

var style = {
    base: {
        color: '#32325d',
        lineHeight: '18px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
        color: '#aab7c4'
   }
  },
  invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
  }
};

var card = elements.create('card', {style: style});


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 = '';
    }
});


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

stripe.createToken(card).then(function(result) {
    if (result.error) {
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
    } else {
        stripeTokenHandler(result.token);
    }
  });
});

function stripeTokenHandler(token) {
    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);

    form.submit();
   }

还有我的php代码（以防万一）：

public function postCheckout(Request $request) {
    if(!Session::has('cart')) {
        return redirect()->route('shop.shoopingCart');
    }
    $oldCart = Session::get('cart');
    $cart = new Cart($oldCart);
    Stripe::setApiKey('sk_test_XXXX');
    try {
        // $token = $_POST['stripeToken'];
        $charge = Charge::create(array(
           "amount" => $cart->totalPrice * 100,
           "currency" => "usd",
           "source" => $request->input('stripeToken'), // obtained with Stripe.js
        //    "source" => $token,
           "description" => "Test Charge"
        ));
        $order = new Order();
        $order->cart = serialize($cart);
        $order->address = $request->input('address');
        $order->name = $request->input('name');
        $order->payment_id = $charge->id;
        Auth::user()->orders()->save($order);
    }
    catch(\Exception $e) {
        return redirect()->route('checkout')->with('error', $e->getMessage());
    }
    Session::forget('cart');
    return redirect()->route('product.index')->with('success', 'Successfully purchased products!');
}