Stripe subscription on user registration

I worked now through the "Subscriptions with card payments" https://stripe.com/docs/billing/subscriptions/overview but I always get the exception This customer has no attached payment source or default payment method.

My Form and my Backend Code

\Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));

        // This creates a new Customer and attaches the default PaymentMethod in one API call.
        $customer = \Stripe\Customer::create([
          'payment_method' => $request->stripeToken,
          'email' => '[email protected]',
          'invoice_settings' => [
            'default_payment_method' => $request->stripeToken
          ]
        ]);

        auth()->user()->newSubscription('primary',$request->plan)->create($request->stripeToken);

<form id="subscription-form" action="{{ url('settings/subscription') }}" method="post" >
        @csrf
        <select name="plan">
          <option value="small">Small 9,90EUR</option>
        </select>
        <div id="card-element" class="MyCardElement">
          <!-- Elements will create input elements here -->
        </div>

        <!-- We'll put the error messages in this element -->
        <div id="card-errors" role="alert"></div>
        <button type="submit">Subscribe</button>
      </form>

The js is copied from the tutorial so I think its not necessary to post it here.

Maybe someone knows whats wrong with my code

Deleted the code and started from scratch now, but no chance to make things work. Now I did it like in the laravel docs described

I have to say I dont try to do it on user registration I only try to get this somehow to work.

View

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <form id="subscription-form" action="{{ url('settings/subscription') }}" method="post" >
        @csrf
        <input type="hidden" name="plan" value="small">
        <input id="card-holder-name" type="text">

        <!-- Stripe Elements Placeholder -->
        <div id="card-element"></div>

        <button id="card-button" data-secret="{{ $intent->client_secret }}">
            Update Payment Method
        </button>
      </form>
    </div>
  </div>
</div>

Controller

/**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $user = auth()->user();

        return view('auth.subscription.create', ['intent' => $user->createSetupIntent()]);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $paymentMethod = $request->paymentMethod;
        dd($paymentMethod);
        auth()->user()->newSubscription('primary', $request->plan)->create($paymentMethod);
    }

Js

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

  <script>
    const stripe = Stripe("env('STRIPE_KEY')");

    const elements = stripe.elements();
    const cardElement = elements.create('card');

    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) => {
        const { setupIntent, error } = await stripe.confirmCardSetup(
            clientSecret, {
                payment_method: {
                    card: cardElement,
                    billing_details: { name: cardHolderName.value }
                }
            }
        );

        if (error) {
            // Display "error.message" to the user...
        } else {
            // The card has been verified successfully...
        }
    });
  </script>

Hope someone has an Idea how to do this.