为什么我的 Rails 应用程序中没有出现 Stripe Elements？答案

【问题标题】：Why isn't Stripe Elements appearing in my Rails app?为什么我的 Rails 应用程序中没有出现 Stripe Elements？
【发布时间】：2020-04-29 14:25:08
【问题描述】：

我正在尝试在 documentation 之后在我的 RoR 应用程序中实现 Stripe。我已经按照“4 保存卡详细信息”的步骤操作，其中应显示this 之类的表单。但是，当我单击“订阅”按钮时，什么也没有发生。

我使用的控制器称为 Subscriptions。当我的提交按钮在订阅/显示视图中时，我得到的日志错误是ActiveRecord::RecordNotFound (Couldn't find Subscription with 'id'=StripeElements):

如果我将它移动到订阅/索引视图，我得到的日志错误是ActionController::RoutingError (No route matches [GET] "/StripeElements.css"):

我没有修改我的路由或控制器，因为文档没有说这是必需的。 here 和 here 的建议并没有解决我的问题。

我正在使用 Rails 5.2.4、Ruby 2.6 和 Bootstrap 4。

show.html.erb

<head>
  <script src="https://js.stripe.com/v3/"></script>
  <link rel="stylesheet" href="StripeElements.css">
</head>

<section class="subscription mt-3">
    <div class="container-fluid text-center bg-grey">
        <div class="row">
            <div class="col-12 justify-content-center align-item-center mb-1">
        <h4><%= @subscription.name %></h4>
        </div>

<body>
  <form id="subscription-form">
    <div id="card-element" class="MyCardElement">
      <!-- Elements will create input elements here -->
    </div>

    <!-- We'll put the error messages in this element -->
    <div id="card-errors" role="alert"></div>
    <button type="submit">SUBMIT</button>
  </form>
</body>

</section>


<script type="text/javascript">
    card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});
</script>

app/assets/javascripts/script.js

var stripe = Stripe('pk_test_NjMKZ5dBTvfebS965Xcu4EbP00veP5dc9C');
var elements = stripe.elements();

app/assets/stylesheets/MyCardElements.css

.MyCardElement {
  height: 40px;
  padding: 10px 12px;
  width: 100%;
  color: #32325d;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.MyCardElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.MyCardElement--invalid {
  border-color: #fa755a;
}

.MyCardElement--webkit-autofill {
  background-color: #fefde5 !important;
}

app/assets/javascripts/client.js

var style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  }
};

var cardElement = elements.create("card", { style: style });
cardElement.mount("#card-element");

subscriptions_controller.rb

class SubscriptionsController < ApplicationController
  before_action :set_subscription, only: [:show, :edit, :update, :destroy]

  # GET /subscriptions
  # GET /subscriptions.json
  def index
    @subscriptions = Subscription.all
  end

  # GET /subscriptions/1
  # GET /subscriptions/1.json
  def show
    @subscription = Subscription.find(params[:id])
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_subscription
      @subscription = Subscription.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def subscription_params
      params.fetch(:subscription, {})
    end
end

【问题讨论】：

标签： ruby-on-rails stripe-payments