Stripe Cashier表单未提交

Question

我有条纹收银员的问题;我得到

  

此客户没有附加付款来源

我不知道为什么，希望有人可以帮助我...非常感谢提前。

我试着看了很多教程，但我无法取得任何好成绩。

也许这是令牌的问题？我试图进入信用卡测试：

4242 4242 4242 4242

我想将它用作订阅。

这是我的观点

<div class="container">
           <div class="row">
               <script src="https://js.stripe.com/v3/"></script>

               <form action="{{route('checkout')}}" method="post" id="payment-form">
                   {{csrf_field()}}
                   <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>
                </div>
           </div>
       </div>

<script>

    // Create a Stripe client
    var stripe = Stripe('.....');

    // 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',
            lineHeight: '18px',
            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);
            }
        });
    });
</script>

这是我的结帐控制器：

public function checkout(Request $request)
    {
        try {
            Stripe::setApiKey('.....');

            $user = User::find(1);
            $user->newSubscription('main', 'monthly')->create($request->stripeToken);

            return 'Subscription successful, you get the course!';
        } catch (\Exception $ex) {
            return $ex->getMessage();
        }

    }