BPOINT

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> <title>BPOINT</title> <link href="/pay/Content/base/css?v=VVJusRy-Mi5e-3LcAbrEOX_jl3j9RCKpWpF66TwxMn01" rel="stylesheet"/> <link href="/pay/Views/Bpoint/DefaultViews/staticstyles.css?v=1732380328" rel="stylesheet" type="text/css"/> <link href="/pay/Views/Bpoint/CustomViews/copyrightagencylimited/HPP/0/active/style.css" rel="stylesheet" type="text/css"/> <link rel="icon" type="image/png" href="/pay/Views/Bpoint/DefaultViews/images/favicon.png"/>  </head> <body> <div id="mainwrapper"> <div id="returnBar" data-bind="html: ReturnBar ? ReturnBar : ''"> </div> <div id="header" class="theme-header"> <div class="container-fluid"> </div> </div> <div id="page" class="theme-page"> <div id="content" class="container"> <div id="main"> <div id="designerText"> <h2 style="margin: 0px 0px 22px;"><span style="font-family: Arial; font-size: small; font-weight: normal;">An invoice totalling $10,000 or less can be paid by Visa or MasterCard.</span></h2><h2 style="margin: 0px 0px 22px;"><span style="font-family: Arial; font-size: small; font-weight: normal;">An invoice totalling more than $10,000 should be paid by electronic funds transfer to Copyright Agency, BSB 062203 Account 00211106 quoting your invoice number. International customers please note Swift Code CTBAAU2S and bank address as Commonwealth Bank of Australia, 116 Miller Street, North Sydney NSW 2060, Australia.  If you need to pay an invoice totalling more than $10,000 by Visa or MasterCard, please email your request to AR@copyright.com.au and our Finance team will contact you to complete the payment (please do not supply your credit card details by email).  Note that a credit card surcharge will apply to an invoice totalling more than $10,000. </span></h2> </div> <div id="loadingSection" class="text-center">Loading...</div> <div id="errorSection" class="alert alert-danger" style="display: none;"></div> <div id="paymentReceiptSection"> <div id="paymentSection" style="display: none;"> <div data-bind="if: AppState().Current == 'CrnEntry'"> <div data-bind="template: { name: 'biller-selection-template', data: $root }"></div> <div data-bind="template: { name: 'crn-template', foreach: Biller().Crns }"></div> <div class="row"> <div data-bind="if: AppState().Initial == 'BillerEntry'"> <div class="col-xs-6"> <button class="btn btn-block button buttonsecondary" tabindex="10" data-bind="event: { click: BackToBillerEntry, keydown: BackToBillerEntry }"> <span class="glyphicon glyphicon-menu-left"></span> BACK </button> </div> </div> <div data-bind="css : AppState().Initial == 'BillerEntry' ? 'col-xs-6' : 'col-xs-12'"> <button id="btnValidateCrn" class="btn btn-block button buttonprimary" tabindex="11" data-loading-text="Loading..." data-bind="event: { click: ValidateCrn, keydown: ValidateCrn }"> NEXT <span class="glyphicon glyphicon-menu-right"></span> </button> </div> </div> </div> <div data-bind="if: AppState().Current != 'CrnEntry'"> <div data-bind="template: { name: 'selected-biller-template', data: $root }"></div> <div data-bind="template: { name: 'crn-template', foreach: Biller().Crns }"></div> <div data-bind="template: { name: 'amount-template', data: Amount }"></div> <div data-bind="if: ((AppState().Current == 'CardEntry' || AppState().Current == 'KlarnaCheckout') && Biller().IsTopUpsEnabled && !Biller().DeferredPayment)"> <div data-bind="template: { name: 'additional-payment-form-template', foreach: Biller().AdditionalPayments }"></div> </div> <div data-bind="template: { name: 'deferred-payment-options-template'}"></div> <div data-bind="if: Biller().PayLater()"> <div data-bind="template: { name: 'payLaterDate-template', data: $root, afterRender: BindPayLaterDate}"></div> </div> <div data-bind="if: AppState().Current == 'AdditionalPaymentEntry'"> <div class="row"> <div class="col-sm-12"> <div class="form-group"> <label for="CardNumber" style="margin-bottom: 15px;">Additional Payment</label> <div data-bind="template: { name: 'additional-payment-form-template', foreach: Biller().AdditionalPayments }"></div> </div> </div> </div> <div class="row"> <div data-bind="if: (AppState().Initial == 'BillerEntry' || AppState().Initial == 'CrnEntry')"> <div data-bind="css : !Biller().ShowNextButton() ? 'col-xs-12' : 'col-xs-6'"> <button class="btn btn-block button buttonsecondary" tabindex="19" data-bind="event: { click: BackButtonClick, keydown: BackButtonClick }"> <span class="glyphicon glyphicon-menu-left"></span> BACK </button> </div> </div> <div data-bind="if: (Biller().ShowNextButton() && AppState().Initial != 'CardEntry')"> <div data-bind="css: (AppState().Initial == 'BillerEntry' || AppState().Initial == 'CrnEntry') ? 'col-xs-6' : 'col-xs-12'"> <button id="btnValidateAdditionalPayments" class="btn btn-block button buttonprimary" tabindex="11" data-loading-text="Loading..." data-bind="event: { click: ValidateAdditionalPayments, keydown: ValidateAdditionalPayments }"> NEXT <span class="glyphicon glyphicon-menu-right"></span> </button> </div> </div> </div> </div> <div data-bind="if: (!Biller().IsTopUpsEnabled || (AppState().Current != 'AmountEntry' && AppState().Current != 'AdditionalPaymentEntry' ) || Biller().DeferredPayment)"> <div data-bind="if: (!Biller().DeferredPayment || Biller().PayNow() || Biller().PayLater())"> <div class="form-group"> <label data-bind="text: Biller().ShowWallets() || Biller().ShowDigitalWallets() ? 'Choose a Payment Method' : 'Accepted Cards'"></label> <div data-bind="if: Biller().ShowDigitalWallets()"> <div data-bind="if: Biller().DigitalWallets().find(o => o.Name == 'applepay')?.IsEnabled == true"> <div class="wallet-digital" data-bind="template: { name: 'apple-digital-wallet-template', data: $root }"></div> </div> <div data-bind="if: Biller().DigitalWallets().find(o => o.Name == 'googlepay')?.IsEnabled == true"> <div class="wallet-digital" data-bind="template: { name: 'accepted-digital-wallet-template', data: $root, afterRender: RenderGooglePayButton }"></div> </div> </div> <div data-bind="if: IsSurcharge"> <p class="form-control-static field-info"> Surcharges may apply <span style="font-size: 17px;" class="glyphicon glyphicon-info-sign" data-bind="event: { click: ShowSurchargeModal }"></span> </p> </div> <div class="row"> <div class="col-sm-6"> <div data-bind="template: { name: 'accepted-card-template', data: $root }"></div> </div> <div class="col-sm-6"> <div data-bind="template: { name: 'accepted-wallet-template', data: $root }"></div> </div> </div> </div> </div> </div> <div data-bind="if: AppState().Current == 'AmountEntry'"> <div class="row"> <div data-bind="if: (AppState().Initial == 'BillerEntry' || AppState().Initial == 'CrnEntry')"> <div data-bind="css : !Biller().ShowNextButton() ? 'col-xs-12' : 'col-xs-6'"> <button class="btn btn-block button buttonsecondary" tabindex="19" data-bind="event: { click: BackButtonClick, keydown: BackButtonClick }"> <span class="glyphicon glyphicon-menu-left"></span> BACK </button> </div> </div> <div data-bind="if: (Biller().ShowNextButton() && AppState().Initial != 'CardEntry')"> <div data-bind="css: (AppState().Initial == 'BillerEntry' || AppState().Initial == 'CrnEntry') ? 'col-xs-6' : 'col-xs-12'"> <button class="btn btn-block button buttonprimary" tabindex="20" data-bind="event: { click: PaymentOptionSelection, keydown: PaymentOptionSelection }"> NEXT <span class="glyphicon glyphicon-menu-right"></span> </button> </div> </div> </div> </div> </div> <div data-bind="visible: AppState().Current == 'CardEntry' || AppState().Current == 'KlarnaCheckout'"> <div data-bind="visible: PaymentOption() == 'card' || Biller().ShowWallets() == false"> <div data-bind="template: { name: 'card-form-template', data: $root }"></div> <div class="row" data-bind="if: $root.Is3ds"> <div class="col-sm-6"> <div class="form-group"> <label for="AccountName">Cardholder name</label> <input type="text" id="AccountName" class="form-control" tabindex="24" maxlength="50" aria-label="Cardholder Name" data-bind="textInput: AccountName" /> </div> </div> <div class="col-sm-6" data-bind="if: $root.HideEmailAddress == false"> <div class="form-group"> <label for="EmailAddress">Email address</label> <input type="text" id="EmailAddress" class="form-control" tabindex="25" aria-label="Email Address" data-bind="textInput: EmailAddress" /> </div> </div> </div> <div data-bind="if: IsSurcharge"> <div class="row"> <div class="col-sm-6"> <div data-bind="template: { name: 'amount-template', data: SurchargeAmount }"></div> </div> <div class="col-sm-6"> <div data-bind="template: { name: 'amount-template', data: TotalAmount }"></div> </div> </div> </div> <div class="row"> <div data-bind="if: AppState().Initial != 'CardEntry' || $root.BackButtonUrl"> <div class="col-xs-6"> <button class="btn btn-block button buttonsecondary" tabindex="25" data-bind="event: { click: BackButtonClick, keydown: BackButtonClick }"> <span class="glyphicon glyphicon-menu-left"></span> BACK </button> </div> </div> <div data-bind="css : (AppState().Initial != 'CardEntry' || $root.BackButtonUrl) ? 'col-xs-6' : 'col-xs-12'"> <button id="btnReviewPayment" class="btn btn-block button buttonprimary" tabindex="25" data-loading-text="Loading..." data-bind="event: { click: ReviewPayment, keydown: ReviewPayment }"> NEXT <span class="glyphicon glyphicon-menu-right"></span> </button> </div> </div> </div> <div data-bind="if: PaymentOption() == 'wallet' && WalletDetails()"> <div class="row"> <div id="walletselection" data-bind="foreach: { data: Biller().Wallets, as: 'wallet' }"> <div data-bind="template: { name: 'gateway-klarna-template', data: wallet, if:wallet.Name == 'klarna' }"></div> <div data-bind="template: { name: 'wallet-unionpay-template', data: wallet, if: wallet.Name == 'cup' && $root.WalletDetails().IsUnionPay }"></div> <div data-bind="template: { name: 'wallet-masterpass-template', data: wallet, if: wallet.Name == 'masterpass' && $root.WalletDetails().IsMasterPass }"></div> <div data-bind="template: { name: 'wallet-applepay-template', data: wallet, if: wallet.Name == 'applepay' && $root.WalletDetails().IsApplePay }"></div> <div data-bind="if: wallet.Name == 'amexwallet' && $root.WalletDetails().IsAmexWallet"> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-body" data-bind="attr: { tabindex: $index() + 16 }"> <div class="flexdiv"> <div class="v-middle"> <input type="radio" name="walletMethod" value="amexwallet" tabindex="15" data-bind="checked: $root.SelectedWalletName" />   </div> <div class="walletlogos"> <div style="margin: 0 auto;" class="walletlogo amexwallet" data-bind="attr: { 'aria-label': wallet.DisplayName }"> <amex:init data-bind="attr: { 'client_id': $root.WalletDetails().AmexClientId, 'env': $root.WalletDetails().AmexEnvironment, 'redirect_uri': $root.WalletDetails().AmexResponseUrl }" theme="desktop" disable_btn="false" button_color="dark" dialog_type="modal" display_type="custom"></amex:init> <amex:buy data-bind="attr: { 'encrypted_data': $root.WalletDetails().AmexEncryptedData }"></amex:buy> <script type="text/javascript" data-bind="attr: { 'src': $root.WalletDetails().AmexJsScriptUrl }"></script> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div data-bind="css: (AppState().Current == 'KlarnaCheckout' && KlarnaCanProceed() || $root.SelectedWalletName() !='') ? 'col-xs-6' : 'col-xs-12', if: AppState().Initial != 'CardEntry' || AppState().Current == 'KlarnaCheckout'"> <button class="btn btn-block button buttonsecondary" tabindex="24" data-bind="event: { click: BackButtonClick, keydown: BackButtonClick }"> <span class="glyphicon glyphicon-menu-left"></span> BACK </button> </div> <div data-bind="css: 'col-xs-6', if: ($root.PaymentOption() == 'wallet' && $root.SelectedWalletName() !='')"> <button class="btn btn-block button buttonprimary" tabindex="25" data-bind="event: { click: ProcessWalletCheckout, keydown: ProcessWalletCheckout }"> NEXT <span class="glyphicon glyphicon-menu-right"></span> </button> </div> </div> </div> </div> <div id="surchargeDisplayModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-bind="event: { click: HideSurchargeModal }"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Surcharge Details</h4> </div> <div class="modal-body"> <div data-bind="template: { name: 'surcharge-display-template', data: $root }"></div> </div> </div> </div> </div> <div id="whatiscvnModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-bind="event: { click: HideCvnModal }"><span aria-hidden="true">×</span></button> <h4 class="modal-title">What is CVN</h4> </div> <div class="modal-body"> <p>Where can I find my Card Verification Number?</p> <table class="table table-bordered"> <tr> <td class="text-center" style="vertical-align: middle;"> <ul class="list-inline cardlogos"> <li class="cardlogo mastercard"></li> <li class="cardlogo visa"></li> <li class="cardlogo dinersclub"></li> <li class="cardlogo jcb"></li> </ul> </td> <td> <img class="img-responsive center-block" alt="What is cvn" src="/pay/Views/Base/DefaultViews/images/whatiscvn_back.png" /> <p class="text-center">3 digits located on the back of your card</p> </td> </tr> <tr> <td class="text-center" style="vertical-align: middle;"> <ul class="list-inline cardlogos"> <li class="cardlogo americanexpress"></li> </ul> </td> <td> <img class="img-responsive center-block" alt="What is cvn" src="/pay/Views/Base/DefaultViews/images/whatiscvn_front.png" /> <p class="text-center">4 digits located on the front of your card</p> </td> </tr> </table> </div> </div> </div> </div> <div id="paymentReviewModal" class="modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div data-bind="if: ShowStoreCard() || (SelectedWalletName()!='googlepay' && SelectedWalletName()!='applepay')"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="26" data-bind="event: { click: CancelReviewPayment }"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Review Details</h4> </div> <div data-bind="if: !ShowStoreCard() && (SelectedWalletName()=='googlepay' || SelectedWalletName()=='applepay')"> <h4 class="modal-title">Processing payment</h4> </div> </div> <div class="modal-body"> <div data-bind="if: !ShowStoreCard() && (SelectedWalletName()=='googlepay' || SelectedWalletName()=='applepay')"> <div class="spinner-container"> <div class="spinner" ></div> </div> </div> <div id="recaptcha_error" class="alert alert-danger" style="display: none;"><p>Please complete the CAPTCHA.</p></div> <div data-bind="template: { name: 'review-table-template', data: $root }"></div> <div data-bind="if: (ShowStoreCard() && !Biller().PayLater() && SelectedWalletName()!='applepay' && SelectedWalletName()!='googlepay')"> <div class="row"> <div class="col-sm-5 col-md-4"> <span data-bind="text: Biller().TokeniseTxnLabel"></span> </div> <div class="col-sm-7 col-md-8"> <div class="checkbox" style="margin-top: 0;"> <label> <input type="checkbox" data-bind="checked: StoreCard" tabindex="39" /> <span data-bind="text: Biller().TokeniseTxnDescription"></span> </label> </div> </div> </div> </div> <div id="recaptcha_widget" class="row" data-bind="visible: ShowCaptcha() && SelectedWalletName()!='googlepay' && SelectedWalletName()!='applepay'"> <script async defer src='https://js.hcaptcha.com/1/api.js'></script><div class="h-captcha" data-sitekey="0d3a6514-3ef2-4eeb-bf48-29aaef7557fc"></div> </div> <div data-bind="if: ShowStoreCard() || (SelectedWalletName()!='googlepay' && SelectedWalletName()!='applepay')"> <div class="row"> <div class="col-xs-6"> <button class="btn btn-block button buttonsecondary" tabindex="40" data-bind="event: { click: CancelReviewPayment, keydown: CancelReviewPayment }"> <span class="glyphicon glyphicon-menu-left"></span> BACK </button> </div> <div class="col-xs-6" data-bind="if: !Biller().PayLater()"> <button id="btnProcessPayment" class="btn btn-block button buttonprimary" tabindex="41" data-loading-text="Loading..." data-bind="event: { click: ProcessPayment, keydown: ProcessPayment }"> PAY <span class="glyphicon glyphicon-menu-right"></span> </button> </div> <div class="col-xs-6" data-bind="if: Biller().PayLater()"> <button id="btnSchedulePayment" class="btn btn-block button buttonprimary" tabindex="41" data-loading-text="Loading..." data-bind="event: { click: SchedulePayment, keydown: SchedulePayment }"> SCHEDULE <span class="glyphicon glyphicon-menu-right"></span> </button> </div> </div> </div> </div> </div> </div> </div>  <div id="threeDS2_widget" style="display: none;" data-bind="html: AuthenticateTxn.InitialHtml"> </div> <div id="threeDSChallenge" class="modal" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="26"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Authentication Required</h4> </div> <div class="modal-body"> <div id="threeDS2_challenge" data-bind="visible: AuthenticateTxn.ShowChallengeIframe, html: AuthenticateTxn.ChallengeHtml" style="height: 500px;"> </div> <div id="threeDS_processingAuthentication" data-bind="ifnot: AuthenticateTxn.ShowChallengeIframe"> <h4>Processing authentication result...</h4> </div> </div> </div> </div> </div> <script type="text/html" id="review-table-template"> <table class="table table-striped"> <tr></tr>  <tr tabindex="27"> <td>Schedule Payment Date</td> <td data-bind="text: PayLaterDate"></td> </tr>   <tr tabindex="28"> <td>You are Paying</td> <td data-bind="text: MerchantTradingName"></td> </tr> <tr tabindex="29"> <td data-bind="text: Biller().BillerCodeName"></td> <td data-bind="text: Biller().BillerDetail"></td> </tr>    <tr data-bind="attr: {tabindex: $index() + 30}"> <td data-bind="text: Name"></td> <td data-bind="text: Value"></td> </tr>    <tr tabindex="34"> <td>Amount</td> <td><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: Amount.Value"></span></td> </tr>    <tr tabindex="35"> <td data-bind="text: Description"></td> <td><span data-bind="text: CurrencySymbol"></span> <span data-bind="text: Value"></span></td> </tr>     <tr tabindex="35"> <td>Total Amount (inc. surcharge)</td> <td><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: TotalAmount.Value"></span></td> </tr>   <tr tabindex="35"> <td>Total Amount</td> <td><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: TotalAmount.Value"></span></td> </tr>   <tr tabindex="35"> <td>Total Amount</td> <td><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: AmountWithAdditionalPayment.Value"></span></td> </tr>    <tr tabindex="36"> <td>Card Number</td> <td data-bind="text: DisplayCardNumber"></td> </tr> <tr tabindex="37"> <td>Expiry Date</td> <td data-bind="text: ExpiryMonth() + '/' + ExpiryYear()"></td> </tr>   <tr tabindex="38"> <td>Cardholder name</td> <td data-bind="text: AccountName"></td> </tr>   <tr tabindex="39"> <td>Email address</td> <td data-bind="text: EmailAddress"></td> </tr>   <tr style="vertical-align:middle" tabindex="40"> <td style="vertical-align:middle">Payment method</td> <td> <div class="applepaylogo"></div> </td> </tr>   <tr style="vertical-align:middle" tabindex="40"> <td style="vertical-align:middle">Payment method</td> <td> <div class="googlepaylogo"></div> </td> </tr>   <tr tabindex="41"> <td>Remember my card</td> <td> <input type="checkbox" id="StoreCard1" name="StoreCard1" data-bind="checked: StoreCard, event: { click: UpdateSessionForStoreCard, keydown: UpdateSessionForStoreCard } " tabindex="40"> By selecting this option you are giving us permission to securely store your card number for future use. <input type="hidden" id="Storecard" name="StoreCard" data-bind="value: StoreCard" /> </td> </tr>  </table> </script> <script type="text/html" id="biller-selection-template"> <div data-bind="if: MultipleBillers"> <div data-bind="template: { name: 'multi-biller-template', data: $root }"></div> </div> <div data-bind="if: !MultipleBillers"> <div data-bind="template: { name: 'selected-biller-template', data: $root }"></div> </div> </script> <script type="text/html" id="multi-biller-template"> <div class="form-group"> <label for="billerList" data-bind="text: Biller().BillerCodeName"></label> <div data-bind="css: { 'input-group': Biller().IsHelpText }"> <select id="billerList" class="form-control" data-bind="options: BillerList, optionsText: 'BillerDetail', value: Biller" tabindex="2"></select> <span data-bind="if: Biller().IsHelpText, css: { 'input-group-addon': Biller().IsHelpText }"> <span class="help-icon" tabindex="3" data-bind="attr: {'aria-label': Biller().HelpText}, event: { click: Biller().ToggleHelpText, keydown: Biller().ToggleHelpText, mouseout: Biller().ToggleHelpText, focusout: Biller().ToggleHelpText }"></span> </span> </div> <span data-bind="if: Biller().ShowHelpText"> <span class="helptip" data-bind="text: Biller().HelpText" tabindex="3"></span> </span> </div> </script> <script type="text/html" id="selected-biller-template"> <div data-bind="if: !HideBillerCode"> <div class="form-group" tabindex="2"> <label>You are paying</label> <p id="MerchantTradingName" class="form-control-static" data-bind="text: MerchantTradingName"></p> </div> <div class="form-group" tabindex="3"> <label data-bind="text: Biller().BillerCodeName"></label> <p class="form-control-static"><span data-bind="text: Biller().BillerDetail"></span></p> </div> </div> </script> <script type="text/html" id="crn-template"> <div data-bind="if: !Hide"> <div class="form-group" data-bind="attr: {tabindex: HideInput() ? $index() * 2 + 4 : null}"> <label data-bind="text: Name, attr: {'for': 'CRN' + Number}"></label> <div data-bind="if: HideInput()"> <p class="form-control-static"><span data-bind="text: Value"></span></p> </div> <div data-bind="if: !HideInput()"> <div data-bind="css: { 'input-group': IsHelpText }"> <input type="text" class="form-control" maxlength="50" data-bind="value: Value, attr: {id: 'CRN' + Number, tabindex: $index() * 2 + 4 }" /> <span data-bind="if: IsHelpText, css: {'input-group-addon': IsHelpText}"> <span class="help-icon" data-bind="attr: {'aria-label': HelpText, tabindex: $index() * 2 + 5 }, event: { click: ToggleHelpText, keydown: ToggleHelpText, mouseout: ToggleHelpText, focusout: ToggleHelpText }"></span> </span> </div> <span data-bind="if: ShowHelpText"> <span class="helptip" data-bind="text: HelpText"></span> </span> </div> </div> </div> </script> <script type="text/html" id="additional-payment-form-template"> <div data-bind="if: HideInput() && OptedInChecked()"> <label data-bind="text: Description, attr: {'for': 'AdditionalPayment' + ListOrder}"></label> <p class="form-control-static"> <span data-bind="text: CurrencySymbol"></span>  <span data-bind="text: Value"></span> </p> </div> <div data-bind="if: !HideInput()"> <label data-bind="text: Description, attr: {'for': 'AdditionalPayment' + ListOrder}"></label> <div data-bind="if: OptOutAllowed"> <input type="checkbox" id="OptedIn" name="OptedIn" data-bind="checked: OptedInChecked(), event: { click: UpdateOptedInChecked}, attr: { 'for': 'OptedIn' + ListOrder }"> <label> Opt-in</label> <br> </div> <div style="padding-bottom: 16px; "> <div class="input-group"> <span class="input-group-addon" data-bind="text: CurrencySymbol"></span> <input type="text" class="form-control" maxlength="15" tabindex="12" data-bind="value: Amount, attr: { disabled: AmountSetting ? 'disabled' : undefined, 'for': 'Amount' + ListOrder }, style: { 'border-radius': '0' }" /> <span data-bind="if: IsHelpText, css: {'input-group-addon': IsHelpText}"> <span class="help-icon" data-bind="attr: {'aria-label': HelpText, tabindex: $index() * 2 + 5 }, event: { click: ToggleHelpText, keydown: ToggleHelpText, mouseout: ToggleHelpText, focusout: ToggleHelpText }"></span> </span> </div> <span data-bind="if: ShowHelpText"> <span class="helptip" data-bind="text: HelpText"></span> </span> </div> </div> </script> <script type="text/html" id="amount-template"> <div data-bind="if: !(Hide || $root.Biller().HideCRNLookupAmount)"> <div class="form-group" data-bind="attr: {tabindex: HideInput() ? 12 : (LockInputField ? 25 : null)}"> <label data-bind="attr: { for : Id }"> <span data-bind="text: Name"></span> <span class="field-info" data-bind="if: ShowSurchargeInfo"> <span class="glyphicon glyphicon-info-sign" data-bind="event: { click: $parent.ShowSurchargeModal }"></span> </span> </label> <div data-bind="if: HideInput()"> <p class="form-control-static"> <span data-bind="text: CurrencySymbol"></span>  <span data-bind="text: Value"></span> </p> </div> <div data-bind="if: !HideInput()"> <div class="input-group"> <span class="input-group-addon" data-bind="text: CurrencySymbol"></span> <input type="text" class="form-control" maxlength="15" tabindex="12" data-bind="value: Value, attr: { disabled: LockInputField ? 'disabled' : undefined, id: Id }, style: { 'border-radius' : IsHelpText ? '0' : '0 4px 4px 0'}, event: { blur: ()=> { ValidateAmountBlur($root); } }" /> <span data-bind="if: IsHelpText, css: {'input-group-addon': IsHelpText}"> <span class="help-icon" tabindex="13" data-bind="attr: {'aria-label': HelpText }, event: { click: ToggleHelpText, keydown: ToggleHelpText, mouseout: ToggleHelpText, focusout: ToggleHelpText }"></span> </span> </div> <span data-bind="if: ShowHelpText"> <span class="helptip" data-bind="text: HelpText"></span> </span> </div> </div> </div> </script> <script type="text/html" id="accepted-card-template"> <div data-bind="css: { 'card-container': Biller().ShowWallets || DirectDebitAllowed, 'cardlogos': true }"> <div data-bind="if: Biller().ShowWallets || DirectDebitAllowed"> <div class="radio"> <label> <input type="radio" name="paymentMethod" value="card" tabindex="14" data-bind="checked: PaymentOption, event: { click: PaymentOptionSelection, keydown: PaymentOptionSelection }" /> Card </label> </div> </div> <ul class="list-inline" data-bind="foreach: Biller().Cards"> <li data-bind="text: DisplayName, attr: { class: 'cardlogo ' + Name, 'aria-label': DisplayName, title: DisplayName }"></li> </ul> </div> </script> <script type="text/html" id="accepted-bank-template"> <div data-bind="if: DirectDebitAllowed"> <div data-bind="css: { 'bankaccount-container': DataVaultAllowed, 'bankaccount-details': true }"> <div data-bind="if: DataVaultAllowed"> <div class="radio"> <label> <input type="radio" name="paymentMethod" value="bankaccount" tabindex="15" data-bind="checked: PaymentOption, event: { click: PaymentOptionSelection, keydown: PaymentOptionSelection }" /> Bank Account </label> </div> </div> <div data-bind="if: !DataVaultAllowed"> <label> Bank Account Details: </label> </div> <div class="form-horizontal"> <div class="form-group"> <label class="col-xs-6 col-sm-6 col-md-4 control-label">APCA User Name:</label> <div class="col-xs-6 col-sm-6 col-md-8"> <p class="form-control-static" data-bind="text: APCAUserName"></p> </div> </div> <div class="form-group"> <label class="col-xs-6 col-sm-6 col-md-4 control-label">APCA User ID:</label> <div class="col-xs-6 col-sm-6 col-md-8"> <p class="form-control-static" data-bind="text: APCAUserId"></p> </div> </div> </div> </div> </div> </script> <script type="text/html" id="accepted-wallet-template"> <div data-bind="if: Biller().ShowWallets"> <div class="walletlogos wallet-container"> <div class="radio"> <label> <input type="radio" name="paymentMethod" value="wallet" tabindex="15" data-bind="checked: PaymentOption, event: { click: PaymentOptionSelection, keydown: PaymentOptionSelection }" /> Other Payment Methods </label> </div> <div style="font-weight: bold;" data-bind="text: Biller().WalletsString"></div> </div> </div> </script> <script type="text/html" id="accepted-digital-wallet-template"> <div id="gpayButtonContainer"></div> </script> <script type="text/html" id="apple-digital-wallet-template"> <button id="applePayBtn" class="apple-pay-button" data-bind="event: { click: onApplePaymentButtonClicked, keydown: onApplePaymentButtonClicked }"></button> </script> <script type="text/html" id="wallet-masterpass-template"> <div class="col-sm-6"> <div class="panel panel-default" data-bind="attr: { tabindex: $index() + 16 }"> <div class="panel-body"> <div class="flexdiv"> <div class="v-middle"> <input type="radio" name="walletMethod" value="masterpass" tabindex="15" data-bind="checked: $root.SelectedWalletName" />   </div> <div class="walletlogos"> <div style="margin: 0 auto;" class="walletlogo masterpass-button" data-bind="text: DisplayName, attr: { 'aria-label': DisplayName }"></div> </div> </div> </div> </div> </div> </script> <script type="text/html" id="wallet-unionpay-template"> <div class="col-sm-6"> <div class="panel panel-default" data-bind="attr: { tabindex: $index() + 16 }"> <div class="panel-body"> <div class="flexdiv"> <div class="v-middle"> <input type="radio" name="walletMethod" value="cup" tabindex="15" data-bind="checked: $root.SelectedWalletName" />   </div> <div class="walletlogos"> <div style="margin: 0 auto;" class="walletlogo cup" data-bind="text: DisplayName, attr: { 'aria-label': DisplayName }"></div> </div> </div> </div> </div> </div> </script> <script type="text/html" id="wallet-applepay-template"> <div class="col-sm-6"> <div class="panel panel-default" data-bind="attr: { tabindex: $index() + 16 }"> <div class="panel-body"> <div class="flexdiv"> <div class="v-middle"> <input type="radio" name="walletMethod" value="applepay" tabindex="15" data-bind="checked: $root.SelectedWalletName" />   </div> <div> <div style="margin: 0 auto;" class="applepaylogo"></div> </div> </div> </div> </div> </div> </script> <script type="text/html" id="direct-wallet-applepay-template"> <div class="walletlogos"> <div style="margin: 0 auto;" class="walletlogo applepay" data-bind="text: DisplayName, attr: { 'aria-label': DisplayName, tabindex: $index() + 16 }, event: { click: $root.ProcessApplePay, keydown: $root.ProcessApplePay }"></div> </div> </script> <script type="text/html" id="gateway-klarna-template"> <div class="col-sm-6"> <div class="panel panel-default" data-bind="attr: { tabindex: $index() + 16 }, css: { loading: $root.KlarnaLoading() }"> <div class="panel-body"> <div class="flexdiv"> <div class="v-middle"> <input type="radio" name="walletMethod" value="klarna" tabindex="15" data-bind="checked: $root.SelectedWalletName, event: { click: $root.ProcessKlarnaInit, keydown: $root.ProcessKlarnaInit }" />   </div> <div class="walletlogos"> <div style="margin: 0 auto;" class="walletlogo klarna" data-bind="text: DisplayName, attr: { 'aria-label': DisplayName }"></div> </div> </div> <div class="text-left" style="margin-top: 5px;">  Loading..   Pay in four instalments of <span data-bind="text: $root.Amount.CurrencySymbol"></span> <span data-bind="text: $root.WalletDetails().KlarnaInstallmentAmount"></span>  </div> <div data-bind="visible: ($root.KlarnaLoaded() && $root.SelectedWalletName() =='klarna')"> <div class="row"> <div class="col-sm-6"> <div id="klarnaWidget"></div> </div> </div> </div> </div> </div> </div> </script> <script type="text/html" id="card-form-template"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="CardNumber">Card number</label> <div data-bind="css: { 'input-group' : TypedCardLogo }"> <input type="text" id="CardNumber" class="form-control" tabindex="20" maxlength="19" aria-label="Card Number" data-bind="textInput: CardNumber, event: { keyup: CalculateSurcharge, blur: CreditCardDetailsComplete }, attr: { disabled: IsTokenPayment ? 'disabled' : undefined }" /> <span data-bind="if: TypedCardLogo, css: { 'input-group-addon reduced-padding cardlogos-sm': TypedCardLogo }"> <span data-bind="text: TypedCardLogoName, attr: { class: 'cardlogo ' + TypedCardLogoName() }"></span> </span> </div> <span class="field-validation-error" style="display: none;"></span> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="ExpiryMonth">Expiry date</label> <div class="row"> <div class="col-xs-6"> <input type="text" id="ExpiryMonth" class="form-control" tabindex="21" maxlength="2" aria-label="Expiry Date Month" placeholder="MM" data-bind="textInput: ExpiryMonth, event: { blur: InitiateAuthenticationTxn } " /> </div> <div class="col-xs-6"> <input type="text" id="ExpiryYear" class="form-control" tabindex="22" maxlength="2" aria-label="Expiry Date Year" placeholder="YY" data-bind="textInput: ExpiryYear, event: { blur: InitiateAuthenticationTxn }" /> </div> </div> </div> </div> <div class="col-sm-6" data-bind="if: !Biller().PayLater()"> <div class="form-group"> <label for="CVN" class="field-info">CVN <span class="glyphicon glyphicon-info-sign" data-bind="event: { click: $parent.ShowCvnModal }"></span></label> <input type="text" id="CVN" class="form-control" tabindex="23" maxlength="4" aria-label="CVN" data-bind="textInput: CVN, event: { blur: InitiateAuthenticationTxn }" /> </div> </div> </div> </script> <script type="text/html" id="dv-card-form-template"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="CardNumber">Card number</label><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="Surcharge may apply"></span> <div data-bind="css: { 'input-group' : TypedCardLogo }"> <input type="text" id="CardNumber" class="form-control" tabindex="20" maxlength="19" aria-label="Card Number" data-bind="textInput: CardNumber, event: { keyup: RemoveSpaceForCardNumber}" /> <span data-bind="if: TypedCardLogo, css: { 'input-group-addon reduced-padding cardlogos-sm': TypedCardLogo }"> <span data-bind="text: TypedCardLogoName, attr: { class: 'cardlogo ' + TypedCardLogoName() }"></span> </span> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="ExpiryMonth">Expiry date</label> <div class="row"> <div class="col-xs-6"> <input type="text" id="ExpiryMonth" class="form-control" tabindex="21" maxlength="2" autocomplete="off" aria-label="Expiry Date Month" placeholder="MM" data-bind="value: ExpiryMonth" /> </div> <div class="col-xs-6"> <input type="text" id="ExpiryYear" class="form-control" tabindex="22" maxlength="2" autocomplete="off" aria-label="Expiry Date Year" placeholder="YY" data-bind="value: ExpiryYear" /> </div> </div> </div> </div> </div> <div class="form-group"> <label for="CardholderName">Cardholder Name</label> <input type="text" id="CardholderName" class="form-control" tabindex="23" maxlength="50" aria-label="Cardholder Name" data-bind="value: CardholderName" /> </div> </script> <script type="text/html" id="register-card-form-template"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="CardNumber">Card number</label> <div data-bind="css: { 'input-group' : TypedCardLogo }"> <input type="text" id="CardNumber" class="form-control" tabindex="20" maxlength="19" aria-label="Card Number" data-bind="textInput: CardNumber, event: { keyup: RemoveSpaceForCardNumber}" /> <span data-bind="if: TypedCardLogo, css: { 'input-group-addon reduced-padding cardlogos-sm': TypedCardLogo }"> <span data-bind="text: TypedCardLogoName, attr: { class: 'cardlogo ' + TypedCardLogoName() }"></span> </span> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="ExpiryMonth">Expiry date</label> <div class="row"> <div class="col-xs-6"> <input type="text" id="ExpiryMonth" class="form-control" tabindex="21" maxlength="2" autocomplete="off" aria-label="Expiry Date Month" placeholder="MM" data-bind="value: ExpiryMonth" /> </div> <div class="col-xs-6"> <input type="text" id="ExpiryYear" class="form-control" tabindex="22" maxlength="2" autocomplete="off" aria-label="Expiry Date Year" placeholder="YY" data-bind="value: ExpiryYear" /> </div> </div> </div> </div> </div> <div class="form-group"> <label for="CardholderName">Cardholder Name</label> <input type="text" id="CardholderName" class="form-control" tabindex="23" maxlength="50" aria-label="Cardholder Name" data-bind="value: CardholderName" /> </div> </script> <script type="text/html" id="bank-form-template"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="BSBNumber">BSB Number</label> <input type="text" id="BSBNumber" class="form-control" tabindex="20" maxlength="6" aria-label="BSB Number" data-bind="value: BSBNumber, event: { keyup: ShowBSBName, blur: ShowBSBName }, valueUpdate: 'afterkeydown'" /> <span data-bind="if: BSBName() != ''"><span data-bind="text: BSBName()"></span></span> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="DEAccountNumber">Account Number</label> <input type="text" id="DEAccountNumber" class="form-control" tabindex="21" maxlength="9" aria-label="DE Account Number" data-bind="value: DEAccountNumber" /> </div> </div> </div> <div class="form-group"> <label for="AccountName">Account Name</label> <input type="text" id="AccountName" class="form-control" tabindex="22" maxlength="50" aria-label="Account Name" data-bind="value: AccountName" /> </div> </script> <script type="text/html" id="surcharge-display-template"> <div data-bind="if: SurchargeInternational().length != 0 || SurchargeLocal().length != 0"> <p>The following surcharges apply for card payments:</p> </div> <p style="text-decoration: underline" data-bind="if: SurchargeInternational().length > 0">Cards issued within <span data-bind="text: MerchantCountry"></span></p> <div data-bind="if: SurchargeLocal().length > 0"> <table class="table table-striped"> <tbody data-bind="foreach: SurchargeLocal()"> <tr> <td data-bind="text: Name" style="width: 40%"></td> <td data-bind="text: Surcharge" style="width: 60%"></td> </tr> </tbody> </table> </div> <div data-bind="if: SurchargeInternational().length > 0"> <p style="text-decoration: underline">Cards issued outside of <span data-bind="text: MerchantCountry"></span></p> <table class="table table-striped"> <tbody data-bind="foreach: SurchargeInternational()"> <tr> <td data-bind="text: Name" style="width: 40%"></td> <td data-bind="text: Surcharge" style="width: 60%"></td> </tr> </tbody> </table> </div> <div data-bind="if: SurchargeInternational().length == 0 && SurchargeLocal().length == 0"> <p align="center"><b>No surcharge applies.</b></p> </div> <div data-bind="if: SurchargeLastUpdate() && SurchargeLastUpdate().length > 0"> <p align="center"> <i>Surcharge rates are up to date as of <b><span data-bind="text: SurchargeLastUpdate"></span></b> and are subject to change.</i> </p> </div> </script> <script type="text/html" id="email-template"> <div class="col-sm-6"> <div class="form-group"> <label for="EmailAddress">Email Address</label> <div class="input-group"> <input type="text" id="EmailAddress" class="form-control" tabindex="50" aria-label="Email Address" data-bind="value: EmailAddress, event: { copy: PreventDefault, paste: PreventDefault }, disable: EmailAddressDisabled" /> <span class="input-group-addon"> <span class="help-icon" tabindex="51" aria-label="HelpText" data-bind=" event: { click: ToggleHelpText, keydown: ToggleHelpText, mouseout: ToggleHelpText, focusout: ToggleHelpText }"></span> </span> </div> <span data-bind="if: ShowHelpText"><span class="helptip">An email will be sent to this email address to verify your identity</span></span> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="EmailAddressConfirm">Confirm Email Address</label> <input type="text" id="EmailAddressConfirm" class="form-control" tabindex="52" aria-label="Email Address Confirm" data-bind="value: EmailAddressConfirm, event: { copy: PreventDefault, paste: PreventDefault }, disable: EmailAddressDisabled" /> </div> </div> </script> <script type="text/html" id="deferred-payment-options-template"> <div data-bind="if: Biller().DeferredPayment"> <div class="form-group"> <div class="row"> <div class="col-xs-6"> <div class="options-container"> <div class="radio"> <label> <input type="radio" name="deferredPaymentMethod" value="PayNow" tabindex="13" data-bind="checked: DeferredPaymentOption, event: { click: DeferredPaymentOptionSelection, keydown: DeferredPaymentOptionSelection }" /> Pay Now </label> </div> </div> </div> <div class="col-xs-6"> <div class="options-container"> <div class="radio"> <label> <input type="radio" name="deferredPaymentMethod" value="PayLater" tabindex="13" data-bind="checked: DeferredPaymentOption, event: { click: DeferredPaymentOptionSelection, keydown: DeferredPaymentOptionSelection }" /> Pay Later </label> </div> </div> </div> </div> </div> </div> </script> <script type="text/html" id="payLaterDate-template"> <div class="form-group"> <label for="PayLaterDate">Pay On</label> <div data-bind="if: HidePayLaterDate()"> <p class="form-control-static"><span data-bind="text: PayLaterDate"></span></p> </div> <div data-bind="if: !HidePayLaterDate()" style="position: relative"> <input type="text" id="PayLaterDate" class="form-control" tabindex="14" maxlength="15" aria-label="Pay Later Date" data-bind="value: PayLaterDate" /> </div> </div> </script> <div id="mask"></div> </div> <div id="receiptSection" style="display: none;"> <input id="RetryPaymentUrl" name="RetryPaymentUrl" type="hidden" value="/pay/copyrightagencylimited?billercode=1345016" /> <div class="try-again" data-bind="if: IsPaymentPlan"> <div class="form-group" tabindex="1"> <label>Payment plan sign up</label> <p class="form-control-static">Direct Debit Request</p> </div> <p class="text-left" style="margin: 20px 0;">Sign up is completed and the first payment is processed.</p> <p class="text-left" style="margin: 20px 0;"> Thank you for signing up to this payment plan. Below is the receipt for the first transaction and the detail for the payment plan sign up. </p> </div> <div class="print-receipt pull-right hidden-xs" data-bind="if: IsApproved"> <a href="#" onclick="window.print();" tabindex="54"><span class="glyphicon glyphicon-print"></span> Print Receipt</a> </div> <div class="receipt-address" data-bind="html: ReceiptAddress"></div> <div data-bind="css : ReceiptTitleCss"> <span data-bind="css : ReceiptTitleIcon"></span> </div> <h4 class="text-center" style="margin: 20px 0;" data-bind="html: ReceiptTitle()"></h4> <table class="table table-striped"> <tr tabindex="42"> <td class="col-md-6" data-bind="text: ProcessedDateLabel()"></td> <td class="col-md-6" data-bind="text: ProcessedDate"></td> </tr>   <tr tabindex="43"> <td class="col-md-6">You have paid</td> <td class="col-md-6" data-bind="text: MerchantTradingName"></td> </tr>  <tr tabindex="44"> <td class="col-md-6" data-bind="text: Biller.BillerCodeName"></td> <td class="col-md-6" data-bind="text: Biller.BillerDetail"></td> </tr>    <tr tabindex="45"> <td class="col-md-6" data-bind="text: Name"></td> <td class="col-md-6" data-bind="text: Value"></td> </tr>    <tr tabindex="46"> <td class="col-md-6">  <span>Amount paid today</span>   <span>Amount to pay today</span>  </td> <td class="col-md-6"><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: Amount.Value"></span></td> </tr>   <tr> <td class="col-md-6"> <span data-bind="text: Description"></span> </td> <td class="col-md-6"> <span data-bind="text: CurrencySymbol"></span> <span data-bind="text: Amount"></span> </td> </tr>    <tr tabindex="47"> <td class="col-md-6">Total amount today (inc. surcharge)</td> <td class="col-md-6"><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: TotalAmount.Value"></span></td> </tr>   <tr tabindex="47"> <td class="col-md-6">Total amount today</td> <td class="col-md-6"><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: TotalAmount.Value"></span></td> </tr>   <tr tabindex="35"> <td>Total amount today</td> <td><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: AmountWithAdditionalPayment.Value"></span></td> </tr>    <tr tabindex="48"> <td class="col-md-6">Card number</td> <td class="col-md-6" data-bind="text: DisplayCardNumber"></td> </tr>   <tr tabindex="49"> <td class="col-md-6">Expiry date</td> <td class="col-md-6" data-bind="text: DisplayExpiryDate"></td> </tr>   <tr tabindex="50"> <td class="col-md-6">Cardholder name</td> <td class="col-md-6" data-bind="text: AccountName"></td> </tr>   <tr tabindex="51"> <td class="col-md-6">Payment method</td> <td class="col-md-6"><img src="https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg" alt="Klarna" /></td> </tr>   <tr tabindex="52"> <td class="col-md-6">Payment method</td> <td class="col-md-6"> <div style="margin: 0 auto;" class="applepaylogo"></div> </td> </tr>   <tr tabindex="53"> <td class="col-md-6">Payment method</td> <td class="col-md-6"> <div style="margin: 0 auto;" class="googlepaylogo"></div> </td> </tr>   <tr tabindex="54"> <td class="col-md-6">BSB number</td> <td class="col-md-6" data-bind="text: DEBsbNumber"></td> </tr> <tr tabindex="55"> <td class="col-md-6">Account number</td> <td class="col-md-6" data-bind="text: DisplayDEAccountNumber"></td> </tr> <tr tabindex="56"> <td class="col-md-6">Account name</td> <td class="col-md-6" data-bind="text: AccountName"></td> </tr>  </table> <div data-bind="if: IsRecurringPayment"> <h4 class="text-center" style="margin: 20px 0;">Detail for the payment plan sign up</h4> <table class="table table-striped"> <tr tabindex="55"> <td class="col-md-6"> <span>Total amount</span> </td> <td class="col-md-6"><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: PaymentPlanTotalAmount"></span></td> </tr> <tr tabindex="56"> <td class="col-md-6">Payment plan option</td> <td class="col-md-6" data-bind="text: PaymentPlanOptionName"></td> </tr> <tr tabindex="57"> <td class="col-md-6"> <span>Next payment</span> </td> <td class="col-md-6"><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: NextPaymentAmount"></span></td> </tr> <tr tabindex="58"> <td class="col-md-6">Next payment date</td> <td class="col-md-6" data-bind="text: NextPaymentPlanDate"></td> </tr> <tr tabindex="59"> <td class="col-md-6">No. of remaining payments</td> <td class="col-md-6" data-bind="text: NumRemainingPayments"></td> </tr> <tr tabindex="60"> <td class="col-md-6"> <span>Remaining amount to pay</span> </td> <td class="col-md-6"><span data-bind="text: Amount.CurrencySymbol"></span> <span data-bind="text: RemainingPaymentPlanAmount"></span></td> </tr> </table> </div> <div class="receipt-message" data-bind="text: ReceiptMessage"></div> <div data-bind="if: ShowEmailButton"> <div id="emailMessage"></div> <div id="emailSection" class="row"> <div class="col-sm-7 col-md-8"> <input type="text" class="form-control" tabindex="57" id="EmailAddress" data-bind="attr: { 'readonly': IsPaymentPlan }, value: EmailAddress" placeholder="Please enter your email address" maxlength="500" /> </div> <div class="col-sm-5 col-md-4"> <button id="btnSendEmail" class="btn btn-block button buttonprimary" tabindex="51" data-loading-text="Loading..." data-bind="event: { click: EmailReceipt, keydown: EmailReceipt }"> <span class="glyphicon glyphicon-envelope"></span> <span data-bind="text: EmailButtonText()"></span> </button> </div> </div> </div> <div data-bind="if: ShowSMSButton"> <div id="smsMessage"></div> <div id="smsSection" class="row" style="margin-top: 20px;"> <div class="col-sm-7 col-md-8"> <input type="text" class="form-control" tabindex="58" id="MobileNumber" data-bind="attr: { 'event-type': GetEventType }" placeholder="Please enter your mobile number" maxlength="15" /> </div> <div class="col-sm-5 col-md-4"> <button id="btnSendSMS" class="btn btn-block button buttonprimary" tabindex="53" data-loading-text="Loading..." data-bind="event: { click: SMSReceipt, keydown: SMSReceipt }"> <span class="glyphicon glyphicon-phone"></span> <span data-bind="text: SMSButtonText()"></span> </button> </div> </div> </div> <div data-bind="if: !IsFixed"> <div class="try-again" data-bind="if: !IsPaymentPlan"> Click <a data-bind="attr: { href: RetryPaymentUrl }" style="text-decoration: underline;" tab-index="59">here</a> to <span data-bind="text: IsApproved ? 'make another payment' : 'try again'"></span>. </div> <div class="try-again" data-bind="if: IsPaymentPlan"> Click <a data-bind="attr: { href: RetryPaymentUrl }" style="text-decoration: underline;" tab-index="59">here</a> to <span data-bind="text: IsApproved ? 'sign up for another payment plan' : 'try again'"></span>. </div> </div> <input id="RetryPaymentUrl" name="RetryPaymentUrl" type="hidden" value="/pay/copyrightagencylimited?billercode=1345016" /> </div> </div> <input id="DeviceFingerprint" name="DeviceFingerprint" type="hidden" value="" /> </div> </div> </div> <div id="copyright"> <div class="text-center" style="margin-bottom:2px;"> <a href="http://www.commbank.com.au/business/merchant-services/securepayments.aspx" target="_blank" aria-label="Secured by the Commonwealth Bank" class="footer-logo"> </a> </div> <div class="text-center"> <span>© Commonwealth Bank of Australia 2009-2024 ABN 48 123 123 124</span> </div> </div></div> <input id="TimeZoneOffset" name="TimeZoneOffset" type="hidden" value="+11:00" /> <input id="DateFormat" name="DateFormat" type="hidden" value="dd/mm/yyyy" /> <input id="TimeFormat" name="TimeFormat" type="hidden" value="hh:mm:ss A" /> <input id="CurrencySymbol" name="CurrencySymbol" type="hidden" value="AUD" /> <input id="ShortName" name="ShortName" type="hidden" value="copyrightagencylimited" /> <input id="ApplicationPath" name="ApplicationPath" type="hidden" value="/pay" /> <script src="/pay/bundles/base?v=jtJ5UX6_cDMpf_y3xF4xTafFbWdTI1yU0mR78W8nbJI1"></script> <script src="/pay/bundles/payment-common?v=Osa4GntCet8P3glyV_sckrgn5mn55qAv5VCAlqmTQH81"></script> <script src="/pay/Views/Base/DefaultViews/scripts/payment-merchant.js?v=1732380328" type="text/javascript"></script> <script language="JavaScript" type="text/javascript" src="https://pay.google.com/gp/p/js/pay.js" async></script> </body> </html>

CINXE.COM

BPOINT