validate billing

README.md

@@ -32,3 +32,17 @@ This software comes without warranties or conditions of any kind.
 ## Credits
 
 Many thanks to Chris Beach and Angus McLeod who helped on the previous version of this plugin.
+
+## Known issues
+
+* CSS is mucked up in Safari and probably Firefox too.
+* The phone number isn't sent to Stripe
+
+## TODOs
+
+* Add a description/message
+* Format the currency
+* Check against other themes
+* Add billing info to confirm dialog
+* Validate the model properly. Not in the stripe component
+* Show the transaction on the thank you page.

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

@@ -41,9 +41,21 @@ export default Ember.Component.extend({
     });
   },
 
+  validateBilling() {
+    const billing = this.get('billing');
+    const deleteEmpty = (key) => {
+      if(Ember.isEmpty(billing.get(key))) {
+        billing.set(key, undefined);
+      }
+    }
+    ['name', 'phone', 'email'].forEach((key) => deleteEmpty(key));
+  },
+
   actions: {
     submitStripeCard() {
-      const paymentOptions = { billing_details: this.get("billing") };
+      this.validateBilling();
+
+      const paymentOptions = { billing_details: this.get('billing') };
 
       this.stripe.createPaymentMethod("card", this.card, paymentOptions).then(
         result => {

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

@@ -34,13 +34,14 @@
     <div class="section-column">
       <h3>{{i18n 'discourse_patrons.payment.your_information'}}</h3>
 
-      <div class="user-controls discource-patrons-fields">
+      <div class="user-controls discourse-patrons-fields discourse-patrons-billing">
         <div class="display-row">
           <div class="field">
             {{i18n 'discourse_patrons.billing.name'}}
           </div>
           <div class="value">
             {{input value=billing.name}}
+            <div class="desc">{{i18n 'discourse_patrons.payment.optional'}}</div>
           </div>
         </div>
         <div class="display-row">
@@ -49,6 +50,7 @@
           </div>
           <div class="value">
             {{input type="email" value=billing.email}}
+            <div class="desc">{{i18n 'discourse_patrons.payment.optional'}}</div>
           </div>
         </div>
         <div class="display-row">
@@ -57,6 +59,7 @@
           </div>
           <div class="value">
             {{input value=billing.phone}}
+            <div class="desc">{{i18n 'discourse_patrons.payment.optional'}}</div>
           </div>
         </div>
       </div>
@@ -65,7 +68,7 @@
     <div class="section-column">
       <h3>{{i18n 'discourse_patrons.payment.payment_information'}}</h3>
 
-      <div class="user-controls discource-patrons-fields">
+      <div class="user-controls discourse-patrons-fields">
         <div class="display-row">
           <div class="field">
             {{i18n 'discourse_patrons.amount'}}

assets/stylesheets/common/discourse-patrons.scss

@@ -32,6 +32,11 @@
   }
 }
 
+.desc {
+  color: dark-light-choose($primary-medium, $secondary-medium);
+  font-size: 0.8em;
+}
+
 #stripe-elements {
   border: 1px $primary-low-mid solid;
   padding: 10px;
@@ -46,9 +51,18 @@
   padding: 20px;
   border: 1px $primary-low-mid solid;
   background-color: $primary-low;
+
+  .discourse-patrons-billing {
+    .ember-text-field {
+      margin-bottom: 0;
+    }
+    .field {
+      margin-bottom: 10px;
+    }
+  }
 }
 
-.discource-patrons-fields {
+.discourse-patrons-fields {
   .field {
     width: 25%;
   }

config/locales/client.en.yml

@@ -18,6 +18,7 @@ en:
         payment: Make a Payment
         success: Thank you!
       payment:
+        optional: Optional
         your_information: Your information
         payment_information: Payment information
       amount: Amount