Stripe integration

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.DS_Store
+.DS_Store
+.idea/

config/config.json

@@ -18,5 +18,8 @@
   "production": {
     "use_env_variable": "JAWSDB_URL",
     "dialect": "mysql"
+  },
+  "stripe": {
+    "secret": "sk_test_bZW5BqNybsg5V1bHDoij1xyz"
   }
 }

routes/apiRoutes-stripe.js

@@ -1,39 +1,33 @@
-var stripe = require("stripe")("pk_test_3kQuYbD9iDbwfdk6squr49KV");
-
-// module.exports = function (app) {
-
-//     app.post("/charge", function(req, res) {
-//         const token = req.body.stripeToken; 
-//         stripe.charges.create({
-//             amount: req.body.amount,
-//             currency: req.body.currency,
-//             description: req.body.description,
-//             source: token,
-//           }).then(function (data) {
-
-//             res.json(data);
-//         });
-//     });
-//     };
-
-// var stripe = require("stripe")("sk_test_4eC39HqLyjWDarjtT1zdp7dc");
-// app.post("api/charge", function(req, res) {
-
-// const token = request.body.stripeToken; 
-
-
-// stripe.charges.create({
-//     amount: 10,
-//     currency: 'usd',
-//     customer: customer.id,
-//     source: token
-// }, function(err, charge) {
-//     if (err) {
-//         console.log(err);
-//     } else {
-//         console.log("successful charge")
-//     }
-// });
-
-
-
+var env = process.env.NODE_ENV || "development";
+var { secret } = require('../config/config.json').stripe
+var stripe = require('stripe')(secret)
+
+module.exports = function(app) {
+  // creates charge on stripe
+  app.post("/api/charge", function(req, res) {
+    var source = req.body.source
+    var { amount, currency, description } = req.body.product
+
+    stripe.charges.create({
+      description,
+      amount,
+      currency,
+      source
+    }, function(err, charge) {
+      if (err) {
+        var data = {
+          err: `Payment Failed`
+        }
+        res.status(409).json(data);
+        console.log('Error occured during the payment', err)
+      } else {
+        var data = {
+          success: `Payment has been completed`
+        }
+        res.json(data);
+        console.log('Payment has been completed!')
+      }
+    });
+  });
+
+};

routes/htmlRoutes.js

@@ -55,6 +55,11 @@ module.exports = function(app) {
     res.render("login-signup");
   });
 
+  // Load success page after payment
+  app.get("/paysuccess", function(req, res) {
+    res.render("paysuccess");
+  });
+
   // Render 404 page for any unmatched routes
   app.get("*", function(req, res) {
     res.render("404");

server.js

@@ -32,6 +32,7 @@ app.set("view engine", "handlebars");
 
 // Routes
 require("./routes/apiRoutes-class")(app);
+require("./routes/apiRoutes-stripe")(app);
 require("./routes/apiRoutes-user")(app);
 require("./routes/htmlRoutes")(app);
 

views/class-details.handlebars

@@ -5,19 +5,7 @@
             <!-- Column 1 -->
             <div class="col s12 m6 center">
                 <img src="{{data.photo}}" class="details-photo">
-                <a class="waves-effect waves-light btn-large signup-btn" data-id="{{data.id}}">Sign Up For This Class</a>
-                            <form action="/charge" method="POST">
-  <script
-    src="https://checkout.stripe.com/checkout.js" data-id="{{data.id}}" class="stripe-button"
-    data-key="pk_test_3kQuYbD9iDbwfdk6squr49KV"
-    data-amount="{{data.price}}"
-    data-name="classUp.com"
-    data-description="charge for {{data.title}}"
-    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
-    data-locale="auto"
-    data-zip-code="true">
-  </script>
-</form>
+                <a id="paymentButton" class="waves-effect waves-light btn-large signup-btn">Sign Up For This Class</a>
             </div>
             <!-- Column 2 -->
             <div class="col s12 m6">
@@ -52,4 +40,51 @@
             </div>
         </div>
     </div>
-</div>
+</div>
+
+<script>
+  var handler = StripeCheckout.configure({
+    key: 'pk_test_drOZ8fjels9TRp9id5EdnO0Y',
+    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
+    locale: 'auto',
+    token: function(token) {
+      $.ajax({
+        type: "POST",
+        url: "/api/charge",
+        contentType: "application/json",
+        dataType: "json",
+        data: JSON.stringify({
+          source: token.id,
+          product: {
+            amount: {{data.price}} * 100,
+        currency: 'usd',
+        description: `{{data.description}}`,
+    }
+    }),
+      success: function(data, textStatus, jqXHR) {
+        window.location = "/paysuccess";
+      },
+      error: function(jqXHR, textStatus, errorThrown) {
+        var errorMessage = jqXHR.responseJSON.err
+      }
+    })
+      // You can access the token ID with `token.id`.
+      // Get the token ID to your server-side code for use.
+    }
+  });
+
+  document.getElementById('paymentButton').addEventListener('click', function(e) {
+    // Open Checkout with further options:
+    handler.open({
+      name: `{{data.title}}`,
+      description: `{{data.description}}`,
+      amount: {{data.price}} * 100
+  });
+    e.preventDefault();
+  });
+
+  // Close Checkout on page navigation:
+  window.addEventListener('popstate', function() {
+    handler.close();
+  });
+</script>

views/layouts/main.handlebars

@@ -21,6 +21,7 @@
     crossorigin="anonymous"></script>
   <!-- Materialize JS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
+  <script src="https://checkout.stripe.com/checkout.js"></script>
 </head>
 
 <body>
@@ -58,9 +59,9 @@
   </footer>
 
   <!-- JS -->
-  <script src="js/class.js"></script>
-  <script src="js/script.js"></script>
-  <script src="js/user.js"></script>
+  <script src="/js/class.js"></script>
+  <script src="/js/script.js"></script>
+  <script src="/js/user.js"></script>
 </body>
 
 </html>

views/paysuccess.handlebars

@@ -0,0 +1,15 @@
+<!-- Payment Success -->
+<div class="container">
+    <div class="section">
+        <div class="row">
+            <div class="col s12 center">
+                <h4 class="comfortaa bold">Your order has been completed!</h4>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col s12 center">
+                <p>The payment was successful, you can <a href="/login-signup">login here</a> to view your classes</p>
+            </div>
+        </div>
+    </div>
+</div>