diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css index ca320afa..33381370 100644 --- a/hosting/static/hosting/css/commons.css +++ b/hosting/static/hosting/css/commons.css @@ -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; } diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html index a10cfbca..7cadb530 100644 --- a/hosting/templates/hosting/payment.html +++ b/hosting/templates/hosting/payment.html @@ -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>