条纹卡片元素未在生产中显示 ruby

Question

我使用 stripe 作为支付方式，当我使用 Elastic Beanstalk 部署到生产环境时，它在开发环境中运行良好，aws 用户输入信用卡的卡片元素表单未显示。

它应该看起来像这样

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

stripe.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

Answer 1

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

条纹卡片元素未在生产中显示 ruby

stripe card-element not showing in production ruby

ruby

ruby-on-rails

stripe-payments

amazon-elastic-beanstalk

stripe-connect