All files / src/app/pages/checkout-payment/payment-payone-creditcard payment-payone-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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div [formGroup]="payoneCreditCardForm">
  <!-- This element is used by Payone scripts for error handling. -->
  <p class="text-danger col-sm-offset-4" id="error"></p>
  <p *ngIf="generalErrorMessage" class="text-danger col-sm-offset-4">
    {{ generalErrorMessage | translate }}
  </p>
  <!-- card number -->
  <div class="row form-group">
    <label class="col-form-label col-md-4" for="cardpanInput"
      >{{ 'checkout.credit_card.number.label' | translate }}<span class="required">*</span></label
    >
    <div class="col-sm-6">
      <span id="cardpan" class="inputIframe"></span>
    </div>
  </div>
 
  <!-- card type -->
  <div class="row form-group">
    <label class="col-form-label col-md-4" for="cardtype"
      >{{ 'checkout.credit_card.type.label' | translate }}<span class="required">*</span></label
    >
    <div class="col-sm-6">
      <span id="cardtype" class="inputIframe"></span>
    </div>
  </div>
 
  <!-- expiry date -->
  <div class="row form-group">
    <label class="col-form-label col-md-4" for="expireInput"
      >{{ 'checkout.credit_card.expiration_date.label' | translate }}<span class="required">*</span></label
    >
    <div class="col-sm-6">
      <span id="expireInput" class="inputIframe">
        <span id="cardexpiremonth"></span>&nbsp;<span id="cardexpireyear"></span>
      </span>
    </div>
  </div>
 
  <!-- security code CVC -->
  <div *ngIf="isSecurityCodeCheckRequired()" class="row form-group">
    <label class="col-form-label col-md-4" for="cvcInput"
      >{{ 'checkout.credit_card.cvc.label' | translate }}<span class="required">*</span></label
    >
    <div class="col-sm-6">
      <span id="cardcvc2" class="inputIframe"></span>
    </div>
  </div>
</div>
 
<ish-payment-save-checkbox *ngIf="paymentMethod" [paymentMethod]="paymentMethod" [form]="payoneCreditCardForm" />
 
<div class="row">
  <div class="offset-md-4 col-md-8">
    <button type="button" (click)="submitNewPaymentInstrument()" class="btn btn-primary">
      {{ 'checkout.account.submit.button.label' | translate }}
    </button>
    <button type="button" class="btn btn-secondary" (click)="cancelNewPaymentInstrument()">
      {{ 'checkout.cancel.button.label' | translate }}
    </button>
  </div>
</div>