checkout.inc.twig

<!--

CONVENTIONS:

* ERRORS: Add .fc-alert-container- -error to the div.form-group
* Error messages are div.alert.alert-danger

* SUCCESS: Add .has-success to the div.form-group
* Success messages are div.alert.alert-success

* Info messages are div.alert.alert-info

-->
{% block checkout %}
{# do no remove this outer div;
   the data-fc-id="block-checkout" element
   must not be the most outer element #}
<div class="fc-checkout" role="application">
<div data-fc-id="block-checkout">
<div data-fc-error-notifier aria-live="polite" role="status"><h3 data-fc-notifier-text></h3></div>
{# BEGIN CHECKOUT TWIG TEMPLATE #}
<div class="fc-container">
<div id="fc-checkout-container" class="fc-checkout__main fc-checkout__row">




{% block sidebar %}
<div class="fc-sidebar fc-sidebar--checkout" role="complementary">

    {% block logo %}
    {% if config.store_logo_url %}
    <img id="fc-logo" src="{{ config.cache_path }}{{ config.store_logo_url }}" class="fc-logo__image" alt="{{ store_name }}">
    {% else %}
    <h1 class="fc-logotype">{{ config.store_name }}</h1>
    {% endif %}
    {% endblock logo %}

    <div data-fc-container="cart">
        {% include 'cart.inc.twig' %}
    </div>

</div><!-- .fc-sidebar.fc-sidebar--checkout -->
{% endblock sidebar %}


<div id="fc-main" class="fc-checkout__main__contents" role="main">

    {% block checkout_errors %}
        {% include 'errors.inc.twig' %}
    {% endblock checkout_errors %}

    {% block noscript_warning %}
    <noscript>
        <div id="fc-noscript-errors" class="fc-alert fc-alert--danger">
            <h2>{{ config.lang.checkout_warning|raw }}</h2>
            <p>{{ config.lang.checkout_no_javascript_message|raw }}</p>
        </div><!-- #fc-noscript-errors -->
    </noscript>
    {% endblock noscript_warning %}


    <form method="post" class="fc-checkout__main__form" data-fc-id="checkout-form" action="https://{{ config.store_domain }}/checkout" role="form">

        <div data-fc-id="required-hidden-fields">
        {% block required_hidden_fields %}
            <input type="hidden" id="ThisAction" name="ThisAction" value="checkout" />
            <input type="hidden" id="customer_id" name="customer_id" value="{{ customer_id_encoded }}" />
            <input type="hidden" id="{{ session_name }}" name="{{ session_name }}" value="{{ session_id }}" />
            <input type="hidden" id="is_anonymous" name="is_anonymous" value="{{ is_anonymous ? 1 : 0 }}" />
            <input type="hidden" id="anonymous_checkout_selected" name="anonymous_checkout_selected" value="{{ anonymous_checkout_selected ? 1 : 0 }}" />
            <input type="hidden" id="email_is_found" name="email_is_found" value="{{ email_is_found ? 1 : 0 }}" />

            {% if auth_token_is_valid %}
                <input type="hidden" id="foxy_auth_token" name="foxy_auth_token" value="{{ foxy_auth_token }}" />
                <input type="hidden" id="timestamp" name="timestamp" value="{{ timestamp }}" />
                <input type="hidden" id="foxy_customer_id" name="foxy_customer_id" value="{{ foxy_customer_id }}" />
            {% endif %}

            {# preserve paypal express variables #}
            {% if token != '' and payer_id != '' %}
                <input type="hidden" id="token" name="token" value="{{ token }}" />
                <input type="hidden" id="PayerID" name="PayerID" value="{{ payer_id }}" />
            {% endif %}
            {% for var_name, var_value in hosted_gateway_vars %}
                <input type="hidden" id="{{ var_name }}" name="{{ var_name }}" value="{{ var_value }}" />
            {% endfor %}
        {% endblock required_hidden_fields %}
        </div><!-- data-fc-id="required-hidden-fields" -->



<section data-fc-id="block-login-register" id="fc-checkout__section--email">
{% block login_register %}
    <fieldset id="fc-email">
        <legend><span class="fc-section-counter"></span> {{ config.lang.checkout_email|raw }}</legend>

        {# A trap to catch webkit's overagressive autofill. #}
        <div style="position:absolute; height:0px; width:0px; overflow:hidden; opacity:0; top:0px; left:0px;"><input type="text" name="email_dummy" data-fc-dummy tabindex="-1"/><input type="password" name="password_dummy" data-fc-dummy tabindex="-1"/></div>

        {# logic for setting the wrapper class regarding alerts, if one is needed #}
        {% if email_is_checking %}
            {% set message_class = 'fc-alert-container--info' %}
        {% elseif email_is_valid and email_is_found %}
            {% set message_class = 'fc-alert-container--success' %}
        {% elseif (email_check_timeout or not email_is_valid) %}
            {% set message_class = 'fc-alert-container--error' %}
        {% else %}
            {% set message_class = '' %}
        {% endif %}

        {% set error_string = utils.get_error_string('customer_email', messages.errors) %}
        {% set warning_string = utils.get_warning_string('customer_email', messages.warnings) %}
        <div class="fc-form-group {{ message_class }}">
            <div class="fc-container__grid--input--customer-email{% if error_string %} fc-alert-container--error{% endif %}" data-fc-error-for="customer_email" data-fc-error-class="fc-alert-container--error">
        {% if not customer_is_authenticated %}
            {# Not SSO authenticated #}
            <label for="customer_email" class="fc-form-label fc-form-label--customer-email">{{ config.lang.email_email|raw }}</label>
            <input type="email"
                id="customer_email"
                name="customer_email"
                value="{{ customer_email }}"
                placeholder="{{ config.lang.email_email }}"
                autocomplete="off"
                class="fc-form-control fc-form-control--customer-email"
                {% if is_subscription_cancel %}
                disabled
                {% endif %}
                formnovalidate
                autofocus />
            {% if warning_string != "" %}
                <div class="fc-alert fc-alert--warning">
                <p>{{ config.lang.checkout_modify_subscription_email_changed_notice|raw }}</p>
                </div>
            {% endif %}

            {% if email_is_valid %}
                {% if is_anonymous == 1 or (has_subscriptions == false and checkout_type == 'guest_only') %}
                {# guest checkout: do nothing #}
                {% else %}
                    {% if email_is_checking %}
                        <div class="fc-alert fc-alert--info">
                            <p>{{ config.lang.checkout_instructions_email_checking|raw }}</p>
                            <div class="fc-spinner">
                              <div class="bounce1"></div>
                              <div class="bounce2"></div>
                              <div class="bounce3"></div>
                            </div>
                        </div>
                    {% elseif email_is_found %}
                        <div class="fc-alert fc-alert--success{% if authentication_is_not_successful %} fc-alert-container--error{% endif %}" data-fc-error-for="customer_password" data-fc-error-class="fc-alert-container--error" data-fc-messaging-for="customer_email">
                            {% if display_welcome_message %}
                            <p>{{ config.lang.checkout_as_returning_customer|raw }}</p>
                            {% endif %}
                            <div class="fc-input-group fc-input-group--customer-password{% if authentication_is_successful or change_password %} fc-input-group--customer-password__authenticated{% endif %}">
                                <label for="customer_password" class="fc-form-label fc-form-label--customer-password">{{ config.lang.checkout_password|raw }}</label>
                                <input type="password"
                                    id="customer_password"
                                    name="customer_password"
                                    value="{{ customer_password }}"
                                    placeholder="{{ config.lang.checkout_password }}"
                                    autocomplete="current-password"
                                    class="fc-form-control fc-form-control--customer-password"
                                    aria-describedby="fc-login-message" />
                                <span class="fc-input-group__button">
                                    <button class="fc-button fc-button--sign-in" data-fc-id="sign-in" type="button">{{ config.lang.checkout_sign_in|raw }}</button>
                                </span>
                            </div>
                            {% if authentication_is_in_progress %}
                            <div class="fc-alert fc-alert--info">
                                <p>{{ config.lang.checkout_loading|raw }}
                                    <div class="fc-spinner">
                                      <div class="bounce1"></div>
                                      <div class="bounce2"></div>
                                      <div class="bounce3"></div>
                                    </div>
                                </p>
                            </div>

                            {% endif %}
                            {% if authentication_is_successful %}
                            <div class="fc-alert fc-alert--success">
                                {% if force_password_reset %}
                                <p id="fc-login-message">{{ config.lang.checkout_found_customer_force_password_reset|raw }}</p>
                                {% else %}
                                <p id="fc-login-message">{{ config.lang.checkout_found_customer_info_logged_in|raw }}</p>
                                {% endif %}
                            </div>
                            {% elseif authentication_is_not_successful %}
                            <div class="fc-alert fc-alert--danger">
                                <p id="fc-login-message">{{ config.lang.checkout_error_incorrect_password|raw }}</p>
                            </div>
                            {% endif %}
                            {% if temporary_password_sent %}
                            <div class="fc-alert fc-alert--info">
                                <p id="fc-login-message">{{ config.lang.checkout_password_sent_to|raw }} {{ customer_email }}{{ config.lang.checkout_password_sent_check_spam|raw }}</p>
                            </div>
                            {% endif %}
                            {% if password_expired %}
                            <div class="fc-alert fc-alert--danger">
                                <p id="fc-login-message">{{ config.lang.checkout_error_password_expired|raw }}</p>
                            </div>
                            {% endif %}
                            {% if change_password %}
                            <div class="fc-alert fc-alert--success">
                                <p id="fc-login-message">{{ config.lang.checkout_change_password_instructions|raw }}</p>
                            </div>
                            {% endif %}

                            <ul class="fc-password-actions fc-list--inline">
                            {% if authentication_is_successful %}
                                {% if change_password == false %}
                                <li class="fc-password-action--change fc-password-action">
                                    <small class="fc-password-action--button-container"><button data-fc-id="change-password" type="button" class="fc-button-link">{{ config.lang.checkout_change_my_password|raw }}</button></small>
                                </li>
                                {% endif %}
                            {% else %}
                                {% if change_password == false and temporary_password_sent == false %}
                                <li class="fc-password-action--reset fc-password-action">
                                    <small class="fc-password-action--button-container"><button data-fc-id="reset-password" type="button" class="fc-button-link">{{ config.lang.checkout_email_my_password|raw }}</button></small>
                                </li>
                                {% endif %}
                                {% if is_updateinfo == false and has_subscriptions == false and checkout_type != 'account_only' %}
                                <li class="fc-password-action--guest fc-password-action">
                                    <small class="fc-password-action--button-container"><button data-fc-id="checkout-as-guest" type="button" class="fc-button-link">{{ config.lang.checkout_as_guest|raw }}</button></small>
                                </li>
                                {% endif %}
                            {% endif %}
                            </ul>
                        </div>
                    {% elseif is_updateinfo %}
                        {% set error_string = utils.get_error_string('updateinfo',messages.errors) %}
                        {% if error_string %}
                        <div class="fc-alert fc-alert--danger">
                            <p>{{ config.lang.checkout_updateinfo_email_not_found|raw }}</p>
                        </div>
                        {% endif %}
                    {% elseif email_check_timeout %}
                        <div class="fc-alert fc-alert--danger">
                            <button data-fc-id="checkout-timeout-retry-link" type="button" class="fc-button-link">{{ config.lang.checkout_check_email_timeout|raw }}</button>
                        </div>
                    {% endif %}
                    {# email not found, do nothing #}
                {% endif %}
            {% else %}
                <div class="fc-alert fc-alert--danger">
                {{ config.lang.checkout_error_email|raw }}
                </div>
            {% endif %}
        {% else %}{# customer_is_authenticated #}
            {# Is SSO authenticated, email is readonly #}
            {# Why do we need a hidden email field below?
            If we use it for setting the email, it's unsafe. #}
            <input type="hidden" name="customer_email" id="customer_email" value="{{ customer_email }}" />
            <div class="fc-alert fc-alert--success">
                <p>{{ customer_email }}</p>
                <p>{{ config.lang.checkout_sso_already_logged_in|raw }}</p>
            </div>
        {% endif %}

            </div>
        </div>
    </fieldset>
{% endblock login_register %}
</section><!-- data-fc-id="block-login-register" -->


{% if not is_subscription_cancel %}

    {% set show_billing_address = true %}
    {% if config.template_config.custom_checkout_field_requirements['billing_first_name'] == 'hidden' and config.template_config.custom_checkout_field_requirements['billing_last_name'] == 'hidden' and config.template_config.custom_checkout_field_requirements['billing_address1'] == 'hidden' and config.template_config.custom_checkout_field_requirements['billing_address2'] == 'hidden' and config.template_config.custom_checkout_field_requirements['billing_city'] == 'hidden' and config.template_config.custom_checkout_field_requirements['billing_region'] == 'hidden' and config.template_config.custom_checkout_field_requirements['billing_postal_code'] == 'hidden' and config.template_config.custom_checkout_field_requirements['billing_country'] == 'hidden' %}
        {% set show_billing_address = false %}
    {% endif %}

    {# SHIPPING ADDRESS ===================================================== #}
    {% if shipping_address.has_shippable_products %}
        <section data-fc-id="block-customer-shipping" class="fc-checkout__section--customer-shipping-address">
        {% block customer_shipping %}
            {% if not has_multiship %}
                {% include "address.checkout.inc.twig" with {'address': shipping_address} %}
            {% else %}
                {% for multiship in multiship_data %}
                    {% include 'address.checkout.inc.twig' with {'address': multiship} %}
                {% endfor %}
            {% endif %}
            {% if show_billing_address and multiship_show_use_different_addresses %}
                {{ utils.use_different_addresses(use_different_addresses, config.lang) }}
            {% else %}
                <input type="hidden" id="use_different_addresses" name="use_different_addresses" value="0" />
            {% endif %}
        {% endblock customer_shipping %}
        </section><!-- data-fc-id="block-customer-shipping" -->
    {% endif %}

    {# BILLING ADDRESS ===================================================== #}
    {% if show_billing_address %}
    <section data-fc-id="block-customer-billing" class="fc-checkout__section--customer-billing-address">
    {% block customer_billing %}
        {% if use_alternate_shipping_address or not shipping_address.has_shippable_products %}
            {% include "address.checkout.inc.twig" with {'address': billing_address} %}
        {% endif %}
    {% endblock customer_billing %}
    </section><!-- data-fc-id="block-customer-billing" -->
    {% endif %}

    {# SHIPPING METHOD ===================================================== #}
    {% if shipping_address.has_shippable_products and not has_multiship %}
        <section data-fc-id="block-shipping-results" class="fc-checkout__section--shipping-results">
        {% if shipping_address.has_live_rate_shippable_products or shipping_address.shipping_results|length > 0 %}
            <fieldset data-fc-id="shipping-results">
                <legend><span class="fc-section-counter"></span> {{ config.lang.checkout_shipping_method|raw }}</legend>

                {% if shipping_address.loading_shipping_results %}
                    <div class="fc-spinner">
                      <div class="bounce1"></div>
                      <div class="bounce2"></div>
                      <div class="bounce3"></div>
                    </div>
                {% endif %}

                {% set id_error_string = utils.get_error_string('shipping_service_id', messages.errors) %}

                {% if shipping_address.shipping_results|length > 0 %}
                    {{ utils.shipping_results(shipping_address, "fc-input-group--full-page", messages.errors, config.lang) }}
                {% elseif id_error_string %}
                    <div class="fc-alert fc-alert--danger">
                        {{ config.lang.checkout_update_shipping_message|raw }}
                    </div>
                {% elseif shipping_address.loading_shipping_results == false %}
                    <h5 class="fc_checkout__shipping-results__help-text">{{ config.lang.checkout_update_shipping_message|raw }}</h5>
                {% endif %}

                {% set error_string = utils.get_error_string('shipping-results',messages.errors) %}

                {% if error_string %}
                <div class="fc-alert fc-alert--danger">
                    {{ error_string }}
                </div>
                {% endif %}

            </fieldset>
        {% endif %}
        <input
            id="shipping_service_description"
            type="hidden"
            name="shipping_service_description"
            value="{{ shipping_address.shipping_service_description }}"
        />
        <input
            id="shipping_service_signature"
            type="hidden"
            name="shipping_service_signature"
            value="{{ shipping_address.shipping_service_signature }}"
        />
        {% if config.template_config.custom_script_values.multiship_checkout_fields %}
            {% include template_from_string(config.template_config.custom_script_values.multiship_checkout_fields) %}
        {% endif %}
        </section><!-- data-fc-id="block-shipping-results" -->
    {% endif %}


    {# PAYMENT METHOD ===================================================== #}
    <section data-fc-id="block-payment-method" class="fc-checkout__section--payment">
    {% block payment_method %}
        {% set show_payment_type_block = config.supports_pay_with_plastic or config.supports_purchase_order or hosted_payment_gateways|length > 0 %}
        {% if show_payment_type_block %}
            {% set payment_method_input_type = config.has_multiple_payment_options or has_saved_cc ? 'radio' : 'hidden' %}
            <fieldset id="fc-payment" data-fc-container="payment">
                <legend><span class="fc-section-counter"></span> {{ config.lang.checkout_payment_method|raw }}</legend>

                {% if payment_info_required %}
                <svg id="fc-icon-lock-large" class="fc-svg-icon fc-svg-icon--lock hidden-xs hidden-sm" title="Security Icon" role="presentation"><use xlink:href="#fa-lock-large" /></svg>
                {% endif %}

                {% if config.supports_pay_with_plastic and payment_info_required %}

                    {% if has_saved_cc %}

                    {% set error_string = utils.get_error_string('cc_cvv2_saved',messages.errors) %}
                <div class="fc-form-group {% if error_string %}fc-alert-container--error{% endif %}" data-fc-id="payment-method-plastic-saved-group" data-fc-error-for="cc_cvv2_saved" data-fc-error-class="fc-alert-container--error">
                    <div id="fc-payment-method-plastic-saved" class="fc-container__grid--payment-method fc-payment-method--plastic__saved">
                        <div class="fc-input-group-container fc-input-group-container--radio {% if payment_method_type == "plastic_saved" %}fc-input-group-container--active{% endif %}">
                            <label for="fc_payment_method_plastic_saved" class="fc-input-group-container__title fc-form-label--plastic-saved fc-form-label">
                                <input type="hidden" name="cc_type" id="cc_type" value="{{ cc_type }}" />
                                <input type="radio"
                                    {{ checked(payment_method_type, 'plastic_saved') }}
                                    id="fc_payment_method_plastic_saved"
                                    name="fc_payment_method"
                                    value="plastic_saved"
                                    autocomplete="off"
                                    class="fc-form-control--plastic-saved--checkbox fc-form-control"/>
                                {% if cc_type %}
                                    <span class="fc-checkout__section--payment__method__logo"><img data-fc-id="card_type_img" src="//cdn.foxycart.com/static/images/payment_logos/sets/smashing/{{ cc_type|lower }}.png" alt="{{ cc_type }}" /></span>
                                {% else %}
                                    <span class="fc-checkout__section--payment__method__logo"><img data-fc-id="card_type_img" src="//cdn.foxycart.com/static/images/payment_logos/sets/smashing/visa.png" alt="visa" /></span>
                                {% endif %}
                                {{ config.lang.checkout_use_saved_payment_info|raw }}
                                <span class="fc-payment-method-plastic-saved  fc-payment-method--plastic-saved__card-number " data-fc-id="masked-card">{{ cc_number_masked }}</span>
                                <input type="hidden" name="cc_number_masked" id="cc_number_masked" value="{{ cc_number_masked }}" />
                                <input type="hidden" name="cc_exp_year_saved" id="cc_exp_year_saved" value="{{ cc_exp_year }}" />
                                <input type="hidden" name="cc_exp_month_saved" id="cc_exp_month_saved" value="{{ cc_exp_month }}" />
                            </label>


                            {% if payment_method_type == "plastic_saved" %}
                                <svg class="fc-svg-icon fc-svg-icon--lock visible-xs visible-sm" title="Secured Icon" role="presentation"><use xlink:href="#fa-lock" /></svg>
                                <div class="fc-form-group">
                                    <label for="" class="fc-form-label__plastic-saved-expiration fc-form-label">{{ config.lang.checkout_expiration|raw }}</label>
                                    <div class="fc-container__static--plastic-saved-expiration ">
                                        <p class="fc-form-control--static">{{ cc_exp_month }}/{{ cc_exp_year }}</p>
                                    </div>
                                </div>
                                {% if is_updateinfo == false and ((config.template_config.csc_requirements == "all_cards" and is_uoe == false) or (config.template_config.csc_requirements == "sso_only" and customer_is_authenticated)) %}
                                <div class="fc-form-group">
                                    <label class="fc-form-label fc-form-label--cvv2-saved " for="cc_cvv2_saved">{{ config.lang.checkout_card_verification_code|raw }}</label>
                                    <div class="fc-container__grid--static--plastic-saved-csc">
                                        <input type="tel"
                                            id="cc_cvv2_saved"
                                            name="cc_cvv2_saved"
                                            value="{{ cc_cvv2_saved }}"
                                            maxlength="4"
                                            placeholder="{{ config.lang.checkout_csc }}"
                                            autocomplete="off"
                                            class="fc-form-control fc-form-control--cvv2-saved" />
                                    </div>
                                </div>
                                {% endif %}
                            {% endif %}

                            <div class="fc-alert fc-alert--danger {{ error_string ? 'show' : 'hidden' }}" data-fc-error-for="cc_cvv2_saved" data-fc-error-class="show,hidden">
                                {{ config.lang.checkout_error_verification_code|raw }}
                            </div>
                        </div>
                    </div>
                </div>
                    {% endif %}{# has_saved_cc #}

                    {% set cvv2_error_string = utils.get_error_string('cc_cvv2',messages.errors) %}
                    {% set cc_number_error_string = utils.get_error_string('cc_number',messages.errors) %}

                <div class="fc-form-group" data-fc-id="fc-payment-method-plastic-new" data-fc-error-for="cc_number cc_exp_month cc_exp_year cc_cvv2" data-fc-error-class="fc-alert-container--error">
                    <div id="fc-payment-method-plastic-new" class="fc-container__grid--payment-method fc-payment-method--plastic__new">
                        <div class="fc-input-group-container {% if payment_method_input_type == 'radio' or has_saved_cc %}fc-input-group-container--radio{% endif %} {% if payment_method_type == 'plastic_new' %}fc-input-group-container--active{% endif %}">
                            <label for="fc_payment_method_plastic_new" class="fc-form-label--plastic-new {% if payment_method_input_type != 'radio' %}fc-input-group-container__title fc-input-group-container__title--forced{% else %} fc-input-group-container__title{% endif %}">
                                <input type="{{ payment_method_input_type }}"
                                    {{ checked(payment_method_type, 'plastic_new') }}
                                    id="fc_payment_method_plastic_new"
                                    name="fc_payment_method"
                                    value="plastic_new"
                                    class="fc-form-control--plastic-new--checkbox fc-form-control" />
                            {% for card_type in config.template_config.supported_payment_cards %}
                                <span class="fc-checkout__section--payment__method__logo
                                fc-checkout__section--payment__method__logo--{{ card_type }}">
                                    <img class="fc-checkout__section--payment__method__logo--{{ card_type }}" src="//cdn.foxycart.com/static/images/payment_logos/sets/smashing/{{ card_type }}.png" alt="{{ card_type }}" />
                                </span>
                            {% endfor %}
                            {% if has_saved_cc %}
                            {# Show the text only when there's a saved card #}
                            <span class="fc-form-label--plastic-new__text">{{ config.lang.checkout_enter_new_card|raw }}</span>
                            {% endif %}
                            </label>
                            {% if payment_method_type == 'plastic_new' %}
                            <div class="fc-form-group fc-form-group-multiple-inline {% if cc_number_error_string %}fc-alert-container--error{% endif %}" data-fc-error-for="cc_number" data-fc-error-class="fc-alert-container--error,fc-alert-container--success">
                                <label class="fc-form-label fc-form-label--new-cc-number" for="cc_number">{{ config.lang.checkout_card_number|raw }}</label>
                                <div class="fc-container__grid--input--plastic-new-card-number">
                                    <input type="tel"
                                        id="cc_number"
                                        name="cc_number"
                                        value="{{ cc_number }}"
                                        maxlength="16"
                                        placeholder="{{ config.lang.checkout_card_number }}"
                                        autocomplete="cc-number"
                                        class="fc-form-control fc-form-control--new-cc-number" />
                                    <svg class="fc-svg-icon fc-svg-icon--lock fc-cc-icon visible-xs visible-sm" title="Security Icon" role="presentation"><use xlink:href="#fa-lock" /></svg>
                                </div>
                            </div>
                            <div class="fc-form-group fc-form-group-multiple-inline">
                                <label class="fc-form-label--new-cc-exp-month fc-form-control--static fc-form-label" for="cc_exp_month">{{ config.lang.checkout_expiration|raw }}</label>
                                <label class="fc-form-label fc-form-label--new-cc-exp-year" for="cc_exp_year">{{ config.lang.cart_year|raw }}</label>
                                <label class=" fc-form-label fc-form-label--new-cc-cvv2" for="cc_cvv2">{{ config.lang.checkout_cart_verification_code|raw }}</label>
                                {% set field_name = 'cc_exp_month' %}
                                {% set error_string = utils.get_error_string(field_name, messages.errors) %}
                                <div id="fc-payment-method-plastic-expires-month" class="fc-container__grid--plastic-new-exp-month {% if error_string %}fc-alert-container--error{%endif %}" data-fc-error-for="{{ field_name }}" data-fc-error-class="fc-alert-container--error,has-success">
                                    <select class="fc-form-control--new-cc-exp-month fc-form-control" name="cc_exp_month" id="cc_exp_month" autocomplete="cc-exp-month" >
                                        <option value="">{{ config.lang.cart_month|raw }}</option>
                                        {% for month in config.cc_expiration_months %}
                                        <option value="{{ month.value }}" {{ selected(cc_exp_month, month.value) }}>
                                            {{ month.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                {% set field_name = 'cc_exp_year' %}
                                {% set error_string = utils.get_error_string(field_name, messages.errors) %}
                                <div id="fc-payment-method-plastic-expires-year" class="fc-container__grid--plastic-new-exp-year {% if error_string %}fc-alert-container--error{%endif %}" data-fc-error-for="{{ field_name }}" data-fc-error-class="fc-alert-container--error,has-success">
                                    <select class="fc-form-control--new-cc-exp-year fc-form-control" name="cc_exp_year" id="cc_exp_year" autocomplete="cc-exp-year" >
                                        <option value="">{{ config.lang.cart_year|raw }}</option>
                                        {% for year in config.cc_expiration_years %}
                                        <option value="{{ year }}" {{ selected(cc_exp_year, year) }}>
                                            {{ year }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                {% set field_name = 'cc_cvv2' %}
                                {% set error_string = utils.get_error_string(field_name, messages.errors) %}
                                <div id="fc-payment-method-plastic-csc" class="fc-container__grid--plastic-new-csc {% if error_string %}fc-alert-container--error{%endif %}" data-fc-error-for="cc_cvv2" data-fc-error-class="fc-alert-container--error,has-success">
                                    <input type="tel"
                                        id="cc_cvv2"
                                        name="cc_cvv2"
                                        value="{{ cc_cvv2 }}"
                                        maxlength="4"
                                        placeholder="{{ config.lang.checkout_csc }}"
                                        autocomplete="off"
                                        class="fc-form-control fc-form-control--new-cc-cvv2"
                                         />
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        <div class="fc-alert fc-alert--danger {{ cvv2_error_string ? 'show' : 'hidden' }}" data-fc-error-for="cc_cvv2" data-fc-error-class="show,hidden">
                            {{ config.lang.checkout_error_verification_code|raw }}
                        </div>
                        <div class="fc-alert fc-alert--danger {{ cc_number_error_string ? 'show' : 'hidden' }}" data-fc-error-for="cc_number" data-fc-error-class="show,hidden">
                            {{ config.lang.checkout_error_card_number|raw }}
                        </div>
                    </div>
                </div>
                {% endif %}{# config.supports_pay_with_plastic and payment_info_required #}

                {% if payment_info_required and show_paypal_express_payment_option and not is_updateinfo %}
                <div class="fc-form-group">
                    <div id="fc-payment-method-paypal" class="fc-container__grid--payment-method fc-payment-method--paypal">
                        <div class="fc-input-group-container {% if payment_method_input_type == 'radio' or has_saved_cc %}fc-input-group-container--radio{% endif %} {% if payment_method_type == 'paypal' %}fc-input-group-container--active{% endif %}">
                            <label class="fc-input-group-container__title {% if payment_method_input_type == 'hidden' %}fc-input-group-container__title--forced{% endif %}">
                                <input type="{{ payment_method_input_type }}"
                                    {{ checked(payment_method_type, 'paypal') }}
                                    id="fc_payment_method_paypal"
                                    name="fc_payment_method"
                                    value="paypal"
                                    autocomplete="off"
                                    class="fc-form-control fc-form-control--paypal" />
                                {{ config.lang.checkout_pay_with_paypal|raw }}
                            </label>
                            {% if payment_method_type == 'paypal' %}
                            <div class="fc-form-group fc-form-group-multiple-inline">
                                {% if paypal_payer_email %}
                                    {{ config.lang.checkout_payment_method_paypal_confirmed|raw }}
                                    <span>{{ paypal_payer_email }}</span>
                                {% else %}
                                    {{ config.lang.checkout_payment_method_paypal|raw }}
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}{# show_paypal_express_payment_option and not is_updateinfo #}

                {% if not is_updateinfo and payment_info_required %}
                    {% for hosted_gateway in hosted_payment_gateways if ((hosted_gateway.supports_subscriptions == false and has_subscriptions == false) or hosted_gateway.supports_subscriptions) %}
                <div class="fc-form-group">
                    <div id="fc-payment-method-{{ hosted_gateway.type }}" class="fc-container__grid--payment-method fc-payment-method--{{ hosted_gateway.type }}">
                        <div class="fc-input-group-container {% if payment_method_input_type == 'radio' or has_saved_cc %}fc-input-group-container--radio{% endif %} {% if payment_method_type == hosted_gateway.type %}fc-input-group-container--active{% endif %}">
                            <label class="fc-input-group-container__title {% if payment_method_input_type == 'hidden' %}fc-input-group-container__title--forced{% endif %}">
                                <input type="{{ payment_method_input_type }}"
                                    {{ checked(payment_method_type, hosted_gateway.type) }}
                                    id="fc_payment_method_{{ hosted_gateway.type }}"
                                    name="fc_payment_method"
                                    value="{{ hosted_gateway.type }}"
                                    autocomplete="off"
                                    class="fc-form-control fc-form-control--{{ hosted_gateway.type }}" />
                                {{ hosted_gateway.lang_pay_with|raw }}
                            </label>
                            {% if hosted_gateway.type == 'paypal_plus' %}
                            <div id="ppplus"></div>
                            <input type="hidden" name="paymentId" value="{{ paymentId }}"/>
                            {% endif %}
                            {% if payment_method_type == hosted_gateway.type %}
                            <div class="fc-form-group fc-form-group-multiple-inline">
                                {{ hosted_gateway.lang_payment_method }}
                            </div>
                            {% endif %}
                        </div>
                        {% if hosted_gateway.type == 'paypal_plus' %}
                        <div class="paypal-plus-error fc-alert fc-alert--danger {{ fc_payment_method_paypal_plus ? 'show' : 'hidden' }}" data-fc-error-for="fc_payment_method_paypal_plus" data-fc-error-class="show,hidden">
                            {{ config.lang.checkout_validation_paypal_plus_error|raw }}
                        </div>
                        {% endif %}
                    </div>
                </div>
                    {% endfor %}
                {% endif %}{# not is_updateinfo and payment_info_required #}

                {% if config.supports_purchase_order and not is_updateinfo and payment_info_required %}
                <div class="fc-form-group" data-fc-error-for="purchase_order" data-fc-error-class="fc-alert-container--error">
                    <div id="fc-payment-method-purchase-order" class="fc-container__grid--payment-method fc-payment-method--purchase-order">
                        {% set po_error_string = utils.get_error_string('purchase_order', messages.errors) %}
                        <div class="fc-input-group-container {% if payment_method_input_type == 'radio' %}fc-input-group-container--radio{% endif %} {% if payment_method_type == 'purchase_order' %}fc-input-group-container--active{% endif %}">
                            <label class="fc-input-group-container__title {% if payment_method_input_type == 'hidden' %}fc-input-group-container__title--forced{% endif %}">
                                <input type="{{ payment_method_input_type }}"
                                    {{ checked(payment_method_type, 'purchase_order') }}
                                    id="fc_payment_method_purchase_order"
                                    name="fc_payment_method"
                                    value="purchase_order"
                                    autocomplete="off"
                                    class="fc-form-control fc-form-control--po"/>
                                {{ config.lang.checkout_pay_with_purchase_order|raw }}
                            </label>
                            {% if payment_method_type == 'purchase_order' %}
                            <div class="fc-form-group">
                                <label class="fc-container__grid--label--po fc-form-label" for="purchase_order">{{ config.lang.checkout_purchase_order_number|raw }}</label>
                                <div class="fc-container__grid--input--po">
                                    <input type="text"
                                        id="purchase_order"
                                        name="purchase_order"
                                        value="{{ purchase_order }}"
                                        maxlength="100"
                                        placeholder=""
                                        autocomplete="off"
                                        data-fc-required
                                        class="fc-form-control fc-form-control--po"/>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        <div class="fc-alert fc-alert--danger {{ po_error_string ? 'show' : 'hidden' }}" data-fc-error-for="purchase_order" data-fc-error-class="show,hidden">
                            <div class="">{{ config.lang.checkout_error_purchase_order|raw }}</div>
                        </div>
                    </div>
                </div>
                {% endif %}{# config.supports_purchase_order and not is_updateinfo and payment_info_required #}

                {% if not payment_info_required %}
                <div class="fc-form-group">
                    <div id="fc-payment-method-no-payment-needed" class="fc-container__grid--payment-method fc-payment-method--no-payment fc-payment-method col-md-8 col-md-offset-3">
                    {{ config.lang.checkout_no_payment_needed|raw }}
                    </div>
                </div>
                {% endif %}{# payment_info_required #}

            </fieldset>
        {% endif %}{# show_payment_type_block #}
    {% endblock payment_method %}
    </section><!-- data-fc-id="block-payment-method" -->


    {# ADDITIONAL FIELDS ===================================================== #}
    <section data-fc-id="block-additional-fields">
    {% block additional_fields %}
        <fieldset id="fc-additional-fields">
            <legend><span class="fc-section-counter"></span> {{ config.lang.checkout_almost_done|raw }}</legend>

            {% if config.template_config.custom_script_values.checkout_fields %}
                {% include template_from_string(config.template_config.custom_script_values.checkout_fields) %}
            {% endif %}

            {% if config.template_config.tos_checkbox_settings.usage != "none" and config.template_config.tos_checkbox_settings.url != '' %}
            <div class="fc-form-group">
                {% set field_name = 'tos_agreement' %}
                {% set error_string = '' %}
                {% if config.template_config.tos_checkbox_settings.usage == "required" %}
                    {% set error_string = utils.get_error_string(field_name, messages.errors) %}
                {% endif %}
                {% set hidden_field_prefix = '' %}
                {% if config.template_config.tos_checkbox_settings.is_hidden %}
                    {% set hidden_field_prefix = 'h:' %}
                {% endif %}
                <div class="fc-checkout__additional-field--tos {% if error_string %}fc-alert-container--error{%endif %}" data-fc-error-for="{{ field_name }}" data-fc-error-class="fc-alert-container--error">
                    <div class="fc-input-group-container fc-input-group-container--checkbox">
                        <label class="fc-input-group-container__title fc-form-label fc-form-label--tos">
                            <input type="hidden" name="{{ hidden_field_prefix }}tos_agreement" value="false" />
                            <input type="checkbox"
                                id="tos_agreement"
                                name="{{ hidden_field_prefix }}tos_agreement"
                                value="true"
                                class="fc-form-control fc-form-control--tos"
                                {{ checked(tos_agreement == 'true') }} />
                            {{ config.lang.checkout_tos|replace({
                                '{{url}}': config.template_config.tos_checkbox_settings.url
                            })|raw }}
                        </label>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if customer_in_the_eu and config.template_config.eu_secure_data_transfer_consent.usage != "none" %}
                {% set field_name = 'secure_data_transfer_consent' %}
                {% set error_string = utils.get_error_string(field_name, messages.errors) %}
                <div class="fc-form-group" data-fc-container="secure-transfer" data-fc-error-for="{{ field_name }}" data-fc-error-class="fc-alert-container--error">
                    <div class="fc-checkout__additional-field--secure-transfer">
                        <div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
                            <label data-fc-id="secure-transfer-label" class="fc-input-group-container__title fc-form-label fc-form-label--secure-transfer">
                                <input type="hidden" name="secure_data_transfer_consent" value="false" />
                                <input type="checkbox"
                                    id="secure_data_transfer_consent"
                                    name="secure_data_transfer_consent"
                                    value="true"
                                    data-fc-required
                                    class="fc-form-control fc-form-control--secure-transfer"
                                    {{ checked(secure_data_transfer_consent == 'true') }} />
                                {{ config.lang.checkout_secure_data_transfer_consent_display }}
                            </label>
                            <div class="fc-form-group">
                                <p>
                                    {{ config.lang.checkout_secure_data_transfer_consent }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if config.template_config.newsletter_subscribe.usage != "none" %}
            <div class="fc-form-group">
                <div class="fc-checkout__additional-field--subscribe">
                    <div class="fc-input-group-container fc-input-group-container--checkbox">
                        <label class="fc-input-group-container__title fc-form-label fc-form-label--subscribe">
                            <input type="hidden" name="newsletter_subscribe" value="0" />
                            <input type="checkbox"
                                name="newsletter_subscribe"
                                value="1"
                                class="fc-form-control fc-form-control--subscribe"
                                {{ checked(newsletter_subscribe == '1') }} />
                            {{ config.lang.checkout_newsletter_subscribe|raw }}
                        </label>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if (anonymous_checkout_selected == false) and (change_password or force_password_reset or ((is_updateinfo == false) and (email_is_found == false) and (has_subscriptions or (checkout_type != "guest_only")))) %}
            {% set error_string = utils.get_error_string('new_customer_password',messages.errors) %}
            <div class="fc-form-group" data-fc-container="account-creation" data-fc-error-for="new_customer_password" data-fc-error-class="fc-alert-container--error">
                <div class="fc-checkout__additional-field--save-account">
                    <div class="fc-input-group-container fc-input-group-container--checkbox {% if has_subscriptions or checkout_type == 'account_only' or create_account or force_password_reset or change_password %}fc-input-group-container--active{% endif %}">
                        {% if checkout_type == 'account_only' or change_password or force_password_reset %}

                        <label data-fc-id="account-creation-label" class="fc-input-group-container__title fc-form-label  fc-input-group-container__title--forced">
                            {{ config.lang.checkout_create_an_account|raw }}
                        </label>

                        {% elseif has_subscriptions == false %}

                        <label data-fc-id="account-creation-label" class="fc-input-group-container__title fc-form-label">
                            <input
                                type="checkbox"
                                name="create_account"
                                id="create_account"
                                value="1"
                                class="fc-form-control fc-form-control--create-account"
                                {% if create_account %}checked{% endif %}
                                />
                            {{ config.lang.checkout_create_an_account|raw }}
                        </label>

                        {% endif %}

                        {% if has_subscriptions or create_account or change_password or force_password_reset or checkout_type == 'account_only' %}
                        <div class="fc-form-group">
                            <p>{{ config.lang.checkout_no_account_enter_password|raw }}</p>
                            {% if force_password_reset %}
                                {# put some text here...? #}
                            {% endif %}
                            <input type="password"
                                id="new_customer_password"
                                name="new_customer_password"
                                minlength="8"
                                placeholder="{{ config.lang.checkout_password }}"
                                autocomplete="new-password"
                                class="fc-form-control fc-form-control--new-customer-password"
                                data-fc-required
                                value="{{ new_customer_password }}"
                                />
                        </div>
                        {% endif %}
                    </div>
                    <div class="fc-alert fc-alert--danger {{ error_string ? 'show' : 'hidden' }}" data-fc-error-for="new_customer_password" data-fc-error-class="show,hidden">
                        <div class="">{{ config.lang.checkout_error_password|raw }}</div>
                    </div>
                </div>
            </div>
            {% endif %}
        </fieldset>
    {% endblock additional_fields %}
    </section><!-- data-fc-id="block-additional-fields" -->

    {% if use_recaptcha %}
    <section data-fc-id="block-recaptcha" class="fc-checkout__section--recaptcha">
    {% block recaptcha %}
        <div class="fc-form-group">
            <div id="fc-recaptcha" class="fc-container__grid--recaptcha"></div>
        </div>
    {% endblock %}
    </section>
    {% endif %}

    {# SUBMIT BUTTON ===================================================== #}
    <section data-fc-id="block-submit-button" class="fc-checkout__section--submit">
    {% block submit_button %}
        <div class="fc-form-group">
            {% if payment_method_type in ["plastic_new", "plastic_saved"] %}
                {% if config.template_config.use_checkout_confirmation_window.usage == "required" %}
                    {% set checkout_button_text = config.lang.checkout_confirm_your_purchase %}
                    {% set checkout_button_helper_text = config.lang.checkout_payment_confirmation %}
                {% else %}
                    {% set checkout_button_text = config.lang.checkout_complete_your_purchase %}
                    {% set checkout_button_helper_text = '' %}
                {% endif %}
            {% else %}
                {% set checkout_button_helper_text = config.lang['checkout_payment_method_' ~ payment_method_type] %}
                {% set checkout_button_text = config.lang.checkout_complete_your_purchase %}
            {% endif %}
            {% if is_updateinfo %}
                {% set checkout_button_text = config.lang.checkout_update_my_information %}
                {% set checkout_button_helper_text = '' %}
            {% endif %}
            {% if is_subscription_modification %}
                {% set checkout_button_text = config.lang.checkout_update_my_subscription %}
                {% set checkout_button_helper_text = '' %}
            {% endif %}
            <div class="fc-container__grid--checkout-submit">

                <button class="fc-button fc-button--submit" {% if loading_submit %}disabled{% endif %} data-fc-id="submit-button">
                    {% if loading_submit %}
                        <div class="fc-spinner">
                          <div class="bounce1"></div>
                          <div class="bounce2"></div>
                          <div class="bounce3"></div>
                        </div>
                    {% else %}
                        {{ checkout_button_text|raw }}
                    {% endif %}
                </button>
            </div>
            {% if checkout_button_helper_text %}
            <div class="fc-container__grid--checkout-submit-helper-text">
                <p class="fc-container__checkout-helper-text">
                    <small>{{ checkout_button_helper_text }}</small>
                </p>
            </div>
            {% endif %}
        </div>
    {% endblock submit_button %}
    </section><!-- data-fc-id="block-submit-button" -->


{% else %}{# is_subscription_cancel #}
    <section data-fc-id="block-additional-fields">
        <fieldset id="fc-additional-fields">
            <legend><span class="fc-section-counter"></span> {{ config.lang.checkout_almost_done|raw }}</legend>
            <div id="fc-submit" class="fc-form-group"></div>
        </fieldset>
    </section>

    <section data-fc-id="block-subscription-cancel">
    {% block subscription_cancel %}
        <div id="fc-submit" class="fc-form-group">
            <div class="fc-container__grid--checkout-subscription-cancel">
                <button class="fc-button fc-button--subscription-cancel" data-fc-id="submit-button">{{ config.lang.checkout_cancel_my_subscription|raw }}</button>
            </div>
            <div class="fc-container__grid--checkout-subscription-cancel-helper-text">
                <p class="fc-container__subscription-cancel-helper-text">
                    <small>{{ config.lang.checkout_subscription_cancel_helper_text|raw }}</small>
                </p>
            </div>
        </div>
    {% endblock subscription_cancel %}
    </section><!-- data-fc-id="block-subscription-cancel" -->

{% endif %}

    </form>
    </div>{# #fc-main #}

{% if config.supports_address_validation %}
    {% include 'address.validation.inc.twig' %}
{% endif %}

{% if config.template_config.custom_config.upsell.enabled %}
    <div data-fc-id="block-upsell-modal-container" style="display:none;">
        {% block upsell_modal_container %}
            <div class="fc-modal fc-upsell-modal">
                <div class="fc-alert fc-alert--info" data-fc-id="block-upsell-modal">{% block upsell_modal %}{% endblock upsell_modal %}</div>
            </div>
        {% endblock upsell_modal_container %}
    </div>
{% endif %}

</div><!-- #fc-checkout__main -->
</div><!-- .fc-container -->
<!-- END CHECKOUT TWIG TEMPLATE -->
</div><!-- data-fc-id="checkout" -->
</div>
{% endblock checkout %}