From 788527154d9a644a7253ea47ff50cd04032d1e8f Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brian@Brians-MBP.local>
Date: Thu, 26 Oct 2017 09:57:56 -0700
Subject: [PATCH 1/2] use stripejs to tokenize cards

---
 src/index.html |   6 +++
 src/js/app.js  | 116 ++++++++++++++++++++++++++++++-------------------
 2 files changed, 78 insertions(+), 44 deletions(-)

diff --git a/src/index.html b/src/index.html
index fd2abe5..4a6a57d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,5 +21,11 @@
 	<script data-main="js/main.js" src="js/vendor/requirejs/require.js"></script>
 
 	<script src="//localhost:35724/livereload.js"></script>
+
+	<!-- Stripe JS v2 using Celery publishable key -->
+	<script src="https://js.stripe.com/v2/"></script>
+	<script>
+		Stripe.setPublishableKey('pk_mbqX6nrqdVLalm1tUwOxX3XGuMlz6');
+	</script>
 </body>
 </html>
diff --git a/src/js/app.js b/src/js/app.js
index 6be0b73..be0d297 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -156,9 +156,9 @@ define(function(require) {
     },
 
     createOrder: function() {
-      var order = this._generateOrder();
-
-      celeryClient.createOrder(order, this.handleOrder);
+      this._generateOrder(function(order) {
+        celeryClient.createOrder(order, this.handleOrder);
+      }.bind(this));
     },
 
     handleOrder: function(err, res) {
@@ -275,63 +275,91 @@ define(function(require) {
       this.$form.find('.Celery-OrderSummary-price--total').text(total);
     },
 
-    _generateOrder: function() {
-      var $form = this.$form;
-      var order = {
-        buyer: {},
-        shipping_address: {},
-        line_items: [],
-        payment_source: {
-          card: {
-            number: '',
-            exp_month: '',
-            exp_year: '',
-            cvc: ''
+    _generateOrder: function(callback) {
+      this._createStripeToken(this._getCard(), function(err, token) {
+        if (err) {
+          return this.handleError(err);
+        }
+
+        var order = {
+          buyer: {},
+          shipping_address: {},
+          line_items: [],
+          payment_source: {
+            card: {
+              stripe_token: '',
+            }
           }
+        };
+
+        // Set stripe token
+        if (token) {
+          order.payment_source.card.stripe_token = token.id;
         }
-      };
 
-      order.user_id = shop.data.user_id;
-      order.buyer.email = this._getFieldValue('email');
+        order.user_id = shop.data.user_id;
+        order.buyer.email = this._getFieldValue('email');
+
+        // Set shipping
+        order.shipping_address.country = this._getCountry();
 
-      // Card
-      var card = order.payment_source.card;
+        // Set taxes
+        if (config.features.taxes) {
+          order.shipping_address.zip = this._getZip();
+        }
 
-      card.number = this._getFieldValue('card_number');
-      card.cvc = this._getFieldValue('cvc');
+        // Set coupon
+        if (config.features.coupons) {
+          var couponCode = this._getCouponCode();
 
-      // Card Expiry
-      var expiry = this._getFieldValue('expiry');
-      var expiryParts = expiry.split('/');
+          if (couponCode) {
+            order.discount_codes = [couponCode];
+          }
+        }
 
-      card.exp_month = expiryParts[0].trim();
-      card.exp_year = expiryParts[1].trim();
+        // Set line item
+        var lineItem = {
+          product_id: shop.data.product._id,
+          quantity: this._getQuantity()
+        };
 
-      // Shipping
-      order.shipping_address.country = this._getCountry();
+        order.line_items.push(lineItem);
 
-      if (config.features.taxes) {
-        order.shipping_address.zip = this._getZip();
+        return callback(order)
+      }.bind(this));
+    },
+
+    _getCard: function() {
+      if (this._getTotal() === 0) {
+        return null;
       }
 
-      // Coupon
-      if (config.features.coupons) {
-        var couponCode = this._getCouponCode();
+      // Card Expiry
+      var expiry = this._getFieldValue('expiry');
+      var expiryParts = expiry.split('/');
 
-        if (couponCode) {
-          order.discount_codes = [couponCode];
-        }
+      return {
+        number: this._getFieldValue('card_number'),
+        cvc: this._getFieldValue('cvc'),
+        exp_month: expiryParts[0].trim(),
+        exp_year: expiryParts[1].trim(),
       }
+    },
 
-      // Line Item
-      var lineItem = {
-        product_id: shop.data.product._id,
-        quantity: this._getQuantity()
-      };
+    _createStripeToken: function(card, callback) {
+      var Stripe = window.Stripe || {};
 
-      order.line_items.push(lineItem);
+      if (!card) {
+        return callback(null, null);
+      }
 
-      return order;
+      Stripe.card.createToken(card, function(status, response) {
+        if (response.error) {
+          return callback(response.error);
+        }
+
+        return callback(null, response);
+      });
     },
 
     _getDiscount: function() {

From aff7eadac7388947cd59dc3ae6ffc9432475d102 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brian@Brians-MBP.local>
Date: Thu, 26 Oct 2017 10:20:46 -0700
Subject: [PATCH 2/2] include billing zip

---
 src/js/app.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/js/app.js b/src/js/app.js
index be0d297..1373f47 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -343,6 +343,7 @@ define(function(require) {
         cvc: this._getFieldValue('cvc'),
         exp_month: expiryParts[0].trim(),
         exp_year: expiryParts[1].trim(),
+        address_zip: this._getFieldValue('billing_zip'),
       }
     },