61 lines
2.3 KiB
HTML
61 lines
2.3 KiB
HTML
{% extends "checkout/checkout_base.html" %}
|
|
{% load looper %}
|
|
{% load pipeline %}
|
|
|
|
{% block head %}
|
|
{% load static %}
|
|
<script src="{% static 'js/vendor/select2.min.js' %}"></script>
|
|
{% endblock %}
|
|
{% block after_header %}
|
|
<form id="payment-form" method="post" class="checkout-form pt-3"
|
|
data-looper-payment-form="true"
|
|
data-braintree-client-token="{{ client_token }}"
|
|
>{% csrf_token %}
|
|
<section class="checkout-form-fields">
|
|
<ul class="form">{{ form.as_ul }}</ul>
|
|
<div id="gateway-errors"></div>
|
|
</section>
|
|
<hr/>
|
|
{% if settings.GOOGLE_RECAPTCHA_SITE_KEY %}
|
|
<div id="recaptcha" class="g-recaptcha"
|
|
data-sitekey="{{ settings.GOOGLE_RECAPTCHA_SITE_KEY }}"
|
|
data-size="invisible"></div>
|
|
{% endif %}
|
|
<button id="submit-button" class="btn btn-filled-success w-100"
|
|
type="submit"
|
|
{# will be enabled when payment gateways are initialized successfully #}
|
|
aria-disabled="true" disabled
|
|
><i class="i-check"></i>Subscribe</button>
|
|
</form>{% endblock %}
|
|
{% block footer_scripts %}
|
|
{% include "looper/scripts.html" with with_recaptcha=True %}
|
|
<script>
|
|
//- Initialize the nicer country picker.
|
|
$('#id_country').select2();
|
|
|
|
//- Append the '.field-more-fields' button after the Full Name.
|
|
$('.field-full_name').append('\
|
|
<small class="field-more-fields js-show-full-form" title="You can set your billing information later">\
|
|
Billing Address <i class="i-chevron-down"></i> \
|
|
</small>');
|
|
|
|
//- Display all fields.
|
|
$('body').on('click', '.js-show-full-form', function(){
|
|
$(this).toggleClass('active');
|
|
let fieldsToShow = 'li.field-region, li.field-locality, li.field-company, li.field-country, li.field-postal_code, li.field-billing_email, li.field-street_address, li.field-vat_number';
|
|
$(fieldsToShow).toggleClass('show');
|
|
});
|
|
|
|
//- Append the '.field-more-billing_address' button to the street_address field.
|
|
$('.field-street_address').append('\
|
|
<div class="field-more-billing_address js-show-extended_address" title="Toggle extended address">\
|
|
<i class="i-plus"></i>\
|
|
</div>');
|
|
|
|
//- Display extended address field.
|
|
$('body').on('click', '.js-show-extended_address', function(){
|
|
$(this).toggleClass('active');
|
|
$('li.field-extended_address').toggleClass('show');
|
|
});
|
|
</script>{% endblock %}
|