Stripe JavaScript showing live mode when in test mode in Rails 4

Question

As you can see from the attached segments below I am running in testing mode and when I try to use the testing stripe cards specifically 4242424242424242 nothing is working. How can I debug this?

Console log of the Stripe error:

Stripe interface:

The JavaScript code in progress:

    function process_payment(cardNumber, cardExpiration, cardVerification, zipCode, price){
      var vpf = validate_payment_fields();
      if(vpf === true){
        process_stripe_api(cardNumber, cardExpiration, cardVerification, zipCode, price);
        // $contentLoader.show();
        // clear_cc_fields($cardNumber, $cardExpiration, $cardVerification, $zipCode);
        // $paymentProcessorForm.submit();
      }
    }

    function process_stripe_api(cardNumber, cardExpiration, cardVerification, zipCode, price){
      Stripe.createToken({
        number: cardNumber,
        cvc: cardVerification,
        exp_month: cardExpiration.substring(0,2),
        exp_year: cardExpiration.substring(3,5),
        price: price
      }, stripeResponseHandler);
    }

    function stripeResponseHandler(status, response) {
      if (response.error) {
        debugger;
      }
      else {
        console.log('passed!');
        debugger;
      }
    }

    function validate_payment_fields(){
      var $cardNumber = jQuery('#card_number');
      var $cardVerification = jQuery('#card_verification');
      var $cardExpiration = jQuery('#card_expiration');
      var $zipCode = jQuery('#zip_code');

      $cardNumber.next('.help-error').remove();
      $cardVerification.next('.help-error').remove();
      $cardExpiration.next('.help-error').remove();
      $zipCode.next('.help-error').remove();

      trim_field($cardNumber);
      var cardNumber = validate_card_number($cardNumber);

      trim_field($cardExpiration);
      var cardExpiration = validate_card_expiration($cardExpiration);

      trim_field($cardVerification);
      var cardVerification = validate_card_verification($cardVerification);

      trim_field($zipCode);
      var zipCode = validate_zipcode($zipCode);

      if(cardNumber && cardExpiration && cardVerification && zipCode){
        return true;
      }
      else{
        return false;
      }
    }

    function clear_cc_fields(cardNumber, cardExpiration, cardVerification, zipCode){
      cardNumber.val('');
      cardVerification.val('');
      cardExpiration.val('');
      zipCode.val('');
    }

    function validate_card_number(field){
      var regTester = new RegExp("\\d{16}");
      if(regTester.test(field.val())){
        return true;
      }
      else{
        field.after("<p class='help-error'>Credit Card Number is Invalid!</p>");
        return false;
      }
    }

   function validate_card_expiration(field){
      var regTester = new RegExp("^((0[1-9])|(1[0-2]))\/((2009)|(20[1-2][0-9]))$");
      if(regTester.test(field.val())){
        return true;
      }
      else{
        field.after("<p class='help-error'>Credit Card Expiration is Invalid!</p>");
        return false;
      }
    }

    function validate_card_verification(field){
      var regTester = new RegExp("\\d{3}");
      if(regTester.test(field.val())){
        return true;
      }
      else{
        field.after("<p class='help-error'>CCV is Invalid!</p>");
        return false;
      }
    }

    function validate_zipcode(field){
      var regTester = new RegExp("\\d{5}");
      if(regTester.test(field.val())){
        return true;
      }
      else{
        field.after("<p class='help-error'>Zip Code is Invalid!</p>");
        return false;
      }
    }

    function trim_field(field){
      var tmp = jQuery.trim(field.val());
      field.val(tmp);
      return tmp;
    }

A snippet from the view:

= javascript_include_tag 'https://js.stripe.com/v2/'

javascript:
  Stripe.setPublishableKey("#{ENV['MY_STRIPE_PUBLISHABLE_KEY']}");

The form:

Answer 1

Make sure the Stripe key you're using is the test key and not the production key:

Your key should start with pk_test or sk_test