未捕获的类型错误：无法读取 null 的属性“提交”以进行条带支付

Posted 2023-02-22

【中文标题】未捕获的类型错误：无法读取 null 的属性“提交”以进行条带支付

【英文标题】：Uncaught TypeError: Cannot read property 'submit' of null for stripe payment

【发布时间】：2016-10-02 16:52:01

【问题描述】：

我正在将条纹支付集成到我的应用中。我为我自定义的一个切换了 Stripe 默认的“用卡付款”按钮。这样做之后，测试模式成功弹出，我可以输入测试凭据。但是，当我提交测试付款并获得批准时，它只是停留在同一个 pin 页面上，而不是转到我为其创建的费用页面。

注意：在我用新的自定义按钮替换默认的条带支付按钮之前，该应用程序可以从条带支付过渡到费用 create.html.erb 页面。

另外，查看开发人员工具时，我确实注意到在我提交测试付款时会显示：

Uncaught TypeError: Cannot read property 'submit' of null 

我认为这是指我在下面提交 ChargeForm 的代码。

有人遇到过这个问题或者知道我可以解决这个问题吗？非常感谢！

app/views/pins/_details.html.erb

        <%= form_tag charges_path, id: 'chargesForm' do %>
          <script src="https://checkout.stripe.com/checkout.js"></script>
          <%= hidden_field_tag 'stripeToken' %>
          <%= hidden_field_tag 'stripeEmail' %>  
          <button id="btn-buy" type="button" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-heart"></span>   I want this!</button>

          <script>
          var handler = StripeCheckout.configure(
            key: '<%= Rails.configuration.stripe[:publishable_key] %>',
            token: function(token, arg) 
              document.getElementById("stripeToken").value = token.id;
              document.getElementById("stripeEmail").value = token.email;
              document.getElementById("chargeForm").submit();
            
          );
           document.getElementById('btn-buy').addEventListener('click', function(e) 
            handler.open(
              name: 'OMG! <%= @pin.manufacturer %>',
              description: '<%= @pin.description %>',
              amount: 1000
          );
          e.preventDefault();
         )
        </script>
      <% end %>

app/controllers/charges_controller.rb

class ChargesController < ApplicationController

def create
  # Amount in cents
  @amount = 500

  customer = Stripe::Customer.create(
    :email => params[:stripeEmail],
    :card  => params[:stripeToken]
  )

  charge = Stripe::Charge.create(
    :customer    => customer.id,
    :amount      => @amount,
    :description => 'Rails Stripe customer',
    :currency    => 'usd'
  )

    rescue Stripe::CardError => e
      flash[:error] = e.message
      redirect_to charges_path
   end

end

app/views/charges/create.html.erb

You bought some Awesome stuff!

app/config/routes.rb

Rails.application.routes.draw do
  resources :pins
  resources :charges

  devise_for :users
  root "pins#index"
  get "about" => "pages#about" #creates about_path
  get "contact" => "pages#contact" #creates contact_path
  get "auction" => "pages#auction" #creates auction_path
  get "terms" => "pages#terms" #creates terms_path
  post 'send_mail', to: 'contact#send_mail'
  get 'contact', to: 'contact#show'

 scope 'pins', controller: :pins do
    scope '/:id' do
     post 'bid', to: :bid
    end
 end

  scope 'admin', controller: :admin do
    scope 'pins' do
      get '/:pin_id', to: :pin
    end
  end
end

【参考方案1】：

您的 javascript 代码读取

document.getElementById("chargeForm").submit();

而您的表单名称是 chargesForm

<%= form_tag charges_path, id: 'chargesForm' do %>

【参考方案2】：

当我在一个页面中有许多表格用于删除操作时，我遇到了类似的问题。当我发现引号（单引号或双引号）必须出现在

  document.getElementById("whatever id keep quotes ").submit();

并确保它与表单 ID 匹配。

例如

  document.getElementById("'delform'.$key ").submit();

  <form id="delform.$key" action="" ></form>