LaravelでStripeのカード番号を入力できない

Question

LaravelでつくったCRUDアプリにStripeでサブスクリプションを導入したいのですが、決済の画面でカード情報を入力できず、困っています。

↑のように、カードエレメントを入力する場所で入力ができない状態です。
もし同じようなケースを改善した方、原因が推測できる方がいらっしゃれば、お力を貸していただけないでしょうか。よろしくお願いいたします。下にコードを提示いたします。

<form action="{{route('stripe.afterpay')}}" method="post" id="payment-form">
  @csrf
  
    <label for="exampleInputEmail1">お名前</label>
    <input type="test" class="form-control col-sm-5" id="card-holder-name" required>
 
    <label for="exampleInputPassword1">カード番号</label>
    <div class="form-group MyCardElement col-sm-5" id="card-element"></div>
 
    <div id="card-errors" role="alert" style='color:red'></div>
 
    <button class="btn btn-primary" id="card-button" data-secret="{{ $intent->client_secret }}">送信する</button>
 
</form>
</div>

<script>
 
	// HTMLの読み込み完了後に実行するようにする
	window.onload = my_init;
	function my_init() {
 
		// Configに設定したStripeのAPIキーを読み込む  
		const stripe = Stripe("{{ config('services.stripe.pb_key') }}");
		const elements = stripe.elements();
		
		const cardElement = elements.create('card', {style: style, hidePostalCode: true});
		cardElement.mount('#card-element');
 
		const cardHolderName = document.getElementById('card-holder-name');
		const cardButton = document.getElementById('card-button');
		const clientSecret = cardButton.dataset.secret;
 
		cardButton.addEventListener('click', async (e) => {
			// formのsubmitボタンのデフォルト動作を無効にする
			e.preventDefault();
			const { setupIntent, error } = await stripe.confirmCardSetup(
				clientSecret, {
					payment_method: {
					card: cardElement,
					billing_details: { name: cardHolderName.value }
					}
				}
			);
			
			if (error) {
			// エラー処理
			console.log('error');
			
			} else {
			// 問題なければ、stripePaymentHandlerへ
			stripePaymentHandler(setupIntent);
			}
		});
	}
	
		function stripePaymentHandler(setupIntent) {
		var form = document.getElementById('payment-form');
		var hiddenInput = document.createElement('input');
		hiddenInput.setAttribute('type', 'hidden');
		hiddenInput.setAttribute('name', 'stripePaymentMethod');
		hiddenInput.setAttribute('value', setupIntent.payment_method);
		form.appendChild(hiddenInput);
		// フォームを送信
		form.submit();
		}
</script>

---

StripeController.php

<?php

namespace App\Http\Controllers;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;
use Laravel\Cashier\Cashier;
use Stripe\Stripe;
use Stripe\Charge;
use App\Models\User;

class StripeController extends Controller
{
    public function subscription(Request $request){
        $user=Auth::user();
          return view('story.subscription',  [
            'intent' => $user->createSetupIntent()
        ]);
      }


  

      public function afterpay(Request $request){
        // ログインユーザーを$userとする
        $user=Auth::user();
 
        // またStripe顧客でなければ、新規顧客にする
        $stripeCustomer = $user->createOrGetStripeCustomer();
 
        // フォーム送信の情報から$paymentMethodを作成する
        $paymentMethod=$request->input('stripePaymentMethod');
 
        // プランはconfigに設定したbasic_plan_idとする
        $plan=config('services.stripe.basic_plan_id');
        
        // 上記のプランと支払方法で、サブスクを新規作成する
        $user->newSubscription('default', $plan)
        ->create($paymentMethod);
 
        // 処理後に'ルート設定'にページ移行
        return back();
      }
}

---

追記等ありましたら遠慮なくおっしゃってください。よろしくお願いいたします。