Add ability to allow donor to include stripe transaction fee in their donation

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

@@ -1,5 +1,6 @@
 import { ajax } from 'discourse/lib/ajax';
 import { getRegister } from 'discourse-common/lib/get-owner';
+import { default as computed } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
   donateAmounts: [
@@ -15,6 +16,7 @@ export default Ember.Component.extend({
   stripe: null,
   transactionInProgress: null,
   settings: null,
+  showTransactionFeeDescription: false,
 
   init() {
     this._super();
@@ -24,12 +26,27 @@ export default Ember.Component.extend({
     this.set('stripe', Stripe(this.get('settings').discourse_donations_public_key));
   },
 
-  card: function() {
+  @computed('stripe')
-    let elements = this.get('stripe').elements();
+  card(stripe) {
+    let elements = stripe.elements();
     return elements.create('card', {
       hidePostalCode: !this.get('settings').discourse_donations_zip_code
     });
-  }.property('stripe'),
+  },
+
+  @computed('amount')
+  transactionFee(amount) {
+    const fixed = Discourse.SiteSettings.discourse_donations_transaction_fee_fixed;
+    const percent = Discourse.SiteSettings.discourse_donations_transaction_fee_percent;
+    const fee = ((amount + fixed)  /  (1 - percent)) - amount;
+    return Math.round(fee * 100) / 100;
+  },
+
+  @computed('amount', 'transactionFee', 'includeTransactionFee')
+  totalAmount(amount, fee, include) {
+    if (include) return amount + fee;
+    return amount;
+  },
 
   didInsertElement() {
     this._super();
@@ -49,24 +66,25 @@ export default Ember.Component.extend({
   },
 
   actions: {
+    toggleTransactionFeeDescription() {
+      this.toggleProperty('showTransactionFeeDescription');
+    },
+
     submitStripeCard() {
       let self = this;
-
       self.set('transactionInProgress', true);
-
       this.get('stripe').createToken(this.get('card')).then(data => {
-
         self.set('result', []);
 
         if (data.error) {
           self.set('result', data.error.message);
           self.endTranscation();
-        }
+        } else {
-        else {
+          const transactionFeeEnabled = Discourse.SiteSettings.discourse_donations_enable_transaction_fee;
-
+          const amount = transactionFeeEnabled ? this.get('totalAmount') : this.get('amount');
           let params = {
             stripeToken: data.token.id,
-            amount: self.get('amount') * 100,
+            amount: amount * 100,
             email: self.get('email'),
             username: self.get('username'),
             create_account: self.get('create_accounts')

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

@@ -10,6 +10,32 @@
     </div>
   </div>
 
+  {{#if siteSettings.discourse_donations_enable_transaction_fee}}
+    <div class="control-group">
+      <div class="controls">
+        {{input type="checkbox" checked=includeTransactionFee}}
+        {{i18n 'discourse_donations.transaction_fee.label' transactionFee=transactionFee currency=settings.discourse_donations_currency}}
+        <div class='transaction-fee-description' {{action 'toggleTransactionFeeDescription'}}>
+          {{d-icon 'info-circle'}}
+          {{#if showTransactionFeeDescription}}
+            <div class="transaction-fee-description-modal">
+              {{i18n 'discourse_donations.transaction_fee.description'}}
+            </div>
+          {{/if}}
+        </div>
+      </div>
+    </div>
+    <div class="control-group">
+      <label class='control-label'>
+        {{i18n 'discourse_donations.transaction_fee.total'}}
+      </label>
+      <div class="controls">
+        {{settings.discourse_donations_currency}}
+        {{totalAmount}}
+      </div>
+    </div>
+  {{/if}}
+
   <div class="control-group" style="width: 550px;">
     <label class="control-label" for="card-element">{{i18n 'discourse_donations.card'}}</label>
     <div id="card-element" class="controls"></div>

assets/stylesheets/discourse-donations.css

@@ -1,17 +0,0 @@
-div.stripe-errors {
-  border: 1px solid #c33;
-  border-radius: 5px;
-  color: #600;
-  background-color: #fdd;
-  padding: 5px 10px;
-}
-
-.donations-page-description {
-  max-width: 700px;
-  font-size: 1.1em;
-  line-height: 24px;
-}
-
-.donations-page-payment {
-  padding-top: 60px;
-}

assets/stylesheets/discourse-donations.scss

@@ -0,0 +1,37 @@
+div.stripe-errors {
+  border: 1px solid #c33;
+  border-radius: 5px;
+  color: #600;
+  background-color: #fdd;
+  padding: 5px 10px;
+}
+
+.donations-page-description {
+  max-width: 700px;
+  font-size: 1.1em;
+  line-height: 24px;
+}
+
+.donations-page-payment {
+  padding-top: 60px;
+}
+
+.transaction-fee-description {
+  position: relative;
+  display: inline-block;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.transaction-fee-description-modal {
+  display: block;
+  position: absolute;
+  top: -30px;
+  left: 20px;
+  background-color: $secondary;
+  border: 1px solid $primary-low;
+  padding: 10px;
+  box-shadow: 0 2px 2px rgba(0,0,0,0.4);
+  width: 400px;
+  z-index: 1;
+}

config/locales/client.en.yml

@@ -12,6 +12,9 @@ en:
     discourse_donations_reward_badge_name: "Grant this badge to user when a payment is successful"
     discourse_donations_reward_group_name: "Add the user to this group when a payment is successful"
     discourse_donations_page_description: "Text to be added to /donate page. Markdown is supported."
+    discourse_donations_enable_transaction_fee: "Give the user the option of including the Stripe transaction fee in their donation."
+    discourse_donations_transaction_fee_fixed: "Fixed part of Stripe transaction fee (changes per region). See <a href='https://stripe.com/pricing'>Stripe's pricing for your region</a> and <a href='https://support.stripe.com/questions/can-i-charge-my-stripe-fees-to-my-customers'>Stripe's explaination of passing fees onto customers</a>."
+    discourse_donations_transaction_fee_percent: "Percent part of Stripe transaction fee (changes per region). See <a href='https://stripe.com/pricing'>Stripe's pricing for your region</a> and <a href='https://support.stripe.com/questions/can-i-charge-my-stripe-fees-to-my-customers'>Stripe's explaination of passing fees onto customers</a>."
 
   js:
     discourse_donations:
@@ -21,5 +24,9 @@ en:
       card: Credit or debit card
       submit: Make Payment
       submit_with_create_account: Make Payment and Create Account
+      transaction_fee:
+        label: "Include transaction fee of {{currency}} {{transactionFee}}"
+        description: "When you make a donation we get charged a transaciton fee. If you would like to help us out with this fee, check this box and it will be included in your donation."
+        total: "Total"
       messages:
         success: Thank you for your donation!

config/settings.yml

@@ -35,3 +35,12 @@ plugins:
   discourse_donations_page_description:
     client: true
     default: ''
+  discourse_donations_enable_transaction_fee:
+    client: true
+    default: false
+  discourse_donations_transaction_fee_fixed:
+    client: true
+    default: 0.3
+  discourse_donations_transaction_fee_percent:
+    client: true
+    default: 0.029

plugin.rb

@@ -8,7 +8,7 @@ gem 'stripe', '2.8.0'
 
 load File.expand_path('../lib/discourse_donations/engine.rb', __FILE__)
 
-register_asset "stylesheets/discourse-donations.css"
+register_asset "stylesheets/discourse-donations.scss"
 
 enabled_site_setting :discourse_donations_enabled