stripe card-element not showing in production ruby

Question

I'm using stripe for the payment method it was working perfectly in development put when I deployed to productions using Elastic Beanstalk aws the card-element form where the user enter credit card not showing.

it suppose to look like this

but in production it looks like this

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]

here is the html of payment.html.erb

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

here is the js of payment.html.erb

 <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);
});
});

here is the GemFile

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

here is secrets.yml

STRIPE_PUBLISHABLE_KEY: publish key
secret_key_base: password key

here is devise.rb

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

here is 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

here is console.log

Answer 1

Your production env is missing the required variables. I'm not familiar with EC2 or EB but https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/create_deploy_Ruby.container.html seems to have more info on how to set them in your environment.