move the strip elements js into a component

assets/javascripts/discourse/components/stripe-card.js.es6

@@ -0,0 +1,29 @@
+export default Ember.Component.extend({
+  stripe: Stripe('pk_test_b8RmhzlL8QPizJRqOrKF3JEV'),
+  card: function() {
+    var elements = this.get('stripe').elements();
+    return elements.create('card', { hidePostalCode: true });
+  }.property('stripe'),
+
+  didInsertElement() {
+    this.get('card').mount('#stripe-card');
+  },
+
+  actions: {
+    submitStripeCard() {
+      this.get('stripe').createToken(this.get('card')).then(function(result) {
+        if (result.error) {
+          console.log('error yo');
+        }
+        else {
+          var form = document.getElementById('stripe-card');
+          var hiddenInput = document.createElement('input');
+          // hiddenInput.setAttribute('type', 'hidden');
+          hiddenInput.setAttribute('name', 'stripeToken');
+          hiddenInput.setAttribute('value', result.token.id);
+          form.appendChild(hiddenInput);
+        }
+      });
+    }
+  }
+});

assets/javascripts/discourse/templates/components/stripe-card.hbs

@@ -0,0 +1,5 @@
+<div id="stripe-card"></div>
+
+<button class='btn btn-primary payment-btn' {{action "submitStripeCard"}}>
+  make payment
+</button>

assets/javascripts/discourse/templates/user/payments.hbs

@@ -1,83 +1,5 @@
 
-<!--
-<div class="payments">
-  {{username}}
-</div>
-
-<button class='btn btn-primary payment-btn' {{action "makePayment"}}>
-  make payment
-</button>
-
-{{#if saved}}
-  <div class="payment-response">Response happens</div>
-{{/if}}
--->
-
 
-<form action="/charges" method="post" id="payment-form" style="width: 300px;">
+<h2>Payments</h2>
-  <div class="form-row">
-   <label>
-      <span>Card</span>
-      <div id="card-element">
-        <!-- a Stripe Element will be inserted here. -->
-      </div>
-    </label>
-  </div>
 
-  <div id="payment-errors"></div>
+{{stripe-card}}
-
-  <input type="submit" class="submit" value="Submit Payment">
-</form>
-
-
-<script>
-
-  $(document).ready(function() {
-    var stripe = Stripe('pk_test_b8RmhzlL8QPizJRqOrKF3JEV');
-    var elements = stripe.elements();
-
-    var card = elements.create('card');
-
-    // Add an instance of the card Element into the `card-element`
-    card.mount('#card-element');
-
-    card.addEventListener('change', function(event) {
-      var displayError = document.getElementById('payment-errors');
-      if (event.error) {
-        displayError.textContent = event.error.message;
-      }
-    });
-
-
-    // Create a token or display an error the form is submitted.
-    var form = document.getElementById('payment-form');
-    form.addEventListener('submit', function(event) {
-      event.preventDefault();
-
-      stripe.createToken(card).then(function(result) {
-        if (result.error) {
-          // Inform the user if there was an error
-          var errorElement = document.getElementById('payment-errors');
-          errorElement.textContent = result.error.message;
-        } else {
-          // Send the token to your server
-          stripeTokenHandler(result.token);
-        }
-      });
-    });
-
-    function stripeTokenHandler(token) {
-      // Insert the token ID into the form so it gets submitted to the server
-      var form = document.getElementById('payment-form');
-      var hiddenInput = document.createElement('input');
-      hiddenInput.setAttribute('type', 'hidden');
-      hiddenInput.setAttribute('name', 'stripeToken');
-      hiddenInput.setAttribute('value', token.id);
-      form.appendChild(hiddenInput);
-
-      form.submit();
-    }
-
-  });
-
-</script>