@nuskin/ns-checkout
Version:
Ecomm3 Checkout module
481 lines (473 loc) • 35.8 kB
HTML
<!-- Payment Information Section -->
<div class="checkout-section">
<article id="checkout-edit-payment" class="checkoutSection"
data-ng-class="{active: sections.payment.edit==true}">
<header>
<h1>
<span class="ordinal">3</span>
<span class="title">{{tdc.billingInformation}}</span>
</h1>
<button class="btn btn-secondary section-edit"
aria-label="{{tdc.editText}} {{tdc.billingInformation}}"
data-ng-show="sections.payment.edit==false && sections.payment.pristine==false"
data-ng-class="{disabled: isBusy}"
data-ng-disabled="isBusy"
data-ng-click="updateEdit('payment')">{{tdc.editText}}
</button>
<div class="summary" ns-display-errors="sections.payment.error" id="paymentDetailsError"></div>
<div class="summary"
data-ng-show="sections.payment.edit==false && sections.payment.pristine==false">
<div class="summaryColumn">
<h3 class="paymentDisplayImageInsertPoint"
data-ng-show="!isWireOrCredit(order.selectedPayment) && order.selectedPayment.paymentTypeId === PaymentType.SDD">
{{tdc.sepaPaymentDescription}}</h3>
<h3 data-ng-show="!isWireOrCredit(order.selectedPayment) && order.selectedPayment.paymentTypeId !== PaymentType.SDD">
{{order.selectedPayment.paymentTypeDescription}}</h3>
<h3 data-ng-show="isWireOrCredit(order.selectedPayment)">
<span data-ng-bind-html="order.selectedPayment.paymentTypeDescription"></span>
<span data-ng-bind-html=
"order.selectedPayment.paymentName"></span>
</h3>
<span data-ng-show="showNumberMask(order.selectedPayment.paymentTypeId)"> {{tdc.ccMasking}} {{order.selectedPayment.paymentNumber | lastFourFilter}}</span></span>
<span data-ng-show="isShowingCcv(order.selectedPayment.paymentTypeId)">{{tdc.expLabel}} {{order.selectedPayment.expMonth}}/{{order.selectedPayment.expYear}}</span>
<span data-ng-show="isShowingInstallments(order.selectedPayment)">{{installmentSummaryText(order.selectedPayment)}}</span>
</div>
<div class="summaryColumn" data-ng-hide="isPitchCart">
<div>
<div>
<div id="promotionalCodeSummary"
data-ng-show="editMode || order.productDiscountCodeApplied">
<h3>{{tdc.discountCode}}</h3>
<span>{{order.productDiscountCode}}</span>
<div>{{tdc.promotionalSavings}} {{order.promotionalSavings |
currencyFilter:order.currencyCode:runConfig.language + '_' +
order.countryCode}}
</div>
</div>
<div id="shippingCodeSummary"
data-ng-show="editMode || order.shippingDiscountCodeApplied">
<h3>{{tdc.discountCode}}</h3>
<span>{{order.shippingDiscountCode}}</span>
<div class="shippingPromoCodeSaved">{{tdc.youSavedLabel}}
{{order.promotionalSavings |
currencyFilter:order.currencyCode:runConfig.language + '_' +
order.countryCode}}
</div>
</div>
</div>
<div>
<div class="backdate_check"
data-ng-show="config.checkout.enableBackdating && !order.adr && order.allowBackdating">
<div class="" data-ng-show="!backdatingToggle">
<div class="action">{{tdc.backdating_questionText}} <a href=""
data-ng-click="backdatingToggle=true">{{tdc.backdating_yesText}}</a>
</div>
<div class="disclaimer">({{tdc.backdating_yesDescriptionText}})</div>
</div>
<div data-ng-show="backdatingToggle">
<div>{{tdc.backdating_electedText}}</div>
<div>{{tdc.backdating_changeText}} <a href=""
data-ng-click="backdatingToggle=false">{{tdc.backdating_clickHereText}}</a>
</div>
</div>
</div>
<div data-ng-show="config.checkout.enableGiftReceipt && tdc.giftReceiptText">
<input type="checkbox" data-ng-model="order.giftReceipt" class="ns-checkbox btn-outline"/>
<label id="giftReceiptToggle">
{{tdc.giftReceiptText}}
</label>
</div>
</div>
</div>
</div>
</div>
</header>
<section id="payment-choices" data-ng-class="{mobile: sections.payment.selecting}"
data-ng-show="editMode || sections.payment.edit">
<div class="payment-summary-view"
data-ng-hide="sections.payment.promo || sections.payment.adding || sections.payment.editing || sections.payment.selecting">
<div class="pay-sum-left">
<h3>{{tdc.paymentMethodLabel}}</h3>
<div class="ccv" data-ng-show="showPointsBalance()">{{tdc.usedPointsLabel}} <span
class="ccv">{{usedPoints | decimalPlaceFilter:2}}</span></div>
<div class="ccv" data-ng-show="showPointsBalance()">{{tdc.pointsBalanceLabel}}<span
class="ccv">{{pointsBalance() | decimalPlaceFilter:2}}</span></div>
<div class="paymentDisplayImageInsertPoint"
data-ng-show="isWireOrCredit(order.selectedPayment) && !sections.payment.adding && !sections.payment.editing && !sections.payment.selecting"
data-ng-bind-html="order.selectedPayment.paymentName">Wire
</div>
<div data-ng-show="isWireOrCredit(order.selectedPayment) && !sections.payment.adding && !sections.payment.editing && !sections.payment.selecting"
data-ng-bind-html="order.selectedPayment.paymentTypeDescription">Wire Instructions
</div>
<div class="billingReadOnly"
data-ng-hide="sections.payment.adding || sections.payment.editing || sections.payment.selecting">
<b data-ng-show="!isWireOrCredit(order.selectedPayment) && order.selectedPayment.paymentTypeId === PaymentType.SDD">{{tdc.sepaPaymentDescription}}</b>
<b data-ng-show="!isWireOrCredit(order.selectedPayment) && order.selectedPayment.paymentTypeId !== PaymentType.SDD">{{order.selectedPayment.paymentTypeDescription}}</b>
<span data-ng-show="showNumberMask(order.selectedPayment.paymentTypeId)"> {{tdc.ccMasking}} {{order.selectedPayment.paymentNumber | lastFourFilter}}</span><br/>
<!--TODO: verify this works (+ing two strings together in the filter)-->
<span data-ng-show="isShowingCcv(order.selectedPayment.paymentTypeId)"
data-ng-bind-html="order.selectedPayment.expMonth | expirationFilter:order.selectedPayment.expYear:tdc.expLabel:tdc.expiredText"></span><br/>
<span data-ng-show="!isWireOrCredit(order.selectedPayment)">{{order.selectedPayment.paymentName}}</span><br/>
<span class="ccv" data-ng-show="isShowingCcv(order.selectedPayment.paymentTypeId)">
{{tdc.ccvLabel}}
<i class="icon-info" data-ng-hide="hideCCVToolTip()"
data-ng-click="showCreditCardImageOnMobile($event)">
<span class="toolTip-right ccv-tooltip"
data-ng-hide="order.selectedPayment.paymentTypeId !== PaymentType.AMERICAN_EXPRESS"
data-ng-bind-html="config.americanExpressCCV"></span>
<span class="toolTip-right ccv-tooltip"
data-ng-hide="order.selectedPayment.paymentTypeId === PaymentType.AMERICAN_EXPRESS"
data-ng-bind-html="config.otherCardCCV"></span>
</i>
<form name="forms.ccvform" novalidate>
<input id="ccv"
aria-label="{{tdc.paymentMethodLabel}} {{order.selectedPayment.paymentTypeDescription}} {{tdc.ccMasking}} {{order.selectedPayment.paymentNumber | lastFourFilter}}"
type="tel" name="ccv" data-ng-show="order.countryCode !== 'CO'"
data-ng-model-options="{ updateOn: 'default blur', debounce: {'default': 400, 'blur':1 }}"
data-ng-minlength="3" maxlength="4" data-ng-pattern="/^\d{1,4}$/"
required class="ccv" data-ng-model="order.paymentSecurityNumber">
<input id="ccv"
aria-label="{{tdc.paymentMethodLabel}} {{order.selectedPayment.paymentTypeDescription}} {{tdc.ccMasking}} {{order.selectedPayment.paymentNumber | lastFourFilter}}"
type="password" name="ccv" data-ng-show="order.countryCode === 'CO'"
data-ng-model-options="{ updateOn: 'default blur', debounce: {'default': 400, 'blur':1 }}"
data-ng-minlength="3" maxlength="4" data-ng-pattern="/^\d{1,4}$/"
required class="ccv" data-ng-model="order.paymentSecurityNumber">
</form>
<div class="error"
data-ng-show="forms.ccvform.ccv.$dirty && forms.ccvform.ccv.$error.pattern">{{tdc.ccvMustBeANumberError}}<br/></div>
<div class="error"
data-ng-show="forms.ccvform.ccv.$dirty && forms.ccvform.ccv.$error.required">{{tdc.ccvIsRequiredError}}<br/></div>
<div class="error"
data-ng-show="forms.ccvform.ccv.$dirty && forms.ccvform.ccv.$error.minlength">{{tdc.ccvMustBeAtLeastThreeDigitsError}}<br/></div>
</span>
<span class="installmentOption"
data-ng-show="order.selectedPayment.installmentsAllowed && config.checkout.enableInstallments && !order.adr && !hideInstallmentsForTR">
<div class="section singleCheckbox">
<div ng-hide="sections.payment.newPayment.installmentOption__hide">
<input type="checkbox" name="installmentOption" value="false" class="ns-checkbox btn-outline"
data-ng-change="installmentNumChanged()"
data-ng-hide="isInstallmentPaymentType(order.selectedPayment)"
data-ng-disabled="isInstallmentPaymentType(order.selectedPayment)"
ng-model="order.selectedPayment.useInstallments">
<label>
{{tdc.payInstallments}}
</label>
</div>
</div>
<div class="spinner" data-ng-show="transBankInstallmentsBusy"></div>
<div class="transBankError">{{transBankErrorMessage}}</div>
<div class="dropdown section" data-ng-show="!transBankInstallmentsBusy">
<div class="installmentNum"
ng-hide="sections.payment.newPayment.installmentNum__hide">
<label>{{tdc.selectNumInstallments}}</label>
<select id="installmentNumber" data-ng-change="installmentNumChanged()"
ng-init="order.selectedPayment.installmentSelectedNumber = order.selectedPayment.availableInstallmentPeriods[0]"
ng-disabled="!order.selectedPayment.useInstallments"
data-ng-model="order.selectedPayment.installmentSelectedNumber"
data-ng-options="o as o for o in order.selectedPayment.availableInstallmentPeriods"></select>
</div>
</div>
<modal-dialog
show="config.checkout.showInstallmentTermOptions && order.selectedPayment.useInstallments">
<div data-ng-bind-html="tdc.installmentDialogContent">
</div>
</modal-dialog>
</span>
<div class="sepa-radios"
ng-if="config.checkout.enableEmandates && order.selectedPayment.paymentTypeId === PaymentType.SDD">
<label><input type="radio" name="mandate"
data-ng-model="order.selectedPayment.mandateType" value="electronic">
<span>{{tdc.electronicMandateLabel}}</span></label>
<label><input type="radio" name="mandate"
data-ng-model="order.selectedPayment.mandateType" value="paper">
<span>{{tdc.paperMandateLabel}}</span></label>
</div>
<a href="" class="changeBilling"
data-ng-click="sections.payment.selecting=true;hideCancelChangePayment=false;clearInstallments()">{{tdc.changeText}}</a>
</div>
</div>
<label id="promotionalCodeGroup"
data-ng-show="editMode || (config.checkout.showProductPromoCode && !order.productDiscountCodeApplied && !order.shippingDiscountCodeApplied && !isPitchCart)">
<span class="promo-label">{{tdc.enterAPromotionalCodeLabel}}</span>
<div class="compound-element">
<input type="text" data-ng-model="order.productDiscountCode" capitalize>
<button class="btn btn-secondary simulateRequest"
data-ng-class="{disabled: isBusy || !order.productDiscountCode, processingRight: isChosenElementBusy('applyButton1'), validRight: isChosenElementValid('applyButton1')}"
data-ng-disabled="isBusy || !order.productDiscountCode"
data-ng-click="applyPromoCode()">{{tdc.applyCodeText}}
</button>
</div>
</label>
<div class="pay-sum-right"
data-ng-show="!isPitchCart && (config.checkout.showShippingPromoCode || config.checkout.showPaymentPromoCodeOffers || order.productDiscountCodeApplied)">
<div data-ng-show="order.productDiscountCodeApplied">
<div class="selectedCode">
{{tdc.selectedCode}} <br/>
#<span class="productDiscountCode">{{order.productDiscountCodeApplied}}</span>
<button class="btn btn-icon removeCodeLink" href=""
data-ng-click="removeCouponCode()">x
</button>
</div>
<div class="savings">
<span ng-show="order.promotionalSavings > 0" class="promotionalSavings">{{tdc.promotionalSavings}} <span
class="savingsAmount">{{order.promotionalSavings | currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}</span>
</span>
</div>
</div>
<div data-ng-show="config.checkout.showPaymentPromoCodeOffers && !order.productDiscountCode">
<div id="yourCoupons" data-ng-hide="hidePaymentPromoCodeTable()">{{tdc.yourCoupons}}
</div>
<button id="displayPromoCodes" data-ng-click="sections.payment.promo=true"
data-ng-hide="hidePaymentPromoCodeTable()"
class="btn btn-secondary">
{{promoCodeOffers.length}} {{tdc.available}}
</button>
<div class="promoTable-or-continue" data-ng-hide="hidePaymentPromoCodeTable()">
<div>
<span>{{tdc.or}}</span>
</div>
</div>
<div class="compound-element">
<input id="addCouponCode" data-ng-model="jpCouponCode" type="text"
placeholder="{{tdc.addCouponCode}}">
<button id="addPromoBtn"
data-ng-disabled="!jpCouponCode || jpCouponCode.length === 0"
class="btn btn-secondary" data-ng-click="addCouponCode()">
{{tdc.add}}
</button>
</div>
</div>
<label class="shippingPromoCodeGroup"
data-ng-show="editMode || (config.checkout.showShippingPromoCode && !order.productDiscountCodeApplied && !order.shippingDiscountCodeApplied)">
<span>{{tdc.enterAShippingCodeLabel}}</span>
<div class="compound-element">
<input type="text" class="code" data-ng-model="order.shippingDiscountCode"
capitalize>
<button class="btn btn-secondary simulateRequest"
data-ng-class="{disabled: isBusy || !order.shippingDiscountCode, processing: isChosenElementBusy('applyButton2'), valid: isChosenElementValid('applyButton2')}"
data-ng-disabled="isBusy || !order.shippingDiscountCode"
data-ng-click="applyShippingCode()">{{tdc.applyCodeText}}
</button>
</div>
</label>
<div data-ng-show="order.shippingDiscountCodeApplied">
<div class="selectedCode">{{tdc.selectedCode}} #<span class="shippingDiscountCode">{{order.shippingDiscountCodeApplied}}</span>
<button class="btn btn-icon removeCodeLink" href=""
data-ng-click="removeShippingCode()">x
</button>
</div>
<div class="savings">
<span ng-show="order.promotionalSavings > 0" class="promotionalSavings">{{tdc.promotionalSavings}} <span
class="savingsAmount">{{order.promotionalSavings | currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}</span>
</span>
</div>
</div>
</div>
</div>
<button
class="btn btn-outline default"
style="margin: 1em 0 2em 0;"
data-ng-click="copyShippingAddress()"
data-ng-show="(sections.payment.adding &&
shouldShowCopyShipping() &&
sections.payment.newPayment.paymentTypeId !== PaymentType.MPOS &&
sections.payment.newPayment.paymentTypeId < 20) || (sections.payment.editing && shouldShowCopyShipping() && sections.payment.editPayment.paymentTypeId !== PaymentType.MPOS &&
sections.payment.editPayment.paymentTypeId < 20)">
<label>{{tdc.copyShippingLabel}}</label>
</button>
<fieldset class="promo-table"
data-ng-show="config.checkout.showPaymentPromoCodeOffers && sections.payment.promo">
<div class="tableContainer">
<table class="ns-table striped font-align-left" border="1" cellpadding="0" cellspacing="0"
id="promoCodesTable">
<caption><h3>{{tdc.promotionalCodes}}</h3></caption>
<thead>
<tr class="promo-header">
<th>{{tdc.descriptionLabel}}</th>
<th>{{tdc.couponCodeLabel}}</th>
<th>{{tdc.minimumPurchaseLabel}}</th>
<th>{{tdc.discountLabel}}</th>
<th>{{tdc.expirationDateLabel}}</th>
</tr>
</thead>
<tbody>
<tr class="promo-details" data-ng-repeat="promoCode in promoCodeOffers"
data-ng-click="selectCouponCode(promoCode.code, $event)">
<td class="promo-desc">
<div class="code-select-container">
<input type="radio" name="promoCode" value="promoCode.code">
{{promoCode.desc}}
</div>
<label>{{tdc.descriptionLabel}}</label><span
data-ng-bind-html="promoCode.webDesc"></span>
</td>
<td><label>{{tdc.couponCodeLabel}}</label>{{promoCode.code}}</td>
<td><label>{{tdc.minimumPurchaseLabel}}</label>{{promoCode.minimumPurchasePrice |
currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}
</td>
<td><label>{{tdc.discountLabel}}</label>{{promoCode.discountAmount |
currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}
</td>
<td><label>{{tdc.expirationDateLabel}}</label><span>{{promoCode.expiration}}</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tableSaveControls">
<div class="savings">{{tdc.savingsText}} <span class="savingsAmount">{{order.originalGrandTotal - order.orderTotals.grandTotal | currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}</span>
</div>
<button id="savePromoCode" class="btn btn-primary"
data-ng-click="sections.payment.promo=false"
data-ng-disabled="!order.productDiscountCode">
{{tdc.buttonTextSave}}
</button>
<div>
<a href="" data-ng-click="sections.payment.promo=false; removeCouponCode()">{{tdc.cancelText}}</a>
</div>
</div>
</fieldset>
<fieldset class="payment-method-section"
data-ng-hide="sections.payment.adding || sections.payment.editing || !sections.payment.selecting || payments.length==0">
<label class="billingSelection" data-ng-repeat="p in payments" id="{{p.bePaymentTypeId}}"
data-ng-class="{selected: order.selectedPayment.bePaymentTypeId==p.bePaymentTypeId, wired: isWireOrCredit(p)}">
<!-- if we bind the ng-model to the correct object it strips out all the functions from the object. The workaround is to bind ng-model to something we don't care about
and then on ng-change set the object manually thus maintaining all the functions in the object. -->
<input type="radio" name="creditCard" data-ng-value="{{p}}"
data-ng-model="order.selectedPayment" data-ng-disabled="isPaymentExpired(p)">
<span class="deleteThis"><a
aria-label="{{tdc.delete}} {{p.paymentTypeDescription}} {{tdc.ccMasking}} {{p.paymentNumber | lastFourFilter}}"
class="btn-edit" href=""
data-ng-click="setDeletePaymentDialogId(p.bePaymentTypeId)"> </a></span>
<ul>
<li><img class="paymentLogo" data-ng-show="showPaymentImage(p)"
ng-src="../../../content/dam/apps/checkout/creditcards/CC-{{p.paymentTypeId}}.png"
alt=""></li>
<li ng-show="p.paymentTypeId === PaymentType.SDD">{{tdc.sepaPaymentDescription}}</li>
<li ng-show="p.paymentTypeId !== PaymentType.SDD"
ng-bind-html="p.paymentTypeDescription"></li>
<li data-ng-show="showNumberMask(p.paymentTypeId)">{{tdc.ccMasking}} {{p.paymentNumber |
lastFourFilter}}
</li>
<li data-ng-show="showAuthorizationNumber(p.paymentTypeId)">
{{p.paymentSecurityNumber}}
</li>
<li data-ng-show="isShowingCcv(p.paymentTypeId)"
data-ng-bind-html="p.expMonth | expirationFilter:p.expYear:tdc.expLabel:tdc.expiredText"></li>
<li data-ng-show="showPaymentName(p)">{{p.paymentName}}</li>
<li data-ng-show="showBillingName(p) && !p.paymentName">{{p.billingName}}</li>
<li data-ng-show="p.paymentTypeId === PaymentType.PAYPAL"><img class="blueCheckBox"
ng-src="{{runConfig.baseUrl}}/{{ownPath}}/img/blueCheckBox.png">Send
me to PayPal to select the funding source for this transaction.
</li>
<li>
<a aria-label="{{tdc.editText}} {{p.paymentTypeDescription}} {{tdc.ccMasking}} {{p.paymentNumber | lastFourFilter}}"
href="" data-ng-show="allowEditPayment(p)" data-ng-click="setupEditPayment(p)"
class="btn-edit">{{tdc.editText}}</a></li>
<li ng-show="p.paymentTypeId === PaymentType.CEDYNA">{{tdc.editInstructionsCedyna}}</li>
<li>
<button aria-label="{{tdc.useThisCardText}} {{p.paymentTypeDescription}} {{tdc.ccMasking}} {{p.paymentNumber | lastFourFilter}}"
class="btn btn-primary horizontal-center" href=""
data-ng-click="changePayment(p, $event)">{{tdc.useThisCardText}}
</button>
</li>
<li class="defaultOptionLabel" data-ng-show="p.defaultPayment">
{{tdc.defaultPaymentText}}
</li>
</ul>
<modal-dialog show="showDeletePaymentDialog(p.bePaymentTypeId)" hidex="true">
<div>
<p class="modal-paragraph-center">{{tdc.deleteThisPayment}}</p>
<p class="modal-paragraph-center">
<a href="" class="btn-edit cancel-payment"
data-ng-click="setDeletePaymentDialogId(null)">{{tdc.cancelText}}</a>
<button id="deletePaymentButton"
class="btn btn-primary continue btn-primary-dialog"
data-ng-click="deletePayment(p.bePaymentTypeId)">{{tdc.delete}}
</button>
</p>
</div>
</modal-dialog>
</label>
</fieldset>
<div data-ng-if="config.checkout.disablePaymentDropdownAndButton">
<div class="payment-selection"
data-ng-hide="!editMode && (sections.payment.editing || !sections.payment.selecting)"
style="clear: both;">
<h3>{{tdc.addPaymentText}}</h3>
<select id="addNewPaymentSelect" data-ng-disabled="sections.payment.adding"
data-ng-model="sections.payment.selectedNew.payment"
data-ng-options="p.localizedName for p in availablePaymentsToShow">
</select>
<button id="addNewPaymentButton"
data-ng-disabled="sections.payment.adding || availablePaymentsToShow.length === 0"
data-ng-click="setupAddNewPayment(sections.payment.selectedNew.payment)"
class="btn btn-secondary">{{tdc.addText}}
</button>
</div>
</div>
<div data-ng-if="!config.checkout.disablePaymentDropdownAndButton">
<div class="payment-selection"
data-ng-hide="!editMode && (!availablePaymentsToShow.length || sections.payment.adding || sections.payment.editing || !sections.payment.selecting)"
style="clear: both;">
<h3>{{tdc.addPaymentText}}</h3>
<select id="addNewPaymentSelect" data-ng-model="sections.payment.selectedNew.payment"
data-ng-options="p as p.localizedName for p in availablePaymentsToShow track by p.id">
</select>
<button id="addNewPaymentButton" data-ng-disabled="availablePaymentsToShow.length === 0"
data-ng-click="setupAddNewPayment(sections.payment.selectedNew.payment)"
class="btn btn-secondary">{{tdc.addText}}
</button>
</div>
</div>
<div class="newPayment" data-ng-show="sections.payment.adding">
<form id="addPaymentForm" name="forms.addPaymentForm" class="css-form" novalidate>
<div data-ns-include="sections.payment.newFormUrl"></div>
</form>
<p data-ng-show="sections.payment.newPayment.paymentTypeId === PaymentType.MPOS">
{{tdc.mPOSPaymentMessage}}
</p>
<button id="saveNewPaymentChanges" class="btn btn-primary savePaymentChanges"
data-ng-class="{disabled: !forms.addPaymentForm.$dirty}"
data-ng-disabled="!forms.addPaymentForm.$dirty" data-ng-click="addPayment()">
{{tdc.saveChangesText}}
</button>
<a href="" data-ng-click="cancelAddPayment()">{{tdc.cancelText}}</a>
</div>
<div class="editPayment" data-ng-show="sections.payment.editing">
<form name="forms.editPaymentForm" class="css-form" novalidate>
<div data-ns-include="sections.payment.editFormUrl"></div>
</form>
<p data-ng-show="sections.payment.newPayment.paymentTypeId === PaymentType.MPOS">
{{tdc.mPOSPaymentMessage}}
</p>
<button id="saveEditPaymentChanges" class="btn btn-primary savePaymentChanges"
data-ng-class="{disabled: !forms.editPaymentForm.$dirty || forms.editPaymentForm.expYear.$error.nsExpiredYear}"
data-ng-disabled="!forms.editPaymentForm.$dirty || forms.editPaymentForm.expYear.$error.nsExpiredYear"
data-ng-click="savePayment()">{{tdc.saveChangesText}}
</button>
<a href="" data-ng-click="cancelEditPayment();">{{tdc.cancelText}}</a>
</div>
<div data-ng-bind-html="tdc.paymentMessage | sanitize"></div>
<div id="paymentAgree"
data-ng-show="(editMode || order.adr) && config.checkout.showPaymentAgreeCheckbox"
data-ns-flash="sections.payment.flashAgree">
<input type="checkbox" data-ng-model="sections.payment.agree" class="ns-checkbox btn-outline">
<label>
<span class="padding-top">{{tdc.paymentAgreeMessage}}</span>
</label>
</div>
</section>
<footer data-ng-show="!sections.shipping.edit && (sections.payment.edit || sections.payment.adding || sections.payment.editing || sections.payment.selecting)">
<div class="actions">
<a href="" class="btn sectionCancelLink" data-ng-click="cancelChangePayment();"
data-ng-show="!hideCancelChangePayment && !isSelectedPaymentEmpty() && (sections.payment.editing || sections.payment.adding || sections.payment.selecting)">{{tdc.cancelText}}</a>
<button id="paymentContinueButton" aria-label="{{tdc.billingInformation}} {{tdc.continueText}}"
class="btn btn-primary continue" data-ng-click="continueEdit('payment')"
data-ng-class="{disabled: applyPaymentContinueDisabledClass()}"
data-ng-disabled="isPaymentContinueBtnDisabled()">{{tdc.continueText}}
</button>
</div>
</footer>
</article>
</div>