All files / src/app/pages/checkout-payment/payment-cybersource-creditcard payment-cybersource-creditcard.component.html

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
105
106
107
108
109
110
111
112
113
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" aria-hidden="true">*</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" aria-hidden="true">*</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"
            [attr.aria-label]="'checkout.credit_card.expiration_month.select.label' | translate"
            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"
            [attr.aria-label]="'checkout.credit_card.expiration_year.select.label' | translate"
            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" aria-hidden="true">*</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>
      <button
        type="button"
        class="btn btn-link details-tooltip"
        [ngbPopover]="CVCHelp"
        [popoverTitle]="'checkout.credit_card.cvc.popover.title' | translate"
        placement="auto"
      >
        <fa-icon [icon]="['fas', 'question-circle']" />
      </button>
    </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>