validate billing

This commit is contained in:
Rimian Perkins 2019-09-12 17:47:08 +10:00
parent b60244e809
commit ba73e688f2
5 changed files with 48 additions and 4 deletions

View File

@ -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.

View File

@ -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 => {

View File

@ -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'}}

View File

@ -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%;
}

View File

@ -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