mirror of
https://github.com/bitwarden/browser
synced 2025-12-23 11:43:46 +00:00
f630ee5f4e
* Remove FF from trial-billing-step.component * Remove FF from user-subscription.component * Remove FF from individual-billing-routing.module * Remove FF from organization-billing.service * Remove FF from organization-subscription-cloud.component * Remove FF from organization-billing-routing.mdoule * Remove FF from organization-plans.component * Remove FF from change-plan-dialog.component * Remove FF * Remove legacy payment.component * Rename V2: adjust-payment-dialog.component * Rename V2: adjust-storage-dialog.component * Rename V2: payment-label.component * Rename V2: payment.component * Rename V2: premium.component * Patrick's feedback
150 lines
5.3 KiB
HTML
150 lines
5.3 KiB
HTML
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
|
<div class="tw-mb-4 tw-text-lg">
|
|
<bit-radio-group formControlName="paymentMethod">
|
|
<bit-radio-button id="card-payment-method" [value]="PaymentMethodType.Card">
|
|
<bit-label>
|
|
<i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>
|
|
{{ "creditCard" | i18n }}
|
|
</bit-label>
|
|
</bit-radio-button>
|
|
<bit-radio-button
|
|
id="bank-payment-method"
|
|
[value]="PaymentMethodType.BankAccount"
|
|
*ngIf="showBankAccount"
|
|
>
|
|
<bit-label>
|
|
<i class="bwi bwi-fw bwi-bank" aria-hidden="true"></i>
|
|
{{ "bankAccount" | i18n }}
|
|
</bit-label>
|
|
</bit-radio-button>
|
|
<bit-radio-button
|
|
id="paypal-payment-method"
|
|
[value]="PaymentMethodType.PayPal"
|
|
*ngIf="showPayPal"
|
|
>
|
|
<bit-label>
|
|
<i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i>
|
|
{{ "payPal" | i18n }}
|
|
</bit-label>
|
|
</bit-radio-button>
|
|
<bit-radio-button
|
|
id="credit-payment-method"
|
|
[value]="PaymentMethodType.Credit"
|
|
*ngIf="showAccountCredit"
|
|
>
|
|
<bit-label>
|
|
<i class="bwi bwi-fw bwi-dollar" aria-hidden="true"></i>
|
|
{{ "accountCredit" | i18n }}
|
|
</bit-label>
|
|
</bit-radio-button>
|
|
</bit-radio-group>
|
|
</div>
|
|
<!-- Card -->
|
|
<ng-container *ngIf="usingCard">
|
|
<div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4">
|
|
<div class="tw-col-span-1">
|
|
<app-payment-label for="stripe-card-number" required>
|
|
{{ "number" | i18n }}
|
|
</app-payment-label>
|
|
<div id="stripe-card-number" class="form-control stripe-form-control"></div>
|
|
</div>
|
|
<div class="tw-col-span-1 tw-flex tw-items-end">
|
|
<img
|
|
src="../../../images/cards.png"
|
|
alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
|
|
class="tw-max-w-full"
|
|
/>
|
|
</div>
|
|
<div class="tw-col-span-1">
|
|
<app-payment-label for="stripe-card-expiry" required>
|
|
{{ "expiration" | i18n }}
|
|
</app-payment-label>
|
|
<div id="stripe-card-expiry" class="form-control stripe-form-control"></div>
|
|
</div>
|
|
<div class="tw-col-span-1">
|
|
<app-payment-label for="stripe-card-cvc" required>
|
|
{{ "securityCodeSlashCVV" | i18n }}
|
|
<a
|
|
href="https://www.cvvnumber.com/cvv.html"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
appA11yTitle="{{ 'learnMore' | i18n }}"
|
|
class="hover:tw-no-underline"
|
|
>
|
|
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
|
|
</a>
|
|
</app-payment-label>
|
|
<div id="stripe-card-cvc" class="form-control stripe-form-control"></div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<!-- Bank Account -->
|
|
<ng-container *ngIf="showBankAccount && usingBankAccount">
|
|
<bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
|
|
{{ "verifyBankAccountWithStatementDescriptorWarning" | i18n }}
|
|
</bit-callout>
|
|
<div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4" formGroupName="bankInformation">
|
|
<bit-form-field class="tw-col-span-1" disableMargin>
|
|
<bit-label>{{ "routingNumber" | i18n }}</bit-label>
|
|
<input
|
|
bitInput
|
|
id="routingNumber"
|
|
type="text"
|
|
formControlName="routingNumber"
|
|
required
|
|
appInputVerbatim
|
|
/>
|
|
</bit-form-field>
|
|
<bit-form-field class="tw-col-span-1" disableMargin>
|
|
<bit-label>{{ "accountNumber" | i18n }}</bit-label>
|
|
<input
|
|
bitInput
|
|
id="accountNumber"
|
|
type="text"
|
|
formControlName="accountNumber"
|
|
required
|
|
appInputVerbatim
|
|
/>
|
|
</bit-form-field>
|
|
<bit-form-field class="tw-col-span-1" disableMargin>
|
|
<bit-label>{{ "accountHolderName" | i18n }}</bit-label>
|
|
<input
|
|
id="accountHolderName"
|
|
bitInput
|
|
type="text"
|
|
formControlName="accountHolderName"
|
|
required
|
|
appInputVerbatim
|
|
/>
|
|
</bit-form-field>
|
|
<bit-form-field class="tw-col-span-1" disableMargin>
|
|
<bit-label>{{ "bankAccountType" | i18n }}</bit-label>
|
|
<bit-select id="accountHolderType" formControlName="accountHolderType" required>
|
|
<bit-option value="" label="-- {{ 'select' | i18n }} --"></bit-option>
|
|
<bit-option value="company" label="{{ 'bankAccountTypeCompany' | i18n }}"></bit-option>
|
|
<bit-option
|
|
value="individual"
|
|
label="{{ 'bankAccountTypeIndividual' | i18n }}"
|
|
></bit-option>
|
|
</bit-select>
|
|
</bit-form-field>
|
|
</div>
|
|
</ng-container>
|
|
<!-- PayPal -->
|
|
<ng-container *ngIf="showPayPal && usingPayPal">
|
|
<div class="tw-mb-3">
|
|
<div id="braintree-container" class="tw-mb-1 tw-content-center"></div>
|
|
<small class="tw-text-muted">{{ "paypalClickSubmit" | i18n }}</small>
|
|
</div>
|
|
</ng-container>
|
|
<!-- Account Credit -->
|
|
<ng-container *ngIf="showAccountCredit && usingAccountCredit">
|
|
<app-callout type="info">
|
|
{{ "makeSureEnoughCredit" | i18n }}
|
|
</app-callout>
|
|
</ng-container>
|
|
<button *ngIf="!!onSubmit" bitButton bitFormButton buttonType="primary" type="submit">
|
|
{{ "submit" | i18n }}
|
|
</button>
|
|
</form>
|