There are no notes for this item.

<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 &amp; 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 &#9829;<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> Oenemastate 14, 8926PR, 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 &amp; Cookies</a></li>
                    </ul>
                </nav>

            </div>
        </div>
    </footer>
/* No context defined for this component. */
  • Content:
    // =============================================================================
    // 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;
    }
    
  • URL: /components/raw/payment-method/payment-method.scss
  • Filesystem Path: components/04-checkout/payment-method/payment-method.scss
  • Size: 1.9 KB