Changeset View
Changeset View
Standalone View
Standalone View
subscriptions/templates/subscriptions/join/payment_method.html
| {% extends 'checkout/checkout_base.html' %} | {% extends 'checkout/checkout_base.html' %} | ||||
| {% load common_extras %} | {% load common_extras %} | ||||
| {% load looper %} | {% load looper %} | ||||
| {% load pipeline %} | {% load pipeline %} | ||||
| {% block content %} | {% block content %} | ||||
| <form id="payment-form" class="checkout-form" method="post" action="{% url 'subscriptions:join-confirm-and-pay' %}" | <form id="payment-form" class="checkout-form" method="post" action="{% url 'subscriptions:join-confirm-and-pay' %}" | ||||
| data-looper-payment-form="true" data-braintree-client-token="{{ client_token }}"> | data-looper-payment-form="true" data-braintree-client-token="{{ client_token }}"> | ||||
| {% include "subscriptions/components/header_jumbotron.html" %} | {% include "subscriptions/components/header_jumbotron.html" %} | ||||
| {% with form|add_form_classes as form %} | {% with form|add_form_classes as form %} | ||||
| <div class="container-xl my-4"> | <div class="container-xl my-4"> | ||||
| <div class="row"> | <div class="row"> | ||||
| <div class="col-md-7"> | <div class="col-md-7"> | ||||
| <section class="checkout-form-fields mb-3" style="opacity: .5;"> | <section class="checkout-form-fields mb-3" style="opacity: .5;"> | ||||
| <a href="{% url 'subscriptions:join' %}" class="btn btn-sm btn-dark float-right"><i | <a href="{% url 'subscriptions:join' %}" class="btn btn-sm btn-dark float-right"><i | ||||
| class="material-icons">arrow_back</i> Go back</a> | class="material-icons">arrow_back</i> Go back</a> | ||||
| <a href="{% url 'subscriptions:join' %}" class="mb-0 h3">Billing Details</a> | <a href="{% url 'subscriptions:join' %}" class="mb-0 h3">Billing Details</a> | ||||
| <p class="subtitle mb-2">Check your details below are correct before paying.</p> | <p class="subtitle mb-2">Check your details below are correct before paying.</p> | ||||
| <fieldset class="checkout-form-billing-address-readonly"> | <fieldset class="checkout-form-billing-address-readonly"> | ||||
| {% include "subscriptions/components/billing_address_form_readonly.html"%} | {% include "subscriptions/components/billing_address_form_readonly.html"%} | ||||
| </fieldset> | </fieldset> | ||||
| </section> | </section> | ||||
| <section> | <section> | ||||
| <h2 class="mb-0">Payment Method</h2> | <h2 class="mb-0">Payment Method</h2> | ||||
| <p class="subtitle mb-2">Select a payment method.</p> | <p class="subtitle mb-2">Select a payment method.</p> | ||||
| {% comment %} <div class="payment-method-toggle btn-group mb-3 w-100"> | {% comment %} <div class="payment-method-toggle btn-group mb-3 w-100"> | ||||
| <button class="btn btn-outline-input"><i class="material-icons">payment</i> Pay by Card or Paypal</button> | <button class="btn btn-outline-input"><i class="material-icons">payment</i> Pay by Card or Paypal</button> | ||||
| <button class="btn btn-outline-input"><i class="material-icons">account_balance</i> Pay by Bank | <button class="btn btn-outline-input"><i class="material-icons">account_balance</i> Pay by Bank | ||||
| Transfer</button> | Transfer</button> | ||||
| </div> {% endcomment %} | </div> {% endcomment %} | ||||
| <fieldset class="payment-form-payment-method"> | <fieldset class="payment-form-payment-method"> | ||||
| {{ form.non_field_errors }} | {{ form.non_field_errors }} | ||||
| {% include "subscriptions/components/payment_form.html" %} | {% include "subscriptions/components/payment_form.html" %} | ||||
| </fieldset> | </fieldset> | ||||
| </section> | </section> | ||||
| </div> | </div> | ||||
| <div class="col-md-5 col-lg-4 offset-lg-1"> | <div class="col-md-5 col-lg-4 offset-lg-1"> | ||||
| {% if GOOGLE_RECAPTCHA_SITE_KEY %} | {% if GOOGLE_RECAPTCHA_SITE_KEY %} | ||||
| <div id="recaptcha" class="g-recaptcha" data-sitekey="{{ GOOGLE_RECAPTCHA_SITE_KEY }}" data-size="invisible"> | <div id="recaptcha" class="g-recaptcha" data-sitekey="{{ GOOGLE_RECAPTCHA_SITE_KEY }}" data-size="invisible"> | ||||
| </div> | </div> | ||||
| {% endif %} | {% endif %} | ||||
| {% include "subscriptions/components/plan_selector.html" with disabled=True %} | {% include "subscriptions/components/plan_selector.html" with disabled=True %} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| {% endwith %} | {% endwith %} | ||||
| {% include 'subscriptions/components/footer_currency.html' %} | {% include 'subscriptions/components/footer_currency.html' %} | ||||
| </form> | </form> | ||||
| {% endblock content %} | {% endblock content %} | ||||
| {% block scripts %} | {% block scripts %} | ||||
| {% javascript "subscriptions" %} | {% javascript "subscriptions" %} | ||||
| {% include "looper/scripts.html" with with_recaptcha=True %} | {% include "looper/scripts.html" with with_recaptcha=True %} | ||||
| {% endblock scripts %} | {% endblock scripts %} | ||||