title: Confused about how to properly use secret keys
body: <p>So in my quest to get Stripe integrated, I find myself confused about how to properly use secret keys and environmental variables. To my understanding, I do NOT want to explicitly include my secret key in any public place and should be using a environmental variable instead. But it does not seem to work when I substitute the ENV in place of the actual hardcoded key. I am doing something wrong, but what? Here is what I have. In my secret.yml file:</p>
  
  <pre><code>development:
    secret_key_base: xxxxxxxxxxxxxxx
  
    secret_key: sk_test_JlKC4V7nmCQ0sE4iNAVyoAxA
    publishable_key: pk_test_KfCg1YmVXwBYyEdPEWnfibF8
  
    stripe_live_publishable_key: pk_live_pxxxxxxxxxxxxxx
    stripe_live_secret_key: sk_live_jxxxxxxxxxxxxx
  
  test:
    secret_key_base: a38exxxxxxxxxxxxxxxx
  
  # Do not keep production secrets in the repository,
  # instead read values from the environment.
  production:
    secret_key_base: &lt;%= ENV["SECRET_KEY_BASE"] %&gt;
  #test
    secret_key: &lt;%= ENV["SECRET_KEY"] %&gt;
    publishable_key: &lt;%= ENV["PUBLISHABLE_KEY"] %&gt;
  # live
    stripe_live_publishable_key: &lt;%= ENV["STRIPE_LIVE_PRODUCTION_KEY"] %&gt;
    stripe_live_secret_key: &lt;%= ENV["STRIPE_LIVE_SECRET_KEY"] %&gt;
  </code></pre>
  
  <p>and in /initialize/stripe.rb I have:</p>
  
  <pre><code>Rails.configuration.stripe = {
     :publishable_key =&gt; ENV['PUBLISHABLE_KEY'],
     :secret_key      =&gt; ENV['SECRET_KEY']
  }
  
   Stripe.api_key = Rails.configuration.stripe[:secret_key]
  </code></pre>
  
  <p>and in my payment form, I have the line:
  <code>Stripe.setPublishableKey('&lt;%= 'sk_test_JlKC4V7nmCQ0sE4iNAVyoAxA'%&gt;');</code></p>
  
  <p>It works like this, but unless I am misunderstanding, is insecure (well, right now it is just a test key, but I need to know this when I use live keys for production). Yet when I try to use:</p>
  
  <p><code>Stripe.setPublishableKey('&lt;%= ENV['PUBLISHABLE_KEY'] %&gt;');</code></p>
  
  <p>I get the error:
  <code>Uncaught Error: You did not set a valid publishable key. Call Stripe.setPublishableKey() with your publishable key.</code></p>
  
  <p>or when I try:</p>
  
  <p><code>Stripe.setPublishableKey('&lt;%= :publishable_key %&gt;');</code></p>
  
  <p>I get an error <code>401 (Unauthorized)</code> in console.</p>
  
  <p>How am I supposed yo be using the ENV[KEY] so that I do not need my key written out in plain sight?</p>
  
  <p><strong>UPDATE:</strong>
  Here is my form where the key would be most public:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;Contribution Form&lt;/title&gt;
  
    &lt;!-- The required Stripe lib --&gt;
    &lt;script type="text/javascript" src="https://js.stripe.com/v2/"&gt;&lt;/script&gt;
  
    &lt;!-- jQuery is used only for this example; it isn't required to use Stripe --&gt;
    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
      // This identifies your website in the createToken call below
      Stripe.setPublishableKey('STRIPE_TEST_PUBLISHABLE_KEY'); //&lt;====How should this line look?
  
      var stripeResponseHandler = function(status, response) {
        var $form = $('#payment-form');
  
        if (response.error) {
          // Show the errors on the form
          $form.find('.payment-errors').text(response.error.message);
          $form.find('button').prop('disabled', false);
        } else {
          // token contains id, last4, and card type
          var token = response.id;
          // Insert the token into the form so it gets submitted to the server
          $form.append($('&lt;input type="hidden" name="stripeToken" /&gt;').val(token));
          // and re-submit
          $form.get(0).submit();
        }
      };
  
      jQuery(function($) {
        $('#payment-form').submit(function(e) {
          var $form = $(this);
  
          // Disable the submit button to prevent repeated clicks
          $form.find('button').prop('disabled', true);
  
          Stripe.card.createToken({
              number: $('.card-number').val(),
              cvc: $('.card-cvc').val(),
              exp_month: $('.card-expiry-month').val(),
              exp_year: $('.card-expiry-year').val()}, stripeResponseHandler);
  
          // Prevent the form from submitting with the default action
          return false;
        });
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!--  form --&gt;
  &lt;div class="container"&gt;
      &lt;div class="row Row one"&gt;
          &lt;div class="col-sm-12 col-md-10"&gt;
          &lt;h1&gt;Make your contribution&lt;/h1&gt;
             &lt;%= form_for @project, url: project_charges_path, :html =&gt; {:id =&gt; "payment-form"}, method: 'post' do |f| %&gt;
  
                  &lt;%= f.hidden_field :user_id, :value =&gt; current_user.id %&gt;
                  &lt;%= f.hidden_field :@project_id, :value =&gt; @project.id %&gt;
  
  
                  &lt;div class= "field"&gt;
                    &lt;%= label_tag :card_number, "Credit Card Number" %&gt;&lt;br&gt;
                    &lt;%= text_field_tag :card_number, nil, name: nil, class: ' card-number form-control', :required =&gt; true %&gt;&lt;br&gt;
                  &lt;/div&gt;
  
                  &lt;div class= "field"&gt;
                    &lt;%= label_tag :card_code, "Security Code (cvc)" %&gt;&lt;br&gt;
                    &lt;%= text_field_tag :card_code, nil, name: nil, class: 'card-cvc form-control', :required =&gt; true %&gt;&lt;br&gt;
                  &lt;/div&gt;
  
                  &lt;div class= "field"&gt;
                    &lt;%= label_tag :card_month, "Expiration" %&gt;
                    &lt;%= select_month nil, {add_month_numbers: true}, {name: nil, class: "card-expiry-month"} %&gt;
                    &lt;%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, class: "card-expiry-year"}%&gt;
                  &lt;/div&gt;
  
  
                  &lt;div class= "field"&gt;
                      &lt;%= label_tag :amount, "Amount" %&gt;&lt;br&gt;
                      &lt;%= text_field_tag :amount %&gt; 
                  &lt;/div&gt; 
  
                  &lt;div class= "field"&gt;
                      &lt;%= label_tag :comments, "Add a comment?" %&gt;&lt;br&gt;
                      &lt;%= text_area_tag :comments %&gt; 
                  &lt;/div&gt;                 
  
                  &lt;div class= "actions"&gt;
                    &lt;%= f.submit 'Submit', :class =&gt; 'contribution-submit' %&gt;
                  &lt;/div&gt;
  
            &lt;div id="stripe_error"&gt;
                &lt;noscript&gt;JavaScript is not enabled and is required for this form. First enable it in your web browser settings.&lt;/noscript&gt;
            &lt;/div&gt;
  
            &lt;% end %&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- &lt;div class="row"&gt;&lt;/div&gt; --&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>