Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 1x | <!-- error messages -->
<p *ngIf="errorMessage.general.message" class="text-danger col-sm-offset-4">
{{ errorMessage.general.message | translate }}
</p>
<div [formGroup]="cyberSourceCreditCardForm">
<!-- Containers in which we will load microform -->
<div class="row form-group" [ngClass]="{ 'has-error': errorMessage?.number.message }">
<label class="col-form-label col-md-4" for="number-container"
>{{ 'checkout.credit_card.number.label' | translate }}<span class="required">*</span></label
>
<div class="col-sm-6">
<div id="number-container" class="iframe-container form-control"></div>
<small *ngIf="errorMessage.number?.message" class="validation-message">{{
errorMessage.number.message | translate
}}</small>
</div>
</div>
<!-- Expiry date mm-yyyy -->
<div
class="row form-group has-feedback"
[ishShowFormFeedback]="[
cyberSourceCreditCardForm.controls.expirationMonth,
cyberSourceCreditCardForm.controls.expirationYear
]"
>
<label for="month" class="col-form-label col-md-4"
>{{ 'checkout.credit_card.expiration_date.label' | translate }}<span class="required">*</span></label
>
<div class="col-sm-6">
<div class="clearfix row">
<div class="col-6">
<select
class="form-control"
id="cybersource_creditcard_month"
formControlName="expirationMonth"
data-testing-id="expirationMonth"
>
<option value="">{{ 'account.date.month' | translate }}</option>
<option *ngFor="let option of monthOptions" [value]="option.value">{{ option.label | translate }}</option>
</select>
<ish-form-control-feedback
[messages]="{ required: 'account.date.month.error.required' }"
[control]="cyberSourceCreditCardForm.controls.expirationMonth"
/>
</div>
<div class="col-6">
<select
class="form-control"
id="cybersource_creditcard_year"
formControlName="expirationYear"
data-testing-id="expirationYear"
>
<option value="">{{ 'account.date.year' | translate }}</option>
<option *ngFor="let option of yearOptions" [value]="option.value">{{ option.label | translate }}</option>
</select>
<ish-form-control-feedback
[messages]="{ required: 'account.date.year.error.required' }"
[control]="cyberSourceCreditCardForm.controls.expirationYear"
/>
</div>
</div>
</div>
</div>
<!-- security code CVC -->
<div class="row form-group" [ngClass]="{ 'has-error': errorMessage.securityCode?.message }">
<label class="col-form-label col-md-4" for="securityCode-container"
>{{ 'checkout.credit_card.cvc.label' | translate }}<span class="required">*</span></label
>
<div class="col-sm-6">
<div id="securityCode-container" class="iframe-container form-control"></div>
<small *ngIf="errorMessage.securityCode?.message" class="validation-message">{{
errorMessage.securityCode.message | translate
}}</small>
</div>
<div>
<ng-template #CVCHelp>
<span [innerHTML]="'checkout.credit_card.cvc.popover.content' | translate"></span>
</ng-template>
<a [ngbPopover]="CVCHelp" [popoverTitle]="'checkout.credit_card.cvc.popover.title' | translate" placement="auto"
><fa-icon [icon]="['fas', 'question-circle']" />
</a>
</div>
</div>
</div>
<ish-payment-save-checkbox *ngIf="paymentMethod" [paymentMethod]="paymentMethod" [form]="cyberSourceCreditCardForm" />
<div class="offset-md-4 col-md-8">
<div class="form-group">
<input
type="button"
(click)="submitNewPaymentInstrument()"
class="btn btn-primary"
value="{{ 'checkout.account.submit.button.label' | translate }}"
/>
<button type="button" class="btn btn-secondary" (click)="cancelNewPaymentInstrument()">
{{ 'checkout.cancel.button.label' | translate }}
</button>
</div>
</div>
|