New layout for payment page
This commit is contained in:
PCoder
parent
05db0517bb
commit
d711b524e1
2 changed files with 343 additions and 150 deletions
|
|
@ -4,14 +4,15 @@
|
||||||
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Lato-Regular';
|
font-family: 'Lato-Regular';
|
||||||
src: url('../fonts/Lato/Lato-Regular.ttf');
|
src: url('../fonts/Lato/Lato-Regular.ttf');
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
src: url('../fonts/Lato/Lato-Black.ttf');
|
src: url('../fonts/Lato/Lato-Black.ttf');
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Lato-Light';
|
font-family: 'Lato-Light';
|
||||||
src: url('../fonts/Lato/Lato-Light.ttf');
|
src: url('../fonts/Lato/Lato-Light.ttf');
|
||||||
|
|
@ -33,6 +34,7 @@ h6 {
|
||||||
font-family: 'Lato-Regular', sans-serif;
|
font-family: 'Lato-Regular', sans-serif;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav {
|
.topnav {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
@ -191,12 +193,14 @@ h6 {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*------Auth section---------*/
|
/*------Auth section---------*/
|
||||||
.auth-container{
|
.auth-container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.auth-bg{
|
|
||||||
|
.auth-bg {
|
||||||
background: url(../img/auth-bg.jpg);
|
background: url(../img/auth-bg.jpg);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -209,7 +213,8 @@ h6 {
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
|
|
||||||
}
|
}
|
||||||
.auth-bg::before{
|
|
||||||
|
.auth-bg::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -219,26 +224,30 @@ h6 {
|
||||||
background: rgba(75, 75, 101, 0.55);
|
background: rgba(75, 75, 101, 0.55);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.auth-container .container{
|
|
||||||
|
.auth-container .container {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
.auth-container .auth-content{
|
|
||||||
|
.auth-container .auth-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 390px;
|
max-width: 390px;
|
||||||
}
|
}
|
||||||
.auth-container .auth-center{
|
|
||||||
|
.auth-container .auth-center {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%, -50%);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-container .auth-title{
|
.auth-container .auth-title {
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
.auth-container .auth-title h2{
|
|
||||||
|
.auth-container .auth-title h2 {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 44px;
|
font-size: 44px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -247,7 +256,8 @@ h6 {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.auth-container .auth-title h2::after{
|
|
||||||
|
.auth-container .auth-title h2::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -20px;
|
bottom: -20px;
|
||||||
|
|
@ -258,17 +268,17 @@ h6 {
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-box{
|
.auth-box {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-box .section-heading{
|
.auth-box .section-heading {
|
||||||
color: #5a5a5a;
|
color: #5a5a5a;
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
|
|
@ -279,42 +289,51 @@ h6 {
|
||||||
border-radius: 3px 3px 0px 0px;
|
border-radius: 3px 3px 0px 0px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.auth-box .form{
|
|
||||||
|
.auth-box .form {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.auth-box .form .red{
|
|
||||||
|
.auth-box .form .red {
|
||||||
color: #ea3a3a;
|
color: #ea3a3a;
|
||||||
}
|
}
|
||||||
.auth-box .form .btn{
|
|
||||||
box-shadow: 0 0px 9px rgba(0,0,0,0.19), 0 3px 5px rgba(0,0,0,0.23);
|
.auth-box .form .btn {
|
||||||
|
box-shadow: 0 0px 9px rgba(0, 0, 0, 0.19), 0 3px 5px rgba(0, 0, 0, 0.23);
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
.auth-box .form .form-control{
|
|
||||||
|
.auth-box .form .form-control {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-box .auth-footer {
|
.auth-box .auth-footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
.auth-box .auth-footer .text{
|
|
||||||
|
.auth-box .auth-footer .text {
|
||||||
color: #777;
|
color: #777;
|
||||||
}
|
}
|
||||||
.auth-box .auth-footer .links a{
|
|
||||||
color: #1e94cc;
|
.auth-box .auth-footer .links a {
|
||||||
}
|
|
||||||
.auth-box .auth-footer .links a:hover{
|
|
||||||
color: #1e94cc;
|
color: #1e94cc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-box.sign-up{
|
.auth-box .auth-footer .links a:hover {
|
||||||
|
color: #1e94cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-box.sign-up {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
.auth-box.sign-up .form{
|
|
||||||
|
.auth-box.sign-up .form {
|
||||||
padding: 15px 20px 0 20px;
|
padding: 15px 20px 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -325,6 +344,7 @@ h6 {
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
font-family: 'Lato' !important;
|
font-family: 'Lato' !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sign-up-message a {
|
.sign-up-message a {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #1e94cc !important;
|
color: #1e94cc !important;
|
||||||
|
|
@ -353,38 +373,47 @@ h6 {
|
||||||
ul.banner-social-buttons > li:last-child {
|
ul.banner-social-buttons > li:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-box .form {
|
.auth-box .form {
|
||||||
padding: 15px 0px 0 0;
|
padding: 15px 0px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-box.sign-up .form {
|
.auth-box.sign-up .form {
|
||||||
padding: 15px 0px 0 0;
|
padding: 15px 0px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-box .form .form-control {
|
.auth-box .form .form-control {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-container .auth-title {
|
.auth-container .auth-title {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 540px) {
|
@media (max-width: 540px) {
|
||||||
.auth-container .auth-title h2{
|
.auth-container .auth-title h2 {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
.auth-container.auth-signup .auth-title h2{
|
|
||||||
|
.auth-container.auth-signup .auth-title h2 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-box .form {
|
.auth-box .form {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-box .section-heading {
|
.auth-box .section-heading {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
padding: 2%;
|
padding: 2%;
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
|
|
@ -418,3 +447,138 @@ a.unlink:hover {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/***** DCL payment page **********/
|
||||||
|
.dcl-order-container {
|
||||||
|
font-family: Lato;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-order-table-header {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-order-table-content {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbl-content {
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-order-table-total {
|
||||||
|
border-bottom: 4px solid #eee;
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-order-table-total span {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-order-table-total .tbl-total {
|
||||||
|
text-align: center;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbl-no-padding {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-billing-sec {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.dcl-order-sec {
|
||||||
|
padding: 10px 20px 30px 20px;
|
||||||
|
border-bottom: 4px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbl-header {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbl-content {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-order-table-header {
|
||||||
|
border-bottom: 0px solid #eee;
|
||||||
|
padding: 10px 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-order-table-content {
|
||||||
|
border-bottom: 0px solid #eee;
|
||||||
|
padding: 10px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-order-table-total {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #000;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 0px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-order-table-total .tbl-total {
|
||||||
|
padding: 0px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-billing-sec {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.dcl-order-container {
|
||||||
|
width: 990px;
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.dcl-billing {
|
||||||
|
padding-right: 50px;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dcl-creditcard {
|
||||||
|
padding-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tbl-tot {
|
||||||
|
padding-left: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-dashboard {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1330px) and (min-width: 1200px) {
|
||||||
|
.content-dashboard {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,39 +2,53 @@
|
||||||
{% load staticfiles bootstrap3 i18n %}
|
{% load staticfiles bootstrap3 i18n %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<!-- Credit card form -->
|
<!-- Credit card form -->
|
||||||
<div>
|
<div class="dcl-order-container container">
|
||||||
<div class="payment-container">
|
<div class="payment-container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12 col-md-offset-2 col-md-4 summary-box">
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-sec">
|
||||||
<form role="form" novalidate>
|
<h3><strong>Your Order</strong></h3>
|
||||||
|
<div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-header">
|
||||||
|
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 tbl-header">
|
||||||
|
Cores
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-header">
|
||||||
|
Memory
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 tbl-header">
|
||||||
|
Disk space
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-header">
|
||||||
|
Configuration
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-content">
|
||||||
|
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 tbl-content">
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-content">
|
||||||
|
2 GB
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 tbl-content">
|
||||||
|
10 GB
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-content">
|
||||||
|
CentOS 7
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-table-total">
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-tot tbl-no-padding">
|
||||||
|
Total <span>including VAT</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-no-padding">
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"></div>
|
||||||
|
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-total">15CHF</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-billing-sec">
|
||||||
<h3><b>{%trans "Billing Amount" %}</b></h3>
|
<div class="col-xs-12 col-sm-5 col-md-6 billing dcl-billing">
|
||||||
<hr>
|
|
||||||
<div class="content">
|
|
||||||
<!-- <p><b>Type</b> <span class="pull-right">{{request.session.vm_specs.location_code}}</span></p> -->
|
|
||||||
<!-- <hr> -->
|
|
||||||
<p><b>{%trans "Cores"%}</b> <span
|
|
||||||
class="pull-right">{{request.session.specs.cpu|floatformat}}</span></p>
|
|
||||||
<hr>
|
|
||||||
<p><b>{%trans "Memory"%}</b> <span
|
|
||||||
class="pull-right">{{request.session.specs.memory|floatformat}} GB</span></p>
|
|
||||||
<hr>
|
|
||||||
<p><b>{%trans "Disk space"%}</b> <span
|
|
||||||
class="pull-right">{{request.session.specs.disk_size|floatformat}} GB</span></p>
|
|
||||||
<hr>
|
|
||||||
<p><b>{%trans "Configuration"%}</b> <span
|
|
||||||
class="pull-right">{{request.session.template.name}}</span></p>
|
|
||||||
<hr>
|
|
||||||
<h4>Total<p
|
|
||||||
class="pull-right"><b>{{request.session.specs.price }} CHF</b></p></h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 col-md-4 billing">
|
|
||||||
<h3><b>{%trans "Billing Address"%}</b></h3>
|
<h3><b>{%trans "Billing Address"%}</b></h3>
|
||||||
<hr>
|
<hr>
|
||||||
<form role="form" id="billing-form" method="post" action="" novalidate>
|
<form role="form" id="billing-form" method="post" action="" novalidate>
|
||||||
|
|
@ -45,20 +59,21 @@
|
||||||
{% bootstrap_form_errors form type='non_fields'%}
|
{% bootstrap_form_errors form type='non_fields'%}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-xs-12 col-sm-7 col-md-6 creditcard-box dcl-creditcard">
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12 col-md-offset-2 col-md-4 "></div>
|
|
||||||
<div class="col-xs-12 col-md-4 creditcard-box">
|
|
||||||
<h3><b>{%trans "Credit Card"%}</b></h3>
|
<h3><b>{%trans "Credit Card"%}</b></h3>
|
||||||
<hr>
|
<hr>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<p> {% trans '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.' %}</p>
|
<p>{% trans '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.' %}</p>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div>
|
<div>
|
||||||
{% if credit_card_data.last4 %}
|
{% if credit_card_data.last4 %}
|
||||||
<form role="form" id="payment-form-with-creditcard"novalidate>
|
<form role="form" id="payment-form-with-creditcard" novalidate>
|
||||||
<h5 class="billing-head">Credit Card</h5>
|
<h5 class="billing-head">Credit Card</h5>
|
||||||
<h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
|
<h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
|
||||||
<h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
|
<h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
|
||||||
|
|
@ -68,11 +83,19 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<br>
|
<br>
|
||||||
<div class="col-xs-12>
|
<div class="col-xs-12>
|
||||||
<p style="font-family: Lato;border: 1px solid #a1a1a1;border-radius: 3px; padding: 5px; ">{% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}</p>
|
<p>
|
||||||
|
{% trans " You are not making any payment yet. After submitting your card
|
||||||
|
information,
|
||||||
|
you
|
||||||
|
will be taken to the Confirm Order Page.
|
||||||
|
" %}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="col-xs-6 pull-right">
|
<div class="col-xs-6 pull-right">
|
||||||
<button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;" id="payment_button_with_creditcard" class="btn btn-success" type="submit">
|
<button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;"
|
||||||
|
id="payment_button_with_creditcard" class="btn btn-success"
|
||||||
|
type="submit">
|
||||||
{% trans "Submit" %}
|
{% trans "Submit" %}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -93,11 +116,15 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<br>
|
<br>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<p style="font-family: Lato;border: 1px solid #a1a1a1;border-radius: 3px; padding: 5px;"> {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}</p>
|
<p style="font-family: Lato;border: 1px solid #a1a1a1;border-radius: 3px; padding: 5px;">
|
||||||
|
{% trans "You are not making any payment yet. After submitting your card
|
||||||
|
information, you will be taken to the Confirm Order Page." %}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="col-xs-6 pull-right">
|
<div class="col-xs-6 pull-right">
|
||||||
<button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;" class="btn btn-success" type="submit">{% trans "Submit" %}</button>
|
<button style="width: 100px; float: right; font-style: normal; font-weight: bold; position: absolute; right: 0;"
|
||||||
|
class="btn btn-success" type="submit">{% trans "Submit" %}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -143,7 +170,9 @@
|
||||||
|
|
||||||
{% if credit_card_data.last4 and credit_card_data.cc_brand %}
|
{% if credit_card_data.last4 and credit_card_data.cc_brand %}
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
(function () {window.hasCreditcard = true;})();
|
(function () {
|
||||||
|
window.hasCreditcard = true;
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{%endif%}
|
{%endif%}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue