Laravel app.js 停止显示 Stripe 付款表单

Question

我正在尝试使用 Stripe 接受付款。 我从Stripe 文档中获取了代码并将其添加到视图中。 当我单击按钮时，它不会显示表单，而是转到表单操作页面（付款）。

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

这就是阻止表格显示的原因....

所以我的问题是：为什么这会导致 Stripe 无法显示表单，我该怎么做才能修复它？ 我是不是忘了正确设置一些东西？ 我是 Laravel 的新手，这是我使用该框架的第一个项目，我的安装非常接近 vanilla，因为我刚刚开始......

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

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

然后迁移了数据库。

这是我的一些文件...

网页.php：

...
Route::post('/payments', 'PaymentsController@subscribe')->name('payments');
Route::get('/payments', 'PaymentsController@index')->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";

    }
}

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

服务.php：

<?php

return [

    ...

    'stripe' => [
        'model' => Staff\User::class,
        'key' => env('pk_test_xxx'),
        'secret' => env('sk_test_zzz'),
    ],

];

Answer 1

发现问题。 这是登出表格。 如果我删除它，条纹形式就可以工作。

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

Laravel app.js 停止显示 Stripe 付款表单

问题描述

1 个解决方案

解决方案1
1 2017-10-21 22:47:06

Laravel app.js 停止显示 Stripe 付款表单

问题描述

1 个解决方案

解决方案1 1 2017-10-21 22:47:06

解决方案1
1 2017-10-21 22:47:06