mirror of
https://github.com/bitwarden/browser.git
synced 2024-10-09 05:57:40 +02:00
8f6713debb
* Adjust sizing of billing fields * Move billing component into trial initiation module
164 lines
5.4 KiB
HTML
164 lines
5.4 KiB
HTML
<div class="mb-4 text-lg" *ngIf="showOptions && showMethods">
|
|
<div class="form-check form-check-inline mr-4">
|
|
<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="bwi bwi-fw bwi-credit-card" aria-hidden="true"></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]="paymentMethodType.BankAccount"
|
|
[(ngModel)]="method"
|
|
(change)="changeMethod()"
|
|
/>
|
|
<label class="form-check-label" for="method-bank">
|
|
<i class="bwi bwi-fw bwi-bank" aria-hidden="true"></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]="paymentMethodType.PayPal"
|
|
[(ngModel)]="method"
|
|
(change)="changeMethod()"
|
|
/>
|
|
<label class="form-check-label" for="method-paypal">
|
|
<i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></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="bwi bwi-fw bwi-dollar" aria-hidden="true"></i> {{ "accountCredit" | i18n }}</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<ng-container *ngIf="showMethods && method === paymentMethodType.Card">
|
|
<div class="row">
|
|
<div [ngClass]="trialFlow ? 'col-5' : 'col-4'" class="form-group">
|
|
<label for="stripe-card-number-element">{{ "number" | i18n }}</label>
|
|
<div id="stripe-card-number-element" class="form-control stripe-form-control"></div>
|
|
</div>
|
|
<div *ngIf="!trialFlow" class="form-group col-8 d-flex align-items-end">
|
|
<img
|
|
src="../../images/cards.png"
|
|
alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
|
|
width="323"
|
|
height="32"
|
|
/>
|
|
</div>
|
|
<div [ngClass]="trialFlow ? 'col-3' : 'col-4'" class="form-group">
|
|
<label for="stripe-card-expiry-element">{{ "expiration" | i18n }}</label>
|
|
<div id="stripe-card-expiry-element" class="form-control stripe-form-control"></div>
|
|
</div>
|
|
<div class="form-group col-4">
|
|
<div class="d-flex">
|
|
<label for="stripe-card-cvc-element">
|
|
{{ "securityCode" | i18n }}
|
|
</label>
|
|
<a
|
|
href="https://www.cvvnumber.com/cvv.html"
|
|
tabindex="-1"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="ml-auto"
|
|
appA11yTitle="{{ 'learnMore' | i18n }}"
|
|
>
|
|
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
|
|
</a>
|
|
</div>
|
|
<div id="stripe-card-cvc-element" class="form-control stripe-form-control"></div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container *ngIf="showMethods && method === paymentMethodType.BankAccount">
|
|
<app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
|
|
{{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
|
|
</app-callout>
|
|
<div class="row">
|
|
<div class="form-group col-6">
|
|
<label for="routing_number">{{ "routingNumber" | i18n }}</label>
|
|
<input
|
|
id="routing_number"
|
|
class="form-control"
|
|
type="text"
|
|
name="routing_number"
|
|
[(ngModel)]="bank.routing_number"
|
|
required
|
|
appInputVerbatim
|
|
/>
|
|
</div>
|
|
<div class="form-group col-6">
|
|
<label for="account_number">{{ "accountNumber" | i18n }}</label>
|
|
<input
|
|
id="account_number"
|
|
class="form-control"
|
|
type="text"
|
|
name="account_number"
|
|
[(ngModel)]="bank.account_number"
|
|
required
|
|
appInputVerbatim
|
|
/>
|
|
</div>
|
|
<div class="form-group col-6">
|
|
<label for="account_holder_name">{{ "accountHolderName" | i18n }}</label>
|
|
<input
|
|
id="account_holder_name"
|
|
class="form-control"
|
|
type="text"
|
|
name="account_holder_name"
|
|
[(ngModel)]="bank.account_holder_name"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="form-group col-6">
|
|
<label for="account_holder_type">{{ "bankAccountType" | i18n }}</label>
|
|
<select
|
|
id="account_holder_type"
|
|
class="form-control"
|
|
name="account_holder_type"
|
|
[(ngModel)]="bank.account_holder_type"
|
|
required
|
|
>
|
|
<option value="">-- {{ "select" | i18n }} --</option>
|
|
<option value="company">{{ "bankAccountTypeCompany" | i18n }}</option>
|
|
<option value="individual">{{ "bankAccountTypeIndividual" | i18n }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container *ngIf="showMethods && 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="showMethods && method === paymentMethodType.Credit">
|
|
<app-callout type="note">
|
|
{{ "makeSureEnoughCredit" | i18n }}
|
|
</app-callout>
|
|
</ng-container>
|