add spinner and use button template

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

@@ -6,6 +6,7 @@ export default Ember.Component.extend({
   result: null,
   amount: null,
   stripe: null,
+  transactionInProgress: null,
 
   init() {
     this._super();
@@ -32,17 +33,18 @@ export default Ember.Component.extend({
         self.set('result', null);
 
         if (result.error) {
-          console.log('error yo');
+          console.log(result.error);
         }
         else {
+          self.set('transactionInProgress', true);
+
           var params = {
             stripeToken: result.token.id,
             amount: self.get('amount') * 100
           };
 
-          console.log(params);
-
           ajax('/charges', { data: params, method: 'post' }).then(data => {
+            self.set('transactionInProgress', false);
             self.set('result', (data.status == 'succeeded' ? true : null));
           }).catch((data) => {
             console.log('catch', data);

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

@@ -14,7 +14,14 @@
 
   <div class="control-group save-button">
     <div class="controls">
-      <button {{action "submitStripeCard"}} class="btn btn-primary">{{i18n 'discourse_donations.submit'}}</button>
+      {{#d-button action="submitStripeCard" class="btn btn-primary btn-payment"}}
+        {{i18n 'discourse_donations.submit'}}
+      {{/d-button}}
+
+      {{#if transactionInProgress}}
+        {{loading-spinner size="small"}}
+      {{/if}}
+
       {{#if result}}
         <span>{{i18n 'discourse_donations.success'}}</span>
       {{/if}}

plugin.rb

@@ -1,6 +1,6 @@
 # name: discourse-donations
 # about: Integrating Discourse with Stripe for donations
-# version: 1.7.1
+# version: 1.7.2
 # url: https://github.com/choiceaustralia/discourse-donations
 # authors: Rimian Perkins