Merge pull request #9 from chrisbeach/transaction_fee
Add ability to allow donor to include stripe transaction fee in their donation
This commit is contained in:
commit
96b09333ad
|
@ -1,5 +1,6 @@
|
||||||
import { ajax } from 'discourse/lib/ajax';
|
import { ajax } from 'discourse/lib/ajax';
|
||||||
import { getRegister } from 'discourse-common/lib/get-owner';
|
import { getRegister } from 'discourse-common/lib/get-owner';
|
||||||
|
import { default as computed } from 'ember-addons/ember-computed-decorators';
|
||||||
|
|
||||||
export default Ember.Component.extend({
|
export default Ember.Component.extend({
|
||||||
donateAmounts: [
|
donateAmounts: [
|
||||||
|
@ -15,6 +16,7 @@ export default Ember.Component.extend({
|
||||||
stripe: null,
|
stripe: null,
|
||||||
transactionInProgress: null,
|
transactionInProgress: null,
|
||||||
settings: null,
|
settings: null,
|
||||||
|
showTransactionFeeDescription: false,
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
this._super();
|
this._super();
|
||||||
|
@ -24,12 +26,27 @@ export default Ember.Component.extend({
|
||||||
this.set('stripe', Stripe(this.get('settings').discourse_donations_public_key));
|
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', {
|
return elements.create('card', {
|
||||||
hidePostalCode: !this.get('settings').discourse_donations_zip_code
|
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() {
|
didInsertElement() {
|
||||||
this._super();
|
this._super();
|
||||||
|
@ -49,24 +66,25 @@ export default Ember.Component.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
|
toggleTransactionFeeDescription() {
|
||||||
|
this.toggleProperty('showTransactionFeeDescription');
|
||||||
|
},
|
||||||
|
|
||||||
submitStripeCard() {
|
submitStripeCard() {
|
||||||
let self = this;
|
let self = this;
|
||||||
|
|
||||||
self.set('transactionInProgress', true);
|
self.set('transactionInProgress', true);
|
||||||
|
|
||||||
this.get('stripe').createToken(this.get('card')).then(data => {
|
this.get('stripe').createToken(this.get('card')).then(data => {
|
||||||
|
|
||||||
self.set('result', []);
|
self.set('result', []);
|
||||||
|
|
||||||
if (data.error) {
|
if (data.error) {
|
||||||
self.set('result', data.error.message);
|
self.set('result', data.error.message);
|
||||||
self.endTranscation();
|
self.endTranscation();
|
||||||
}
|
} else {
|
||||||
else {
|
const transactionFeeEnabled = Discourse.SiteSettings.discourse_donations_enable_transaction_fee;
|
||||||
|
const amount = transactionFeeEnabled ? this.get('totalAmount') : this.get('amount');
|
||||||
let params = {
|
let params = {
|
||||||
stripeToken: data.token.id,
|
stripeToken: data.token.id,
|
||||||
amount: self.get('amount') * 100,
|
amount: amount * 100,
|
||||||
user_id: self.get('currentUser.id'),
|
|
||||||
email: self.get('email'),
|
email: self.get('email'),
|
||||||
username: self.get('username'),
|
username: self.get('username'),
|
||||||
create_account: self.get('create_accounts')
|
create_account: self.get('create_accounts')
|
||||||
|
|
|
@ -10,6 +10,32 @@
|
||||||
</div>
|
</div>
|
||||||
</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;">
|
<div class="control-group" style="width: 550px;">
|
||||||
<label class="control-label" for="card-element">{{i18n 'discourse_donations.card'}}</label>
|
<label class="control-label" for="card-element">{{i18n 'discourse_donations.card'}}</label>
|
||||||
<div id="card-element" class="controls"></div>
|
<div id="card-element" class="controls"></div>
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -12,6 +12,9 @@ en:
|
||||||
discourse_donations_reward_badge_name: "Grant this badge to user when a payment is successful"
|
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_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_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:
|
js:
|
||||||
discourse_donations:
|
discourse_donations:
|
||||||
|
@ -21,5 +24,9 @@ en:
|
||||||
card: Credit or debit card
|
card: Credit or debit card
|
||||||
submit: Make Payment
|
submit: Make Payment
|
||||||
submit_with_create_account: Make Payment and Create Account
|
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:
|
messages:
|
||||||
success: Thank you for your donation!
|
success: Thank you for your donation!
|
||||||
|
|
|
@ -35,3 +35,12 @@ plugins:
|
||||||
discourse_donations_page_description:
|
discourse_donations_page_description:
|
||||||
client: true
|
client: true
|
||||||
default: ''
|
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
|
||||||
|
|
|
@ -8,7 +8,7 @@ gem 'stripe', '2.8.0'
|
||||||
|
|
||||||
load File.expand_path('../lib/discourse_donations/engine.rb', __FILE__)
|
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
|
enabled_site_setting :discourse_donations_enabled
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue