Laravel不会从Stripe Docs中加载Stripe元素

Question

I am trying a simple Stripe API implementation on my Laravel app, and for some reason, I cannot get the Elements to load. 我正在Laravel应用上尝试一个简单的Stripe API实现，由于某种原因，我无法加载Elements。 I have copy and pasted direct from the Docs, a simple form with an element and for the life of me, I can't figure out why it will not load. 我已经直接从文档中复制并粘贴了文档，这是一个带有元素的简单表格，对于我自己的一生，我无法弄清楚为什么它不会加载。

Everything seems to be in order. 一切似乎都井井有条。
- My JS files are in the public directory -我的JS文件位于公共目录中
- I have tried with scripts NOT defered -我尝试使用不延迟的脚本
- I have tried hard coding into one page -我尝试将代码硬编码成一页
- I have read through the Docs seemingly 10 times -我看了10遍文档，
- I have checked line by line to make sure the id tags are the same as referenced in the js files. -我已逐行检查以确保id标记与js文件中引用的标记相同。

So far, I am at a loss. 到目前为止，我很茫然。 I have been working on this for a few hours and I'm just staring at the screen baffled at this point. 我已经为此工作了几个小时，现在我只是凝视着困惑的屏幕。 Any ninjas around who can spot a likely rookie mistake I've made? 周围的忍者谁能发现我可能犯的菜鸟错误？ Here are my current files: 这是我当前的文件：

app.blade.php: app.blade.php：

 <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Springs Fat to Fit</title>

    <!-- Scripts -->
    <script src="https://js.stripe.com/v3/" defer></script>
<script src="{{asset('js/stripe.js')}}" defer></script>
    <script src="{{asset('js/app.js')}}" defer></script>

    <script src="{{asset('js/custom.js')}}" defer ></script>




    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{asset('css/style.css')}}" rel="stylesheet">

</head>
<body>
    <div id="app">


     @if(Auth::guest() || Auth::user()->is_admin == 0)
     @include('partials.navbar')
        @else @if(Auth::user()->is_admin == 1)
        @include('partials.admin_navbar')
        @endif
     @endif



        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

testPage.blade.php: testPage.blade.php：

@extends('layouts.app')

@section('content')
<div class="container">

<form action="{{route('testPage')}}" method="post" id="payment-form">
        @csrf

        <div class="form-row">


            <label for="card-element">
            Credit or debit card
          </label>
          <div id="card-element">
            <!-- A Stripe Element will be inserted here. -->
          </div>

          <!-- Used to display Element errors. -->
          <div id="card-errors" role="alert"></div>

        </div>

        <button>Submit Payment</button>
      </form>


</div>  {{-- This is the end of the container--}}
@endsection

stripe.js: stripe.js：

// Create a Stripe client.
var stripe = Stripe('pk_test_key right here');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
    base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
            color: '#aab7c4'
        }
    },
    invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
    }
};

// Create an instance of the card Element.
var card = elements.create('card', { style: style });

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function (event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
});

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function (event) {
    event.preventDefault();

    stripe.createToken(card).then(function (result) {
        if (result.error) {
            // Inform the user if there was an error.
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
        } else {
            // Send the token to your server.
            stripeTokenHandler(result.token);
        }
    });
});

// Submit the form with the token ID.
function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    // Submit the form
    form.submit();
}

Answer 1

you need to rule out your errors. 您需要排除错误。

rule out whether if it's js error or not: please check your browser console log, network tab, etc, see if there's exception. 排除是否是js错误：请检查您的浏览器控制台日志，“网络”标签等，看看是否有异常。 see if your js is loaded. 查看您的js是否已加载。 see all your required js are loaded, not showing 404. 查看所有所需的js已加载，但未显示404。
put breakpoints on your js on chrome dev tools. 在chrome开发工具上的js上设置断点。 put a lot of them on your switch blocks, if blocks,etc. 将它们中的很多放在您的开关模块上（如果有模块等）。
fix if you find any problem. 如果发现任何问题，请修复。
make sure stripe assets is not blocked by your chrome plugins e,g. 确保您的Chrome插件不会阻止条纹资产，例如 adblocks 广告块
check api keys / secrets if there's any 检查api密钥/机密是否有

Laravel不会从Stripe Docs中加载Stripe元素

问题描述

1 个解决方案

解决方案1
0 2019-04-10 23:15:36

Laravel不会从Stripe Docs中加载Stripe元素

问题描述

1 个解决方案

解决方案1 0 2019-04-10 23:15:36

解决方案1
0 2019-04-10 23:15:36