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 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 3x | <div class="row pt-2">
<div [ngClass]="'col-12'">
<!-- PayPal Button container -->
<div *ngIf="adapterType !== 'CardFields'; else cardFieldsContainer" [id]="paypalComponentContainerId"></div>
<!-- PayPal Card Fields containers -->
<ng-template #cardFieldsContainer>
<div class="card_container">
<div class="row form-group">
<!-- Render error message for card fields -->
<div *ngIf="renderError$ | async as errorMessageKey" class="col-12">
<div role="alert" class="alert alert-danger">
<span [ishServerHtml]="errorMessageKey | translate"></span>
</div>
</div>
<div class="col-form-label col-md-4" id="card-name-field-container-label">
{{ 'checkout.credit_card.holder.label' | translate }}
</div>
<div id="card-name-field-container" class="col-md-6 fix-height"></div>
<div class="offset-md-4">
<small
[ishPaypalError]="nameFieldError$ | async"
labelId="card-name-field-container-label"
class="validation-error hide-validation-error"
>
{{ 'checkout.credit_card.holder.error.invalid' | translate }}
</small>
</div>
</div>
<div class="row form-group">
<div class="col-form-label col-md-4" id="card-number-field-container-label">
{{ 'checkout.credit_card.number.label' | translate }}
<span class="required" aria-hidden="true">*</span>
</div>
<div id="card-number-field-container" class="col-md-6 fix-height"></div>
<div class="offset-md-4">
<small
[ishPaypalError]="numberFieldError$ | async"
labelId="card-number-field-container-label"
class="validation-error hide-validation-error"
>
{{ 'checkout.credit_card.number.error.default' | translate }}
</small>
</div>
</div>
<div class="row form-group">
<div class="col-form-label col-md-4" id="card-expiry-field-container-label">
{{ 'checkout.credit_card.expiration_date.label' | translate }}
<span class="required">*</span>
</div>
<div class="col-md-8">
<div class="row">
<div id="card-expiry-field-container" class="pe-0 col-4 fix-height"></div>
</div>
<small
[ishPaypalError]="expiryFieldError$ | async"
labelId="card-expiry-field-container-label"
class="validation-error hide-validation-error"
>
{{ 'checkout.credit_card.expiry_date.invalid.error' | translate }}
</small>
</div>
</div>
<div class="row form-group">
<div class="col-form-label col-md-4" id="card-cvv-field-container-label">
{{ 'checkout.payment.paypal.credit_card.cvc.label' | translate }}
<span class="required" aria-hidden="true">*</span>
</div>
<div class="col-md-8">
<div class="row">
<div id="card-cvv-field-container" class="pe-0 col-4 fix-height"></div>
<div class="ps-0 col-auto">
<ng-template #CVCHelp>
<span [innerHTML]="'checkout.credit_card.cvc.popover.content' | translate"></span>
</ng-template>
<button
type="button"
class="btn btn-link"
[ngbPopover]="CVCHelp"
[popoverTitle]="'checkout.payment.paypal.credit_card.cvc.popover.title' | translate"
placement="auto"
>
<fa-icon [icon]="['fas', 'question-circle']" />
</button>
</div>
</div>
<small
[ishPaypalError]="cvvFieldError$ | async"
labelId="card-cvv-field-container-label"
class="validation-error hide-validation-error"
>
{{ 'checkout.credit_card.cvc_cvv.error.default' | translate }}
</small>
</div>
</div>
</div>
<div class="row">
<div class="offset-md-4 col-md-8">
<button type="button" class="btn btn-primary" id="card-field-submit-button">
<ng-container *ngIf="(loadingIframe$ | async) === true">
<fa-icon [icon]="['fas', 'spinner']" [spin]="true" class="pe-3" />
</ng-container>
{{ 'checkout.button.continue.label' | translate }}
</button>
<button type="button" class="btn btn-secondary" id="card-field-cancel-button">
{{ 'checkout.cancel.button.label' | translate }}
</button>
</div>
</div>
</ng-template>
</div>
</div>
|