2017-10-21 63 views
0

我试图接受Stripe付款。我从Stripe documentation获得了代码并将其添加到视图中。当我点击按钮时,它不会显示表单,而是进入表单操作页面(付款)。Laravel app.js停止显示条形付款窗体

<!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> 

而这正是保持的形式进行展示....

所以我的问题:为什么会是这样造成条纹无法显示形式和我能做些什么来解决它?我忘记了正确设置了一些东西吗?我是Laravel的新手,这是我的第一个框架项目,我的安装非常接近香草,因为我刚刚开始...

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

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

然后迁移数据库。

下面是我的一些文件...

web.php:

... 
Route::post('/payments', '[email protected]')->name('payments'); 
Route::get('/payments', '[email protected]')->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'), 
    ], 

]; 

回答

0

发现的问题。这是注销表单。如果我删除它,条纹形式工作。

<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); 
});