moep/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Update hosting payment template to use added cards

Browse source
This commit is contained in:
PCoder 2017-10-21 23:12:53 +02:00
parent 303eb4112d
commit 7f4993c3f0
2 changed files with 40 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
hosting/static/hosting/css/commons.css
View file

@ -294,6 +294,26 @@
font-size: 16px;
}
.payment-container .credit-card-info {
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.credit-card-info {
display: flex;
}
.credit-card-info .align-bottom{
align-self: flex-end;
padding-right: 0 !important;
}
.another-card-text {
padding: 20px 0;
font-size: 18px;
font-weight: 700;
}
.credit-card-form {
max-width: 360px;
}

52
hosting/templates/hosting/payment.html
View file

@ -66,49 +66,37 @@
</form>
</div>
<div class="col-xs-12 col-sm-7 col-md-6 creditcard-box dcl-creditcard">
{% with card_list_len=cards_list|length %}
<h3><b>{%trans "Credit Card"%}</b></h3>
<hr>
<div>
<p>
{% if card_list_len > 0 %}
{% blocktrans %}Please select one of the previous cards that you used or fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %}
{% else %}
{% blocktrans %}Please fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %}
{% endif %}
</p>
<div>
{% if credit_card_data.last4 %}
<form role="form" id="payment-form-with-creditcard" novalidate>
<h5 class="billing-head">Credit Card</h5>
<h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
<h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
<input type="hidden" name="credit_card_needed" value="false"/>
</form>
{% if not messages and not form.non_field_errors %}
<p class="card-warning-content card-warning-addtional-margin">
{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
</p>
{% endif %}
<div id='payment_error'>
{% for message in messages %}
{% if 'failed_payment' or 'make_charge_error' in message.tags %}
<ul class="list-unstyled">
<li>
<p class="card-warning-content card-warning-error">{{ message|safe }}</p>
</li>
</ul>
{% endif %}
{% endfor %}
{% for error in form.non_field_errors %}
<p class="card-warning-content card-warning-error">
{{ error|escape }}
</p>
{% endfor %}
{% for card in cards_list %}
<div class="credit-card-info">
<div class="col-xs-6 no-padding">
<h5 class="billing-head">{% trans "Credit Card" %}</h5>
<h5 class="membership-lead">{% trans "Last" %} 4: ***** {{card.last4}}</h5>
<h5 class="membership-lead">{% trans "Type" %}: {{card.brand}}</h5>
</div>
<div class="col-xs-6 text-right align-bottom">
<a class="btn choice-btn choice-btn-faded" href="">{% trans "SELECT" %}</a>
</div>
</div>
<div class="text-right">
<button id="payment_button_with_creditcard" class="btn btn-vm-contact" type="submit">{%trans "SUBMIT" %}</button>
</div>
{% else %}
{% include "hosting/includes/_card_input.html" %}
{% endfor %}
{% if card_list_len > 0 %}
<div class="another-card-text">Use another card</div>
{% endif %}
{% include "hosting/includes/_card_input.html" %}
</div>
</div>
{% endwith %}
</div>
</div>
</div>