生产红宝石中未显示条纹卡元素答案

【问题标题】：stripe card-element not showing in production ruby生产红宝石中未显示条纹卡元素
【发布时间】：2019-01-06 05:04:50
【问题描述】：

当我使用 Elastic Beanstalk 部署到产品时，我正在使用条带作为付款方式，它在开发中运行良好，但用户输入信用卡的卡元素表单未显示。

它应该看起来像这样

但在生产中它看起来像这样

条纹.rb

Rails.configuration.stripe = {
:stripe_publishable_key => ENV['STRIPE_PUBLISHABLE_KEY'],
:secret_key      => ENV['STRIPE_SECRET_KEY']
}
Stripe.api_key = Rails.configuration.stripe[:secret_key]

这里是payment.html.erb的html

 <div class="row">
  <div class="col-md-9">
   <div class="panel panel-default">
     <div class="panel-heading">Payment Method</div>
      <div class="panel-body">
       <div class="container">
        <%= form_tag("/add_card", method: "post", id: "add-card") do %>
            <label>
              <span>Name</span>
              <input name="cardholder-name" class="field" placeholder="Jane Doe" />
            </label>
            <label>
              <span>Card</span>
              <div id="card-element" class="field"></div>
            </label>
            <div class="outcome">
              <div class="error" role="alert"></div>
            </div>
            <% if current_user.stripe_id %>
              <button type="submit" class="btn btn-normal btn-block">Update Card</button>
            <% else %>
              <button type="submit" class="btn btn-normal btn-block">Add Card</button>
            <% end %>
        <% end %>
    </div>
  </div>
</div>

这里是payment.html.erb的js

 <script src="https://js.stripe.com/v3/"></script>
 <script>
 $(function() {
 var stripe = Stripe('<%= Rails.configuration.stripe[:publishable_key] %>');
var elements = stripe.elements();
var card = elements.create('card', {
  hidePostalCode: true,
  style: {
    base: {
      iconColor: '#F99A52',
      color: '#32315E',
      lineHeight: '48px',
      fontWeight: 400,
      fontFamily: '"Helvetica Neue", "Helvetica", sans-serif',
      fontSize: '15px',
      '::placeholder': {
        color: '#CFD7DF',
      }
    },
  }
});
card.mount('#card-element');
function setOutcome(result) {
  var errorElement = document.querySelector('.error');
  errorElement.classList.remove('visible');
  if (result.token) {
    var form = $('#add-card');
    form.append($('<input type="hidden" name="stripeToken">').val(result.token.id));
    form.get(0).submit();
  } else if (result.error) {
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  }
}
card.on('change', function(event) {
  setOutcome(event);
});
$('#add-card').on('submit', function(e) {
  e.preventDefault();
  var extraDetails = {
    name: $('input[name=cardholder-name]').value
  };
  stripe.createToken(card, extraDetails).then(setOutcome);
});
});

这里是 GemFile

gem 'stripe', '~> 3.0.0'
gem 'rails-assets-card', source: 'https://rails- 
assets.org'
gem 'omniauth-stripe-connect', '~> 2.10.0'

这里是 secrets.yml

STRIPE_PUBLISHABLE_KEY: publish key
secret_key_base: password key

这里是 devise.rb

  config.omniauth :stripe_connect, 'ca key', 'sk key', scope: 'read_write', stripe_landing: 'login'

这里是 users_controller.rb

  def add_card
    if current_user.stripe_id.blank?
     customer = Stripe::Customer.create(
      email: current_user.email
  )
     current_user.stripe_id = customer.id
     current_user.save
     customer.sources.create(source: params[:stripeToken])
    else
     customer = Stripe::Customer.retrieve(current_user.stripe_id)
    customer.source = params[:stripeToken]
    customer.save
   end
    flash[:notice] = "Your card is saved."
    redirect_to payment_method_path
    rescue Stripe::CardError => e
    flash[:alert] = e.message
    redirect_to payment_method_path
end

这里是 console.log

【问题讨论】：

是否有任何控制台错误？你在使用涡轮链接吗？
@JoshBrody no 我没有使用 turbo 链接，但我在我的 ec2 实例中没有看到任何与条带相关的 production.log 错误
你的browser console 显示了什么？
@JoshBrody 我用来自 console.log 的图片更新了问题
您的代码查找Rails.configuration.stripe[:publishable_key]，但您的环境变量是Rails.configuration.stripe[[:stripe_publishable_key]

标签： ruby-on-rails ruby amazon-elastic-beanstalk stripe-payments stripe-connect

【解决方案1】：

您的生产环境缺少必需的变量。我不熟悉 EC2 或 EB，但https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/create_deploy_Ruby.container.html 似乎有更多关于如何在您的环境中设置它们的信息。

【讨论】：