bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-22 11:13:46 +00:00
Code Issues Releases Wiki Activity

credit payment method

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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>