2017-10-13 10 views
1

ストライプ(https://stripe.com/docs/checkout)から埋め込みチェックアウトフォームを表示しようとしています。私は埋め込みコードを@section('content')@endsectionの間に置くとPay with cardボタンをクリックしたときにフォームを表示しないことに気付きました。しかし、@section('content')を削除したり、埋め込まれたコードを外に置いたりすると、フォームが完全に表示されますが、レイアウトの構造が壊れてしまいます。Laravel Bladeにチェックアウトを埋め込む

@extends('layouts.app') 

@section('content') 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-md-offset-2"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Billing</div> 

       <div class="panel-body"> 
       <h1>Stripe</h1> 

       //EMBEDDED CODE STARTS HERE 
       <form action="/your-server-side-code" method="POST"> 
        <script 
         src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
         data-key="pk_test_sTxf2K6z6oemUXlC0NRcowxO" 
         data-amount="2000" 
         data-name="Demo Site" 
         data-description="2 widgets" 
         data-image="https://stripe.com/img/documentation/checkout/marketplace.png" 
         data-locale="auto" 
         data-zip-code="true" 
         data-currency="gbp"> 
        </script> 
       </form> 
       //EMBEDDED CODE ENDS HERE 


       </div> 
      </div> 
     </div> 
    </div> 
</div> 
@endsection 

index.blade.php

ありがとう!

EDITED: layout.app

<!DOCTYPE html> 
<html lang="{{ app()->getLocale() }}"> 
<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="{{ csrf_token() }}"> 

    <title>{{ config('app.name', 'Laravel') }}</title> 

    <!-- Styles --> 
    <link href="{{ asset('css/app.css') }}" rel="stylesheet"> 
</head> 
<body> 
    <div id="app"> 
     <nav class="navbar navbar-default navbar-static-top"> 
      <div class="container"> 
       <div class="navbar-header"> 

        <!-- Collapsed Hamburger --> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse"> 
         <span class="sr-only">Toggle Navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 

        <!-- Branding Image --> 
        <a class="navbar-brand" href="{{ url('/') }}"> 
         {{ config('app.name', 'Laravel') }} 
        </a> 
       </div> 

       <div class="collapse navbar-collapse" id="app-navbar-collapse"> 
        <!-- Left Side Of Navbar --> 
        <ul class="nav navbar-nav"> 
         &nbsp; 
        </ul> 

        <!-- Right Side Of Navbar --> 
        <ul class="nav navbar-nav navbar-right"> 
         <!-- Authentication Links --> 
         @guest 
          <li><a href="{{ route('login') }}">Login</a></li> 
          <li><a href="{{ route('register') }}">Register</a></li> 
         @else 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> 
            {{ Auth::user()->name }} <span class="caret"></span> 
           </a> 

           <ul class="dropdown-menu" role="menu"> 
            <li> 
             <a href="{{ route('logout') }}" 
              onclick="event.preventDefault(); 
                document.getElementById('logout-form').submit();"> 
              Logout 
             </a> 
             <a href="{{ route('home') }}">Home</a> 

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

     @yield('content') 
    </div> 

    <!-- Scripts --> 
    <script src="{{ asset('js/app.js') }}"></script> 
</body> 
</html> 
+0

'layouts.app'ビューの内容を追加してください。 – Camilo

+0

@Camilo私は投稿にそれを追加しました。これはデフォルトのlaravelレイアウトです – Nucleus

+0

'@section( 'content')... @ endsection'の中にダミーテキストを追加するとどうなりますか?それは現れますか? – Camilo

答えて

関連する問題