gaf-mobile/app/views/verify-payment.html

GAF mobile Web site

<div class="deposit scroll-container" fl-analytics-section="PaymentVerification">
    <!-- Loading state -->
    <div class="loading-container" ng-if="ctrl.loading">
        <div class="loadingicon">Loading...</div>
    </div>

    <!-- Page Header -->
    <header class="PageHeader">
        <div class="section-inner">
            <h1 class="PageHeader-title">Payment Verification</h1>
        </div>
    </header>

    <div>
       <h3 class="deposit-creditCardDetails-header"> Credit Card Details </h3>

        <iframe id="iframe-payment-method-cc" class="deposit-creditCardForm deposit-creditCardForm--verify" ng-src="{{ctrl.iframe}}"></iframe>

        <p class="alert alert-info deposit-creditCardDetails-notice" ng-if="ctrl.membershipFee"> At the conclusion of the trial period, you will be charged {{ctrl.membershipFee}}.</p>
        <p class="alert alert-info deposit-creditCardDetails-notice" ng-if="ctrl.isPostProject"> You need to verify your payment source before posting another project. </p>
    </div>

    <section class="section-inner">
        <aside ng-messages="ctrl.errors" class="deposit-error-message">
            <span class="validation validation-error" ng-message="verifySetupFailure">
                <span class="icon-notification"> </span>
                Unable to set up payment verification. Please try again.
            </span>
            <span class="validation validation-error" ng-message="confirmError">
                <span class="icon-notification"> </span>
                Unable to authorize your card. Please try another card or contact your bank if this problem continues.
            </span>
            <span class="validation validation-error" ng-message="unknownError">
                <span class="icon-notification"> </span>
                {{ctrl.errors.unknownError}}
            </span>
        </aside>

        <button type="button" class="deposit-creditCardDetails-btn btn btn-primary" ng-click="ctrl.verifyPaymentMethod()" fl-analytics="VerifyPaymentMethod" fl-analytics-subsection="CreditCard">
            Continue
        </button>

        <div class="deposit-gateway">
            <!-- Accepted Credit Cards -->
            <span class="deposit-creditCardList">
                <h6 class="deposit-creditCardList-header"><strong> Accepted Cards </strong></h6>
                <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-visa.svg" alt="Deposit with PayPal"></fl-svg>
                <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-mastercard.svg" alt="Deposit with PayPal"></fl-svg>
                <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-amex.svg" alt="Deposit with PayPal"></fl-svg>
                <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-jcb.svg" alt="Deposit with PayPal"></fl-svg>
                <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-visa-electron.svg" alt="Deposit with PayPal"></fl-svg>
                <fl-svg class="deposit-creditCardList-icon" src="/images/deposit/credit-cards/cc-delta.svg" alt="Deposit with PayPal"></fl-svg>
            </span>
        </div>

        <div class="deposit-security">
            <img class="deposit-security-icon" src="/images/deposit/payment-encryption-lock@3x.png" alt="Secure encrypted payments">
            <p class="deposit-security-desc">This is a secure 128 bit SSL encrypted payment.</p>
        </div>
    </section>
</div>