- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试显示来自 Stripe ( https://stripe.com/docs/checkout ) 的嵌入式结帐表单。我注意到,如果我将嵌入代码放在 @section('content')
和 @endsection
之间,当我单击 Pay with 时,它不会显示表单卡片按钮。但是,如果我删除 @section('content')
或将嵌入的代码放在它之外,那么它将完美地显示表单,但是,这会破坏我的布局结构。
index.blade.php
@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
谢谢!
编辑:布局应用
<!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">
</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>
最佳答案
所以我想出了问题所在,这是因为 <script>
标签与 Vue 组件冲突。
所以有两种解决方案:
1) 创建一个没有 Vue 元素标识符的重复布局 <div id="app"></div>
或
2) 在 Vue 组件中使用 mount() 钩子(Hook)创建脚本标签。
createStripeScript () {
const script = document.createElement('script')
script.src = 'https://checkout.stripe.com/checkout.js'
script.onload = () => this.initStripe()
document.body.appendChild(script)
}
关于javascript - 在 Laravel Blade 上嵌入 Checkout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46721050/
我知道 Laravel 的 Blade 模板位于/resource/views 目录中。它的扩展名是 .blade.php 。 我的问题是我已经为前端设计人员设置了一个单独的 repo 来处理 bla
我知道 Laravel 的 Blade 模板位于/resource/views 目录中。它的扩展名是 .blade.php 。 我的问题是我已经为前端设计人员设置了一个单独的 repo 来处理 bla
在我的数据库中,我保存包含 Blade 标记的文本,例如: Hello {!! $name !!} how are you today. 我将此文本传递到变量 $text 中的电子邮件模板。在我使用的
我想从3个表构建 Blade View : “inputs_details”-字段:article_type(值:“p”代表产品,'s'代表服务),article_id,...。 “产品”-字段:ID
我正在使用 Laravel 5.1。我正在尝试将 Blade 指令 (@extend) 与我的自定义 Blade 指令一起使用。 Blade::directive('base', function()
我的 Blade 中有一个表格,其中包含 2 个日期供用户选择,例如: {{csrf_field()}} From
我正在尝试使用表单生成器创建一个按钮 {!! Form::button(' 'yourstyle']); 关于php - 在 Blade 代码中插入 Blade 代码,我们在Stack Overflo
我正在渲染一个页面,该页面主要是 Laravel 中带有 view::make 的表单,它正在崩溃,导致 ERR_CONNECTION_RESET。经过长时间的调查和许多红鲱鱼,我开始从 Blade
我有以下路径的部分 View 。 /views/acp/review/check.details.blade.php 我如何使用 Blade 包含这样的文件,因为如果我这样做 @include('vi
我继承了一个 Laravel 项目,该项目有许多 Blade 文件, Blade 文件中的标签内带有 javascript。问题是有很多重复的 JS 逻辑,所以我想提取 JS 并创建 JS 文件以包含
我正在为 laravel 项目中基于 Blade 的组件创建文档,并希望将语法突出显示的 Blade 代码片段显示为文档的一部分,就像这样: 我已经安装了 graham-campbell/markdo
在我激活 Facade 的 Lumen 应用程序中($app->withFacades() in app's bootstrap)我无法在 Blase 模板中使用 URL 类。 {{ URL::pre
我正在为 laravel 项目中基于 Blade 的组件创建文档,并希望将语法突出显示的 Blade 代码片段显示为文档的一部分,就像这样: 我已经安装了 graham-campbell/markdo
在我激活 Facade 的 Lumen 应用程序中($app->withFacades() in app's bootstrap)我无法在 Blase 模板中使用 URL 类。 {{ URL::pre
有人知道是否可以延长 child Blade 吗? 我的应用程序有一个通用的布局模板,然后每个页面都从该模板@extends。每个页面都可以根据需要为其他 HTML block (例如模态)引入一系列
我试图在 blade 中设置一个 php 变量。它可以在同一个 Blade 上工作,而不是在其他 Blade 上设置 var。 例子: header.blade.php @if(isset($comp
情况: 我正在制作一个侧面菜单,该菜单通过从表 (MySQL) 中获取数据来填充。 每代表菜单的一项: item 1 item 2 item 3 等等... 问题: 当我看到它的 Blade 时一切正
我在主视图中有 3 个元素 标题(导航栏) 内容 页脚 在 app.blade.php 中 @include('header') @yield('content')
我想将输入值从一个 Blade 文件传递到另一个 Blade 文件。 我是 PHP Laravel 的新手,在尝试使用它时遇到错误。 我认为我的语法在这里是错误的。有人可以帮忙吗? channel .
所以我的困境是这样的。 Email: info@example.com 正在作为 Blade 代码处理,不会在我的 Laravel 4 框架中的响应式 Bootstrap 网页中调整大小。 关于如何让
我是一名优秀的程序员,十分优秀!