validate billing
This commit is contained in:
parent
b60244e809
commit
ba73e688f2
14
README.md
14
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.
|
||||
|
|
|
@ -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 => {
|
||||
|
|
|
@ -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'}}
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue