cart.html

{% extends "base.html" %}

{% block body_top_template %}
  {% include "saas/_body_top_template.html" %}
{% endblock %}

{% block content %}
<section id="app">
<div class="container">
  <div class="page-header text-lg-center pt-4">
    {% block order_title %}
    <h2 class="h4">{% trans %}Complete Order{% endtrans %}</h2>
    {% endblock %}
  </div>
  <div class="row">
    <div class="col-md-12">
      <form method="post" id="payment-form" class="form-horizontal"
            action=".{% if next %}/?next={{next}}{% endif %}">
        <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
        {% if invoicables %}
        {% include "saas/_invoiceables.html" %}
        {% elif is_extra_charge %}
        <fieldset id="extra-charge">
          <legend>{% trans %}Extra Charge{% endtrans %}</legend>
          <div class="form-group{% if form.descr.errors %} has-error{% endif %}">
            <label class="col-form-label" for="descr">{% trans %}Description{% endtrans %}</label>
            <div class="controls">
              <input id="descr" class="form-control" name="descr"
                     type="text" placeholder="{% trans %}Description for the charge{% endtrans %}" />
            </div>
            {% for error in form.descr.errors %}
            <span class="form-text"><strong>{{error}}</strong></span>
            {% endfor %}
          </div>
          <div class="form-group{% if form.amount.errors %} has-error{% endif %}">
            <label class="col-form-label" for="amount">{% trans %}Amount{% endtrans %}</label>
            <div class="controls">
              <input id="amount"  class="form-control"
                     type="number" min="0" step="any" placeholder="0"
                     name="amount" autocomplete="off" />
            </div>
            {% for error in form.amount.errors %}
            <span class="form-text"><strong>{{error}}</strong></span>
            {% endfor %}
          </div>
        </fieldset>
        {% else %}
        {% block no_invoicables %}
        <p class="text-center">{% trans %}Your subscription cart is empty.{% endtrans %}</p>
        {% endblock %}
        {% endif %}

        {% block order_footer %}
        <div id="redeem-code" class="text-end mt-3 mb-5">
          {# `csrfmiddlewaretoken` is added back here because the `Redeem`    #}
          {# javascript component will look for it within the "#redeem-code"  #}
          {# element. #}
          <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
          <a href="" class="collapsible text-decoration-none">{% trans %}Have a registration code?{% endtrans %}</a>
          {# Implementation note: If we use `d-block` instead of    #}
          {# `style="display: block;"` the dropdown shows even when #}
          {# `hasItems` is `False`.                                 #}
          <div class="mt-3" style="display:none;">
            <div class="row justify-content-end">
              <div class="col-12 col-md-4">
                <div class="input-group input-group mb-1">
                  <input class="form-control" name="code" type="text" placeholder="{% trans %}Enter Code{% endtrans %}" aria-label="{% trans %}Enter registration code{% endtrans %}">
                  <button class="btn btn-primary submit-code">{% trans %}Apply{% endtrans %}</button>
                </div>
                <!-- <small class="form-text text-muted text-start">
                     {% trans %}If you received a registration code, please enter it here.{% endtrans %}
                     </small> -->
              </div>
            </div>
          </div>
        </div>
        {% endblock %}

        {% block order_card %}
        {% include "saas/_card_use.html" %}
        <div class="form-group text-center py-5">
          <button type="submit" class="btn btn-primary btn-md payment-submit px-5">
            {% if submit_title %}
            {{submit_title}}
            {% else %}
            {% if force_update %}
            {% trans %}Update{% endtrans %}
            {% else %}
            {% trans %}Pay Now{% endtrans %}
            {% endif %}
            {% endif %}
          </button>
        </div>
        {% endblock %}
      </form>
    </div>
  </div>
</div>
</section>
{% endblock %}

{% block bodyscripts %}
{% if STRIPE_PUB_KEY %}
{% if STRIPE_INTENT_SECRET %}
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
{% else %}
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
{% endif %}
{% endif %}
<script type="text/javascript" src="{{'/assets/vendor/jquery.payment.js'|asset}}"></script>
{% if ASSETS_DEBUG %}
<script type="text/javascript" src="{{'/assets/js/djaodjin-postal.js'|asset}}"></script>
<script type="text/javascript" src="{{'/assets/js/djaodjin-saas.js'|asset}}"></script>
<script type="text/javascript" src="{{'/assets/js/djaodjin-stripe.js'|asset}}"></script>
{% else %}
<script type="text/javascript" src="{{'/assets/cache/saas.js'|asset}}"></script>
{% endif %}
<script type="text/javascript" {{request|csp_nonce}}>
    jQuery(document).ready(function($) {
        $(".collapsible").click(function(event) {
            var self = this;
            event.preventDefault();
            $(self).next().toggle();
            $(self).next().find('input').focus();
        });

        $("#redeem-code").redeem({
            'saas_api_redeem_coupon': "{{ urls.api_redeem }}"
        });

        var cardForm = $("#payment-form");
        {% if urls and urls.api_cart %}
        if( cardForm.length > 0 ) {
            cardForm.find("#invoicables").invoice({
                currency_unit: "{% if lines_price %}{{ lines_price.unit }}{% endif %}",
                saas_api_cart: "{{ urls.api_cart }}"
            });
        }
        {% endif %}
        {% if STRIPE_PUB_KEY %}
        cardForm.card({
            stripePubKey: "{{ STRIPE_PUB_KEY }}",
            stripeIntentSecret: {% if STRIPE_INTENT_SECRET %}"{{ STRIPE_INTENT_SECRET }}"{% else %}null{% endif %},
            stripeAccount: {% if STRIPE_ACCOUNT %}"{{ STRIPE_ACCOUNT }}"{% else %}null{% endif %},
            saas_api_card: "{{ urls.organization.api_card }}",
            cardNumberLabel: "{% trans %}Card Number{% endtrans %}",
            securityCodeLabel: "{% trans %}Security Code{% endtrans %}",
            expirationLabel: "{% trans %}Expiration{% endtrans %}",
            cardHolderLabel: "{% trans %}Card Holder{% endtrans %}",
            streetAddressLabel: "{% trans %}Street address{% endtrans %}",
            localityLabel: "{% trans %}City/Town{% endtrans %}",
            regionLabel: "{% trans %}State/Province/County{% endtrans %}",
            postalCodeLabel: "{% trans %}Zip/Postal code{% endtrans %}",
            countryLabel: "{% trans %}Country{% endtrans %}",
            fieldsCannotBeEmptyError: " {% trans %}field(s) cannot be empty.{% endtrans %}"
        });
        {% endif %}
    });
</script>
{% endblock %}