vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

credit payment method

This commit is contained in:
Kyle Spearrin 2019-02-20 20:16:06 -05:00
parent 1f6632146b
commit fb3afbdc76
7 changed files with 48 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit 36e65f08cad6cebdb5b90c88a68360296e8ff2ec
Subproject commit 2b931963cd8dbebdcbdd6a418ac3ef72adb73539

2
src/app/settings/adjust-payment.component.html
View File

@ -1,7 +1,7 @@
<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
<div class="card-body">
<h3 class="card-body-header">{{(currentType != null ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}</h3>
<app-payment [hideBank]="!organizationId"></app-payment>
<app-payment [hideBank]="!organizationId" [hideCredit]="true"></app-payment>
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
<span>{{'submit' | i18n}}</span>

2
src/app/settings/create-organization.component.html
View File

@ -183,7 +183,7 @@
</div>
<small class="text-muted font-italic">{{'paymentChargedWithTrial' | i18n : (interval | i18n) }}</small>
<h2 class="spaced-header mb-4">{{'paymentInformation' | i18n}}</h2>
<app-payment></app-payment>
<app-payment [hideCredit]="true"></app-payment>
</ng-container>
<div [ngClass]="{'mt-4': plans[plan].noPayment}">
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">

32
src/app/settings/payment.component.html
View File

@ -1,21 +1,26 @@
<div class="mb-4 text-lg" *ngIf="showOptions">
<div class="form-check form-check-inline mr-4">
<input class="form-check-input" type="radio" name="Method" id="method-card" value="card" [(ngModel)]="method" (change)="changeMethod()">
<input class="form-check-input" type="radio" name="Method" id="method-card" [value]="paymentMethodType.Card" [(ngModel)]="method" (change)="changeMethod()">
<label class="form-check-label" for="method-card">
<i class="fa fa-fw fa-credit-card"></i> {{'creditCard' | i18n}}</label>
</div>
<div class="form-check form-check-inline mr-4" *ngIf="!hideBank">
<input class="form-check-input" type="radio" name="Method" id="method-bank" value="bank" [(ngModel)]="method" (change)="changeMethod()">
<input class="form-check-input" type="radio" name="Method" id="method-bank" [value]="paymentMethodType.BankAccount" [(ngModel)]="method" (change)="changeMethod()">
<label class="form-check-label" for="method-bank">
<i class="fa fa-fw fa-university"></i> {{'bankAccount' | i18n}}</label>
</div>
<div class="form-check form-check-inline" *ngIf="!hidePaypal">
<input class="form-check-input" type="radio" name="Method" id="method-paypal" value="paypal" [(ngModel)]="method" (change)="changeMethod()">
<input class="form-check-input" type="radio" name="Method" id="method-paypal" [value]="paymentMethodType.PayPal" [(ngModel)]="method" (change)="changeMethod()">
<label class="form-check-label" for="method-paypal">
<i class="fa fa-fw fa-paypal"></i> PayPal</label>
</div>
<div class="form-check form-check-inline" *ngIf="!hideCredit">
<input class="form-check-input" type="radio" name="Method" id="method-credit" [value]="paymentMethodType.Credit" [(ngModel)]="method" (change)="changeMethod()">
<label class="form-check-label" for="method-credit">
<i class="fa fa-fw fa-dollar"></i> {{'accountCredit' | i18n}}</label>
</div>
</div>
<ng-container *ngIf="method === 'card'">
<ng-container *ngIf="method === paymentMethodType.Card">
<div class="row">
<div class="form-group col-4">
<label for="stripe-card-number-element">{{'number' | i18n}}</label>
@ -39,13 +44,7 @@
</div>
</div>
</ng-container>
<ng-container *ngIf="method === 'paypal'">
<div class="mb-3">
<div id="bt-dropin-container" class="mb-1"></div>
<small class="text-muted">{{'paypalClickSubmit' | i18n}}</small>
</div>
</ng-container>
<ng-container *ngIf="method === 'bank'">
<ng-container *ngIf="method === paymentMethodType.BankAccount">
<app-callout type="warning" title="{{'verifyBankAccount' | i18n}}">
{{'verifyBankAccountInitialDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}
</app-callout>
@ -75,3 +74,14 @@
</div>
</div>
</ng-container>
<ng-container *ngIf="method === paymentMethodType.PayPal">
<div class="mb-3">
<div id="bt-dropin-container" class="mb-1"></div>
<small class="text-muted">{{'paypalClickSubmit' | i18n}}</small>
</div>
</ng-container>
<ng-container *ngIf="method === paymentMethodType.Credit">
<app-callout type="note">
{{'makeSureEnoughCredit' | i18n}}
</app-callout>
</ng-container>

30
src/app/settings/payment.component.ts
View File

@ -35,9 +35,10 @@ const StripeElementClasses = {
})
export class PaymentComponent implements OnInit {
@Input() showOptions = true;
@Input() method: 'card' | 'paypal' | 'bank' = 'card';
@Input() method = PaymentMethodType.Card;
@Input() hideBank = false;
@Input() hidePaypal = false;
@Input() hideCredit = false;
bank: any = {
routing_number: null,
@ -48,6 +49,8 @@ export class PaymentComponent implements OnInit {
country: 'US',
};
paymentMethodType = PaymentMethodType;
private btScript: HTMLScriptElement;
private btInstance: any = null;
private stripeScript: HTMLScriptElement;
@ -74,8 +77,9 @@ export class PaymentComponent implements OnInit {
ngOnInit() {
if (!this.showOptions) {
this.hidePaypal = this.method !== 'paypal';
this.hideBank = this.method !== 'bank';
this.hidePaypal = this.method !== PaymentMethodType.PayPal;
this.hideBank = this.method !== PaymentMethodType.BankAccount;
this.hideCredit = this.method !== PaymentMethodType.Credit;
}
window.document.head.appendChild(this.stripeScript);
if (!this.hidePaypal) {
@ -93,7 +97,7 @@ export class PaymentComponent implements OnInit {
} catch { }
}
});
}, 200);
}, 500);
if (!this.hidePaypal) {
window.document.head.removeChild(this.btScript);
window.setTimeout(() => {
@ -110,14 +114,14 @@ export class PaymentComponent implements OnInit {
window.document.head.removeChild(btStylesheet);
} catch { }
}
}, 200);
}, 500);
}
}
changeMethod() {
this.btInstance = null;
if (this.method === 'paypal') {
if (this.method === PaymentMethodType.PayPal) {
window.setTimeout(() => {
(window as any).braintree.dropin.create({
authorization: this.platformUtilsService.isDev() ?
@ -149,20 +153,18 @@ export class PaymentComponent implements OnInit {
createPaymentToken(): Promise<[string, PaymentMethodType]> {
return new Promise((resolve, reject) => {
if (this.method === 'paypal') {
if (this.method === PaymentMethodType.PayPal) {
this.btInstance.requestPaymentMethod().then((payload: any) => {
resolve([payload.nonce, PaymentMethodType.PayPal]);
resolve([payload.nonce, this.method]);
}).catch((err: any) => {
reject(err.message);
});
} else if (this.method === 'card' || this.method === 'bank') {
let type = PaymentMethodType.Card;
} else if (this.method === PaymentMethodType.Card || this.method === PaymentMethodType.BankAccount) {
let sourceObj: any = null;
let createObj: any = null;
if (this.method === 'card') {
if (this.method === PaymentMethodType.Card) {
sourceObj = this.stripeCardNumberElement;
} else {
type = PaymentMethodType.BankAccount;
sourceObj = 'bank_account';
createObj = this.bank;
}
@ -170,7 +172,7 @@ export class PaymentComponent implements OnInit {
if (result.error) {
reject(result.error.message);
} else if (result.token && result.token.id != null) {
resolve([result.token.id, type]);
resolve([result.token.id, this.method]);
} else {
reject();
}
@ -181,7 +183,7 @@ export class PaymentComponent implements OnInit {
private setStripeElement() {
window.setTimeout(() => {
if (this.method === 'card') {
if (this.method === PaymentMethodType.Card) {
if (this.stripeCardNumberElement == null) {
this.stripeCardNumberElement = this.stripeElements.create('cardNumber', {
style: StripeElementStyle,

3
src/app/settings/user-billing.component.html
View File

@ -9,7 +9,8 @@
<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
<ng-container *ngIf="billing">
<h2>{{(isCreditBalance ? 'accountCredit' : 'accountBalance') | i18n}}</h2>
<p>{{creditOrBalance | currency:'$'}}</p>
<p><strong>{{creditOrBalance | currency:'$'}}</strong></p>
<p>{{'creditAppliedDesc' | i18n}}</p>
<button type="button" class="btn btn-outline-secondary" (click)="addCredit()" *ngIf="!showAddCredit">
{{'addCredit' | i18n}}
</button>

6
src/locales/en/messages.json
View File

@ -1506,6 +1506,12 @@
"message": "Amount",
"description": "Dollar amount, or quantity."
},
"makeSureEnoughCredit": {
"message": "Please make sure that your account has enough credit available for this purchase. If your account does not have enough credit available, your default payment method on file will be used for the difference. You can add credit to your account from the Billing page."
},
"creditAppliedDesc": {
"message": "Your account's credit can be used to make purchases. Any available credit will be automatically applied towards invoices generated for this account."
},
"goPremium": {
"message": "Go Premium",
"description": "Another way of saying \"Get a premium membership\""