LaravelでstripeのJavaScriptがbladeで動かない!! 原因はapp.jsとバッティングしていました。

##はじめに

駆け出しエンジニアです。現在、Laravel５．５でECサイトを作成しています。その際にstripeによる決済機能を追加しているときに苦戦したことを記録していきます。
少しでも皆様の参考になったらと思います。

##やろうとしていること
Laravel5.5ので作成しているECサイトにstripe決済を追加しようとしています。
そのさいに、bladeテンプレートにstripeのcheckoutをJavaScriptで読み込ませようとしています。

##どんな現象が起きたか

カートに入れた商品一覧を表示するviewにstripe決済のJavaScriptを導入するために下記コードを記載しました。

@extends('layouts.app')

@section('content')
<h1>カート一覧ページ</h1>
@if (session('flash_message'))
<p style="color:red;">{{session('flash_message')}}</p>
@endif

@if (empty($user_carts))
<p>カートが空です</p>
@else

<table>
<tr>
<th>商品名</th>
<th>価格</th>
<th>購入数</th>
<th>この商品の合計金額(小計)</th>
<th>カートから削除するボタン</th>
</tr>
@foreach ($user_carts as $user_cart)

<tr>
<td>{{$user_cart['name']}}</td>
<td>{{$user_cart['price']}}円</td>
<td>{{$user_cart['item_count']}}</td>
<td>{{$user_cart['item_total']}}円</td>
<td><a href="{{route('cart.delete', ['id' => $user_cart['id']])}}">商品を削除する</a></td>

</tr>
@endforeach
</table>
<p>全商品の合計金額</p>
<p>{{$total}}円</p>
@endif

@if (empty($select_address))
<p>住所は選択されいません<p>

@else
<h2>選択されている住所</h2>
<table>
<tr>
<th>氏名</th>
<th>郵便コード</th>
<th>都道府県</th>
<th>市区町村</th>
<th>住所</th>
<th>電話番号</th>
</tr>
<tr>
<td>{{$select_address['name']}}</td>
<td>{{$select_address['postal_code']}}</td>
<td>{{$select_address['prefectures']}}</td>
<td>{{$select_address['municipality']}}</td>
<td>{{$select_address['address']}}</td>
<td>{{$select_address['phone_number']}}</td>
</tr>
</table>
@endif

@if (!empty($user_carts) && !empty($select_address) && $total > 50)
<p style="color:red;">合計金額{{$total}}円。下記ボタンを押すと購入することができます.</p>
<div class="content">
<form action="{{ route('cart.charge') }}" method="POST">
{{ csrf_field() }}
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="{{ env('STRIPE_KEY') }}"
data-amount="{{ $total }}"
data-name="Stripe Demo"
data-label="購入をする"
data-description="Online course about integrating Stripe"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency="JPY">
</script>
</form>
</div>
@else
<p>以下の条件に当てはまったら購入画面に進めません</p>

<p>カートに商品がない。住所が選択されてない。合計金額が50円以下</p>
@endif


<a href="{{route('index')}}">商品一覧ページ</a>
<a href="{{route('address.showSelectAddress')}}">住所選択ページ</a>
@endsection

その結果以下のような見た目になりました。

「決済をする」を押すと以下のようなエラーを吐き出します。

予定だと以下のような画面になってほしいのに、scriptの部分が動いていないことがわかります。

##解決方法
以下の記事を参考にLaravelのデフォルトにある、app.jsとバッティングしている事がわかりました。
そのapp.jsを読み込んでいるのが、layout/app.blade.phpで読み込まれているのがわかりました。

そのため、viewでlayoutを読み込んでいる以下3行を削除しました。

@extends('layouts.app')

@section('content')

//省略

@endsection

無事動きました。めでたしめでたし

参考にした神記事