zulip/templates/corporate/upgrade.html

{% extends "zerver/portico.html" %}

{% block customhead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ render_bundle('landing-page') }}
{{ render_bundle('billing') }}
{% endblock %}

{% block content %}
<div class="app portico-page">

    {% include 'zerver/billing_nav.html' %}

    {{ render_bundle('translations') }}

    <div class="portico-landing billing-upgrade-page">
        <div class="hero small-hero"></div>

        <div class="page-content">
            <div class="main">
                {% if error_message %}
                <div class="alert alert-danger" id="error-message-box">
                    {{ error_message }}
                </div>
                {% endif %}
                <h1>{% trans %}Upgrade to {{ plan }}{% endtrans %}</h1>
                <form method="post">
                    {{ csrf_input }}
                    <input type="hidden" name="seat_count" value="{{ seat_count }}">
                    <input type="hidden" name="signed_seat_count" value="{{ signed_seat_count }}">
                    <input type="hidden" name="salt" value="{{ salt }}">
                    <div class="payment-schedule">
                        <h3>{{ _("Payment schedule") }}</h3>
                        <label>
                            <input type="radio" name="plan" value="{{ nickname_annual }}" data-amount="{{ cloud_annual_price }}" checked />
                            <div class="box">
                                <div class="schedule-time annually">{{ _("Pay annually") }}</div>
                                <div class="schedule-amount">
                                    ${{ cloud_annual_price_per_month }}/user/month
                                    <div class="schedule-amount-2">
                                        (${{ cloud_annual_price }}/user/year)
                                    </div>
                                </div>
                            </div>
                        </label>
                        <label>
                            <input type="radio" name="plan" value="{{ nickname_monthly }}" data-amount="{{ cloud_monthly_price }}" />
                            <div class="box">
                                <div class="schedule-time">{{ _("Pay monthly") }}</div>
                                <div class="schedule-amount">${{ cloud_monthly_price }}/user/month</div>
                            </div>
                        </label>
                    </div>
                    <p>
                        You&rsquo;ll initially be charged
                        <b>$<span id="charged_amount">{{ cloud_annual_price * seat_count }}</span></b>
                        for <b>{{ seat_count }}</b> users. We’ll automatically charge you
                        when new users are added, or give you credit when users are deactivated.
                    </p>
                    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                    data-key="{{ publishable_key }}"
                    data-image="/static/images/logo/zulip-icon-128x128.png"
                    data-name="Zulip"
                    data-description="Zulip Cloud Premium"
                    data-locale="auto"
                    data-zip-code="true"
                    data-billing-address="true"
                    data-panel-label="Make payment"
                    data-email="{{ email }}"
                    data-label="{{ _('Add card') }}"
                    data-allow-remember-me="false"
                    >
                    </script>
                    <script>
                        const seat_count = parseInt($('input[name=seat_count]').val());
                        $("input[type=radio][name=plan").change(function () {
                            var charged_amount = parseInt($(this).data("amount")) * seat_count;
                            $("#charged_amount").html(charged_amount);
                        });
                    </script>
                </form>
                <p>We can also bill by invoice for annual contracts over $2,000. Contact <a href="mailto:support@zulipchat.com">support@zulipchat.com</a> to pay by invoice or for any other billing questions.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}