2017-10-21 5 views
0

ストライプで支払いを受けようとしています。 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"を実行してから、 app.php:

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

次に、データベースを移行しました。

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

はここで...

web.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> 

したがって、2つのフォームが競合していることを意味します。ストライプフォームの名前を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); 
}); 
関連する問題