diff --git a/assets/javascripts/discourse/components/stripe-card.js.es6 b/assets/javascripts/discourse/components/stripe-card.js.es6 index d37a456..d1c7235 100644 --- a/assets/javascripts/discourse/components/stripe-card.js.es6 +++ b/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() { - let elements = this.get('stripe').elements(); + @computed('stripe') + 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') diff --git a/assets/javascripts/discourse/templates/components/stripe-card.hbs b/assets/javascripts/discourse/templates/components/stripe-card.hbs index c9a8405..d3fd676 100644 --- a/assets/javascripts/discourse/templates/components/stripe-card.hbs +++ b/assets/javascripts/discourse/templates/components/stripe-card.hbs @@ -10,6 +10,32 @@ + {{#if siteSettings.discourse_donations_enable_transaction_fee}} +
+
+ {{input type="checkbox" checked=includeTransactionFee}} + {{i18n 'discourse_donations.transaction_fee.label' transactionFee=transactionFee currency=settings.discourse_donations_currency}} +
+ {{d-icon 'info-circle'}} + {{#if showTransactionFeeDescription}} +
+ {{i18n 'discourse_donations.transaction_fee.description'}} +
+ {{/if}} +
+
+
+
+ +
+ {{settings.discourse_donations_currency}} + {{totalAmount}} +
+
+ {{/if}} +
diff --git a/assets/stylesheets/discourse-donations.css b/assets/stylesheets/discourse-donations.css deleted file mode 100644 index cba7fdb..0000000 --- a/assets/stylesheets/discourse-donations.css +++ /dev/null @@ -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; -} diff --git a/assets/stylesheets/discourse-donations.scss b/assets/stylesheets/discourse-donations.scss new file mode 100644 index 0000000..dcbe614 --- /dev/null +++ b/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; +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index ecebbc2..3ffc827 100644 --- a/config/locales/client.en.yml +++ b/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 Stripe's pricing for your region and Stripe's explaination of passing fees onto customers." + discourse_donations_transaction_fee_percent: "Percent part of Stripe transaction fee (changes per region). See Stripe's pricing for your region and Stripe's explaination of passing fees onto customers." 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! diff --git a/config/settings.yml b/config/settings.yml index ff65a05..340ff38 100644 --- a/config/settings.yml +++ b/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 diff --git a/plugin.rb b/plugin.rb index e556726..f698fd4 100644 --- a/plugin.rb +++ b/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