wrap elements in template framework and some i18n implementation

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

@@ -1,12 +1,17 @@
-<form id="payment-form">
+<form id="payment-form" class="form-horizontal">
-  <div>
+
-    <label for="card-element">Credit or debit card</label>
+  <div class="control-group">
-    <div id="card-element"></div>
+    <label class="control-label" for="card-element">Credit or debit card</label>
+    <div id="card-element" class="controls"></div>
   </div>
 
-  <button {{action "submitStripeCard"}}>Submit Payment</button>
+  <div class="control-group save-button">
+    <div class="controls">
+      <button {{action "submitStripeCard"}} class="btn btn-primary">{{i18n 'discourse_payments.submit'}}</button>
+    </div>
+  </div>
 
   {{#if result}}
-    <div class="stripe-card-result">payment happened</div>
+    <span>{{i18n 'discourse_payments.success'}}</span>
   {{/if}}
 </form>

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

@@ -1,5 +1,4 @@
-
+{{#d-section pageClass="stripe-payments"}}
-
+  <h2>{{i18n 'discourse_payments.title'}}</h2>
-<h2>Payments</h2>
+  {{stripe-card}}
-
+{{/d-section}}
-{{stripe-card}}

config/locales/client.en.yml

@@ -1,3 +1,6 @@
 en:
   js:
     discourse_payments:
+      title: Donate
+      success: Payment Successful
+      submit: Make Payment

plugin.rb

@@ -1,6 +1,6 @@
 # name: discourse-payments
 # about: Integrating Discourse with Stripe
-# version: 1.3.0
+# version: 1.3.1
 # url: https://github.com/choiceaustralia/discourse-payments
 # authors: Rimian Perkins