Laravel app.js 阻止 Stripe 支付表单显示答案

【问题标题】：Laravel app.js stops Stripe payment form from showingLaravel app.js 阻止 Stripe 支付表单显示
【发布时间】：2018-04-02 14:22:43
【问题描述】：

我正在尝试通过 Stripe 接受付款。我从Stripe documentation 获得代码并将其添加到视图中。当我单击按钮时，它不显示表单，而是转到表单操作页面（付款）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="9HgWQfTsUXQ0RmIPQPLbhNoujOobjHn5PL9en8jx">

    <title>Staff</title>

    <!-- Styles -->
    <link href="https://localhost/staff/public/css/app.css" rel="stylesheet">
    <link href="https://localhost/staff/public/css/style.css" rel="stylesheet">
</head>
<body>
    <div id="app">



        <form action="payments/" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_xxx"
    data-amount="999"
    data-name="Demo Site"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto">
  </script>
</form>
    </div>

    <!-- Scripts -->
    <script src="https://localhost/staff/public/js/app.js"></script>
</body>
</html>

我把所有东西都去掉了，只剩下一个按钮，但仍然没有用。最后一件事要删除.....

<script src="https://localhost/staff/public/js/app.js"></script>

这就是表单无法显示的原因......

所以我的问题是：为什么这会导致 Stripe 无法显示表单，我该怎么做才能解决它？我只是忘记正确设置了吗？我是 Laravel 的新手，这是我第一个使用该框架的项目，我的安装非常接近原版，因为我刚刚开始......

我跑了composer require "laravel/cashier":"~7.0"，然后将服务提供者添加到config/app.php：

'providers' => [
    ...
    Laravel\Cashier\CashierServiceProvider::class,
],

然后迁移数据库。

这是我的一些文件...

web.php:

...
Route::post('/payments', 'PaymentsController@subscribe')->name('payments');
Route::get('/payments', 'PaymentsController@index')->name('payments');

PaymentsController.php：

<?php

namespace Staff\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;

class PaymentsController extends Controller
{

    //private $states;

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    public function index() {
        return view('payments/payment');
    }

    public function subscribe() {
        echo "huhh";

    }
}

payment.blade.php：

@extends('layouts.app')

@section('content')
<form action="" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_fCM9Fr1e33JYW6t17ZoSyXRf"
    data-amount="999"
    data-name="Demo Site"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto">
  </script>
</form>
@endsection

services.php：

<?php

return [

    ...

    'stripe' => [
        'model' => Staff\User::class,
        'key' => env('pk_test_xxx'),
        'secret' => env('sk_test_zzz'),
    ],

];

【问题讨论】：

标签： php laravel laravel-cashier

【解决方案1】：

发现问题。这是注销表格。如果我删除它，条纹形式就可以工作。

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">{{ csrf_field() }}</form>

所以，这意味着这两种形式是冲突的。我在 Stripe 表单中添加了一个名称stripe-form，并更新了 javascript

document.querySelector("form[name='stripe-form']").addEventListener('submit', function(e) {
   e.preventDefault();
   var form = document.querySelector("form[name='stripe-form']");
   var extraDetails = {
     name: form.querySelector('input[name=cardholder-name]').value,
   };
   stripe.createToken(card, extraDetails).then(setOutcome);
 });

【讨论】：

似乎只需在 Stripe 表单中添加一个名称就足够了。
我遇到了同样的问题，但是为表单命名并使用您提供的脚本仍然无法为我的应用程序提供帮助。我暂时从包含 Stripe 按钮的路由中删除了 app.js。有没有别的解决办法？
同样的问题..不知道如何解决这个问题