Trouble passing Heroku config var through Node.js to Angular CLI app

I'm working on a project where I need to pass a stripe key as JSON in Angular.

I added the key to Heroku in Config vars and have been trying to pass that value through the Node.js backend to Angular with the process.env.STRIPE_KEY method that was stated in the Heroku tutorial. I am completely lost and am unsure if I am going at this the correct way.

Here is my node server file.

//server.js
const express = require('express');
const app = express();
const bodyParser = require("body-parser");
const router = express.Router();


app.use(express.static(__dirname + '/dist'));
router.use(bodyParser.json());
router.use(bodyParser.urlencoded({extended: true}));

app.listen(3000, function(){});

router.all('*',function(req,res,next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST, OPTIONS");
  next();

});



router.post('/stripetestkey', function(req, res) {
  res.send({
    'KeyCode': process.env.STRIPE_KEY
  });
});


module.exports = router;

Here is the Service provider (in app modules and injected properly)getting the key from the server

//service.ts

import {Injectable} from "@angular/core";
import {Http, Headers} from "@angular/http";
import 'rxjs/add/operator/map';
import {Observable} from "rxjs";

@Injectable()
export class KeyService {
  constructor(private http: Http) {}

  private getError(error: Response): Observable<any>{
    console.log(error);
    return Observable.throw(error.json() || 'Server Issue');
  }

  getKey(): Observable<any> {
    let headers = new Headers();
    headers.append('Content-type', 'application/json');
    return this.http.get('http://localhost:3000/stripetestkey',{ headers: headers })
      .map(res => res.json())
      .catch(this.getError);
  }


}

And here is the code I have for opening Stripe checkout with the proper key

 openCheckout() {
    this.keyService.getKey().subscribe(data => this.stripeTestKey = data);
    let handler = (<any>window).StripeCheckout.configure({
      key: this.stripeTestKey,
      locale: 'auto',
      token: function (token: any) {

      }
    });
    handler.open({
      name: 'XXXXXX',
      description: 'Donation',
      amount: (this.donation * 100)
    });
  }

I've been getting HTML back instead of JSON and am just unsure if I'm even going at this correctly. I've also tried passing JSON instead of process.env.STRIPE_KEY. Can anyone let me know what I need to do to pass a heroku config var through node.js to my angular app?

Thanks!

P.S. here is the error I am receiving ..

Failed to load resource: the server responded with a status of 404 (Not Found)
main.bundle.js:32 Response
vendor.bundle.js:1443 ERROR SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Response.Body.json 

via Jonathan Corrin