No notes defined.
<div class="global-container">
<header class="siteheader siteheader--simple" id="top">
<div class="row">
<div class="small-12 columns">
<a href="https://modmore.com/" class="logo">
<svg role="img">
<use xlink:href="/svg/svg-symbols.svg#modmore-logo"></use>
</svg>
<span class="visually-hidden">modmore</span>
</a>
</div>
</div>
</header>
<main class="wrapper checkout page-payment">
<div class="row">
<div class="small-12 column">
<ol class="checkout-progress">
<li class="checkout-progress__item checkout-progress__item--done">
<a href="#" class="checkout-progress__link">
<div class="checkout-progress__indictator">
<span>
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#tick"></use>
</svg>
</span>
</div>
<p class="checkout-progress__label">Cart</p>
</a>
</li>
<li class="checkout-progress__item checkout-progress__item--done">
<a href="#" class="checkout-progress__link">
<div class="checkout-progress__indictator">
<span>
<svg role="img" class="icon icon--xlarge icon-box__icon">
<use xlink:href="/svg/svg-symbols.svg#tick"></use>
</svg>
</span>
</div>
<p class="checkout-progress__label">Login/Register</p>
</a>
</li>
<li class="checkout-progress__item checkout-progress__item--active">
<div class="checkout-progress__indictator"><span></span></div>
<p class="checkout-progress__label">Address</p>
</li>
<li class="checkout-progress__item">
<div class="checkout-progress__indictator"><span></span></div>
<p class="checkout-progress__label">Payment</p>
</li>
<li class="checkout-progress__item">
<div class="checkout-progress__indictator"><span></span></div>
<p class="checkout-progress__label">Success</p>
</li>
</ol>
</div>
</div>
<div class="row row--small">
<div class="small-12 large-8 column">
<h1 class="u-mt0">Select your payment method</h1>
<p>Please choose your preferred payment method below to pay securely online.<br> <a href="#">Terms & Conditions</a> apply to all purchases.</p>
<div class="row">
<div class="column small-12 large-6 u-center">
<h2 class="h4 c-base title-icon">
<svg role="img" class="checkout__padlock">
<use xlink:href="/svg/svg-symbols.svg#padlock"></use>
</svg>
Pay with PayPal
</h2>
<div class="btn-payment btn-payment--paypal" data-link="paypal" data-link-remove="creditcard">
<span class="visually-hidden">PayPal</span>
<img src="/svg/paypal.svg" class="btn-payment__paypal-icon">
</div>
</div>
<div class="column small-12 large-6 u-center">
<h2 class="h4 c-base title-icon">
<svg role="img" class="checkout__padlock">
<use xlink:href="/svg/svg-symbols.svg#padlock"></use>
</svg>
Pay with a credit card
</h2>
<div class="btn-payment btn-payment--card" data-link="creditcard" data-link-remove="paypal">
<svg role="img" class="btn-payment__card-icon">
<use xlink:href="/svg/svg-symbols.svg#card"></use>
</svg>
Debit or Credit Card
</div>
</div>
</div>
<div class="row">
<div class="column small-12">
<div class="payment-confirmation" id="paypal">
<h3 class="h4 payment-confirmation__title">We'll direct you to PayPal</h3>
<form method="POST" action="checkout/?step=payment" class="form u-mb0">
<input type="hidden" name="choose_payment_method" value="0">
<div class="form__row form__check-field">
<input type="checkbox" id="choose_payment_method1" name="choose_payment_method" class="form__check-field-input" value="3" />
<label for="choose_payment_method1" class="form__check-field-decor" aria-hidden="true" role="presentation"></label>
<label for="choose_payment_method1" class="form__check-field-label">Save card for next time</label>
</div>
<div class="form__row form__actions u-mt0">
<button class="form__button" type="submit">Pay with PayPal</button>
</div>
</form>
</div>
<div class="payment-confirmation payment-confirmation--creditcard" id="creditcard">
<h3 class="h4 payment-confirmation__title">We'll direct you to a secure payment form</h3>
<form method="POST" action="checkout/?step=payment" class="form u-mb0">
<input type="hidden" name="choose_payment_method" value="0">
<div class="form__row form__check-field">
<input type="checkbox" id="choose_payment_method2" name="choose_payment_method" class="form__check-field-input" value="3" />
<label for="choose_payment_method2" class="form__check-field-decor" aria-hidden="true" role="presentation"></label>
<label for="choose_payment_method2" class="form__check-field-label">Save card for next time</label>
</div>
<div class="form__row form__actions u-mt0">
<button class="form__button" type="submit">Pay with Debit or Credit Card</button>
</div>
</form>
</div>
</div>
</div>
</div>
<aside class="small-12 large-4 column">
<div class="u-sticky">
<div class="order-summary">
<div class="order-summary__header">
<h3 class="order-summary__title">Order summary</h3>
<a class="order-summary__edit" href="#">Edit</a>
</div>
<div class="order-summary__body">
<div class="order-summary__item">
<div class="order-summary__product">
<h4 class="order-summary__product-name">1x Commerce</h4>
<p class="order-summary__product-description">Single license (Cyber Sale)</p>
</div>
<div class="order-summary__numbers">
<span class="order-summary__price">€299</span>
</div>
</div>
<div class="order-summary__item">
<div class="order-summary__product">
<h4 class="order-summary__product-name">2x Redactor</h4>
<p class="order-summary__product-description">Single license (Cyber Sale)</p>
</div>
<div class="order-summary__numbers">
<span class="order-summary__price">€70</span>
</div>
</div>
</div>
<div class="order-summary__totals order-summary-totals">
<div class="order-summary-totals__item order-summary-totals__item--subtotal">
<span class="order-summary-totals__label">Subtotal:</span>
<span class="order-summary-totals__value">€211.20</span>
</div>
<div class="order-summary-totals__item order-summary-totals__item--vat">
<span class="order-summary-totals__label">VAT (20%):</span>
<span class="order-summary-totals__value">€42.24</span>
</div>
<div class="order-summary-totals__item order-summary-totals__item--total">
<span class="order-summary-totals__label">Total:</span>
<span class="order-summary-totals__value">€253.44</span>
</div>
</div>
</div>
<div class="billing-address-sidebar">
<div class="billing-address-sidebar__header">
<h3 class="billing-address-sidebar__title">Billing address</h3>
<a class="billing-address-sidebar__edit" href="#">Edit</a>
</div>
<div class="billing-address-sidebar__body">
<p>Marc Jenkins<br>
14 Abbotswood Close<br>
Winyates Green<br>
Redditch<br>
B98 0QD<br>
United Kingdom</p>
</div>
</div>
</div>
</aside>
</div>
<div class="row checkout-footer">
<div class="small-12 column">
<p class="checkout-footer__text">Made with ♥<br> Powered by <a href="#">Commerce</a></p>
</div>
</div>
</main>
<footer class="page-footer page-footer--simple">
<div class="row">
<div class="columns small-12 large-6">
<p class="smallprint">© 2013 - 2020 modmore.</p>
<p class="smallprint">KVK: 52454606 • VAT: NL001103641B07<br> Correspondence: Mark Hamstra, Tijnjedyk 19, Unit 8531, 8934 BT, Leeuwarden, The Netherlands</p>
</div>
<div class="columns small-12 large-6 align-bottom">
<nav>
<ul class="footer-nav-horiz">
<li>
<span>Change currency:</span>
<select title="Select a currency" aria-label="Select a currency" style="width: auto;" id="currencySelector" class="currency-selector">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="RUB">RUB</option>
<option value="CHF">CHF</option>
<option value="CAD">CAD</option>
</select>
</li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy & Cookies</a></li>
</ul>
</nav>
</div>
</div>
</footer>
/* No context defined. */
// =============================================================================
// Payment method
// =============================================================================
.title-padlock {
display: block;
width: 200px;
height: 200px;
fill: orange;
color: orange;
background-size: contain;
background-image: url(../svg/svg-symbols.svg#padlock);
}
.btn-payment {
display: flex;
align-items: center;
justify-content: center;
background: $color-grey-dark;
padding: 0;
margin: 0 auto;
border-radius: 8px;
max-width: 260px;
line-height: 1;
height: 48px;
text-align: center;
color: white;
font-weight: bold;
cursor: pointer;
&.is-active,
&:hover {
filter: brightness(0.95);
}
}
.btn-payment--paypal {
background: #ffc439;
}
.btn-payment__paypal-icon {
height: 26px;
}
.btn-payment--card {
display: flex;
justify-content: center;
align-items: center;
}
.btn-payment__card-icon {
height: 30px;
width: 30px;
margin-right: 10px;
position: relative;
top: 2px;
}
.payment-confirmation {
display: none;
position: relative;
background: $color-grey-xlight;
color: $color-text-base;
border: 1px solid $color-grey-xlight-tint;
border-radius: $radius;
padding: 1rem;
margin-top: 2rem;
&:before {
content: '';
position: absolute;
top: -14px;
left: 150px;
display: block;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 14px solid $color-grey-xlight-tint;
}
}
.payment-confirmation--creditcard {
&:before {
content: '';
position: absolute;
top: -14px;
left: auto;
right: 135px;
display: block;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 14px solid $color-grey-xlight-tint;
}
}
.payment-confirmation.is-active {
display: block;
}
.payment-confirmation__title {
margin: 0;
color: $color-text-base;
}