CODEWITHSUNDEEP
reactjsexpresskeystripe-payments
Cat Perry
Cat Perry

Reputation: 1062

Stripe error in Express/React: You did not set a publishable key

I'm able to run my Express/React app locally without Stripe errors, paying successfully in test mode, but when on Heroku, I get this error on button click: You did not set a valid publishable key. Call Stripe.setStripePublishableKey() with your publishable key. Here is my setup:

in heroku, I have my keys added there as config vars

in config/dev.js I have all keys set as strings

in config/prod.js: 

module.exports = {
  googleClientID: process.env.GOOGLE_CLIENT_ID,
  googleClientSecret: process.env.GOOGLE_CLIENT_SECRET,
  mongoURI: process.env.MONGO_URI,
  cookieKey: process.env.COOKIE_KEY,
  stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
  stripeSecretKey: process.env.STRIPE_SECRET_KEY
};

in client/src/components/Payments.js

import React, {Component} from 'react';
import StripeCheckout from 'react-stripe-checkout';
import { connect } from 'react-redux';
import * as actions from '../actions';

class Payments extends Component {
  render() {

    return (
      <StripeCheckout 
        name="Emaily"
        description="Add $5 for 5 email credits"
        amount={ 500 }
        token={ token => this.props.handleToken(token) }
        stripeKey={ process.env.REACT_APP_STRIPE_KEY }
      >
      <button className="btn">
      Add Credits
      </button>
      </StripeCheckout>
    );
  }
}

export default connect(null, actions)(Payments);

Create React App requires I use REACT_APP_STRIPE_KEY rather than stripePublishableKey or STRIPE_PUBLISHABLE_KEY, and I've tried changing it my env variables instead to no avail. Any ideas?

Upvotes: 1

Views: 4029

Answers (1)

byrneg7
byrneg7

Reputation: 43

I had the same issue until I removed my .env.production from my .gitignore file. According to the React Docs: Env Links and CRA

.env files should be checked into source control (with the exclusion of .env*.local).

I realized that my dev environment was running correctly since the .env.development and .env.production files were being compiled by CRA into the bundle.js. If you have these in your .gitignore, heroku won't be able to find them. Hope this helps!

Upvotes: 2

Related Questions