forms and settings

assets/javascripts/discourse/templates/components/donation-form.hbs

@@ -16,7 +16,7 @@
     {{/d-modal-body}}
 
     <div class='modal-footer'>
-      {{#d-button action="confirmStripeCard" class="btn btn-primary btn-payment"}}
+      {{#d-button action="confirmStripeCard" class="btn btn-primary btn-payment btn-discourse-patrons"}}
         {{i18n 'discourse_patrons.submit'}} {{amount}}
       {{/d-button}}
     </div>
@@ -35,15 +35,6 @@
       <h3>{{i18n 'discourse_patrons.your_information'}}</h3>
 
       <div class="user-controls discource-patrons-fields">
-        <div class="display-row">
-          <div class="field">
-            {{i18n 'discourse_patrons.amount'}}
-            {{siteSettings.discourse_patrons_currency}}
-          </div>
-          <div class="value">
-            {{combo-box valueAttribute="value" content=amounts value=amount}}
-          </div>
-        </div>
         <div class="display-row">
           <div class="field">
             {{i18n 'discourse_patrons.billing.name'}}
@@ -57,7 +48,7 @@
             {{i18n 'discourse_patrons.billing.email'}}
           </div>
           <div class="value">
-            {{input value=billing.email}}
+            {{input type="email" value=billing.email}}
           </div>
         </div>
         <div class="display-row">
@@ -72,14 +63,26 @@
 
     </div>
     <div class="section-column">
-      <div style>
-        {{stripe-card
-          amount=amount
-          currency=currency
-          billing=billing
-          handleConfirmStripeCard=(action "handleConfirmStripeCard")
-        }}
+      <h3>{{i18n 'discourse_patrons.payment_information'}}</h3>
+
+      <div class="user-controls discource-patrons-fields">
+        <div class="display-row">
+          <div class="field">
+            {{i18n 'discourse_patrons.amount'}}
+            {{siteSettings.discourse_patrons_currency}}
+          </div>
+          <div class="value">
+            {{combo-box valueAttribute="value" content=amounts value=amount}}
+          </div>
+        </div>
       </div>
+
+      {{stripe-card
+        amount=amount
+        currency=currency
+        billing=billing
+        handleConfirmStripeCard=(action "handleConfirmStripeCard")
+      }}
     </div>
   </div>
 {{/if}}

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

@@ -1,16 +1,15 @@
 
-<h3>{{i18n 'discourse_patrons.payment_information'}}</h3>
+<div id="stripe-elements">
+  <div id="card-element"></div>
+  <div id="card-action">
+    {{#d-button action="submitStripeCard" class="btn btn-primary btn-payment btn-discourse-patrons"}}
+      {{i18n 'discourse_patrons.confirm'}}{{amount}}
+    {{/d-button}}
 
-<div id="card-element"></div>
-
-<div id="card-action">
-  {{#d-button action="submitStripeCard" class="btn btn-primary btn-payment"}}
-    {{i18n 'discourse_patrons.confirm'}}<br>{{amount}}
-  {{/d-button}}
-
-  {{#if cardError}}
-    <div class="popup-tip bad">
-      {{cardError}}
-    </div>
-  {{/if}}
+    {{#if cardError}}
+      <div class="popup-tip bad">
+        {{cardError}}
+      </div>
+    {{/if}}
+  </div>
 </div>

assets/javascripts/discourse/templates/patrons/index.hbs

@@ -1,9 +1,9 @@
 
-<h3>{{i18n 'discourse_patrons.title' site_name=siteSettings.title}}</h3>
+<h3>{{i18n 'discourse_patrons.heading.payment' site_name=siteSettings.title}}</h3>
 
-<div class="donations-page-description">
+<p>
   {{cook-text siteSettings.discourse_patrons_payment_page}}
-</div>
+</p>
 
 <div class="donations-page-payment">
   {{donation-form

assets/javascripts/discourse/templates/patrons/show.hbs

@@ -1,10 +1,10 @@
 
 
-<h3>{{i18n 'discourse_patrons.title' site_name=siteSettings.title}}</h3>
+<h3>{{i18n 'discourse_patrons.heading.success' site_name=siteSettings.title}}</h3>
 
-<div class="donations-page-description">
+<p>
   {{cook-text siteSettings.discourse_patrons_success_page}}
-</div>
+</p>
 
 {{#d-button action="goBack" class="btn btn-primary"}}
   {{i18n 'discourse_patrons.button.success'}}

assets/stylesheets/common/discourse-patrons.scss

@@ -32,6 +32,11 @@
   }
 }
 
+#stripe-elements {
+  border: 1px $primary-low-mid solid;
+  padding: 10px;
+}
+
 #card-element {
   padding: 20px 0;
 }
@@ -60,3 +65,8 @@
     padding: 10px;
   }
 }
+
+.btn-discourse-patrons {
+  white-space: nowrap;
+  border: 1px blue solid;
+}

config/locales/client.en.yml

@@ -10,17 +10,16 @@ en:
     discourse_patrons_success_page: "Text to be added to success page. Markdown is supported."
     discourse_patrons_reward_badge_name: "Grant this badge to user when a payment is successful"
     errors:
-      discourse_patrons_amount_must_be_currency: "Currency amounts must be currencies (eg 1.50)"
+      discourse_patrons_amount_must_be_currency: "Currency amounts must be currencies without dollar symbol (eg 1.50)"
   js:
     discourse_patrons:
       nav_item: Payment
-      title: "Make a Payment"
-      amount: Amount $
-      card: Card
-      your_information: Your information
-      payment_information: Credit card information
-      submit: Make payment $
-      confirm: Confirm payment $
+      heading:
+        payment: Make a Payment
+        success: Thank you!
+      payment:
+        your_information: Your information
+        payment_information: Payment information
       billing:
         name: Full name
         email: Email
@@ -29,4 +28,6 @@ en:
         amount: Amount $
         last4: Card number
       buttons:
+        make_payment: Make payment $
+        confirm_payment: Confirm payment $
         success: Go back