updates index.js with stripe key data, adds .env file in order to hid…

…e key

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.env
 
 # testing
 /coverage

cypress/integration/userCanPayForSubscription.feature.js

@@ -14,9 +14,8 @@ describe("User can pay for subscription:", () => {
     cy.route({
       method: "POST",
       url: "http://localhost:3000/api/subscriptions",
-      response: {status: "paid"}
+      response: { status: "paid" }
     });
-
     cy.visit("/");
     cy.get("#2")
       .last()
@@ -67,4 +66,4 @@ describe("User can pay for subscription:", () => {
       "The world is running out of hope."
     );
   });
-});
+});

src/components/PaymentForm.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Form, Heading, Button } from "grommet";
 import axios from "axios";
-import { useDispatch } from "react-redux"
+import { useDispatch } from "react-redux";
 import {
   CardNumberElement,
   CardExpiryElement,
@@ -10,16 +10,20 @@ import {
 } from "react-stripe-elements";
 
 const PaymentForm = props => {
-  const dispatch = useDispatch()
-  const submitPayment = async (event) => {
+  const dispatch = useDispatch();
+  const submitPayment = async event => {
     event.preventDefault();
-    let stripeResponse = await props.stripe.createToken()
-    let token = stripeResponse.token.id
-    let paymentState = await axios.post("/subscriptions", {stripeToken: token})
+    let stripeResponse = await props.stripe.createToken();
+    let token = stripeResponse.token.id;
+    let paymentState = await axios.post("/subscriptions", {
+      stripeToken: token
+    });
     if (paymentState.data.status === "paid") {
-      dispatch( {type: "SUCCESS_MESSAGE", payload: {successMessage: "Congratulations you are now a subscriber!"}})
-    } 
-
+      dispatch({
+        type: "SUCCESS_MESSAGE",
+        payload: { successMessage: "Congratulations you are now a subscriber!" }
+      });
+    }
   };
   return (
     <Form id="payment-form">

src/index.js

@@ -10,15 +10,13 @@ import { StripeProvider } from "react-stripe-elements"
 
 axios.defaults.baseURL = "http://localhost:3000/api/";
 // axios.defaults.baseURL = "https://urban-living.herokuapp.com/api/";
-
-
+const key = process.env.STRIPE_API_KEY;
 const store = configureStore();
 window.store = store;
 
-
 ReactDOM.render(
 	<Provider store={store}>
-	<StripeProvider apiKey="">
+	<StripeProvider apiKey={key}>
 		<App />
 	</StripeProvider>
 	</Provider>, document.getElementById('root'));