expressCart/views/pay.hbs

<div class="col-xl-8 col-xl-offset-2 col-xs-12">
    <div class="row">
        {{#if paymentMessage}}
            <p class="text-danger text-center">{{paymentMessage}}</p>
        {{/if}}
        <div class="col-md-5">
            <div class="panel panel-default" style="margin-top: 30px;">
                <div class="panel-heading">Customer details</div>
                {{#unless session.customer}}
                <div class="panel-body customer-details-login">
                    <p>Existing customer</p>
                    <div class="form-group">
                        <input type="email" class="form-control" id="customerLoginEmail" name="loginEmail" minlength="5" placeholder="Email address" required>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="customerLoginPassword" name="loginPassword" minlength="5" placeholder="Password" required>
                    </div>
                    <div class="form-group">
                        <a href="/customer/forgotten" class="btn btn-default pull-left">Forgotten</a>
                    </div>
                    <div class="form-group">
                        <button id="customerLogin" class="btn btn-success pull-right" type="submit">Login</button>
                    </div>
                </div>
                {{/unless}}
                <div class="panel-body customer-details">
                    {{#if session.customer}}
                    <div class="col-xs-12 col-md-12">
                        <button id="customerLogout" class="btn btn-sm btn-success pull-right">Change customer</button>
                    </div>
                    {{/if}}
                    <form id="shipping-form" class="shipping-form" action="/{{config.paymentGateway}}/checkout_action" method="post" role="form" data-toggle="validator" novalidate="false">
                        <div class="col-xs-12 col-md-12">
                            <div class="form-group">
                                <input type="email" class="form-control customerDetails" id="shipEmail" name="shipEmail" minlength="5" placeholder="Email address" value="{{session.customer.email}}" required>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <div class="form-group">
                                <input type="text" class="form-control customerDetails" id="shipFirstname" name="shipFirstname" placeholder="First name" value="{{session.customer.firstName}}" required>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <div class="form-group">
                                <input type="text" class="form-control customerDetails" id="shipLastname" name="shipLastname" placeholder="Last name" value="{{session.customer.lastName}}" required>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-12">
                            <div class="form-group">
                                <input type="text" class="form-control customerDetails" id="shipAddr1" name="shipAddr1" placeholder="Address 1" value="{{session.customer.address1}}" required>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-12">
                            <div class="form-group">
                                <input type="text" class="form-control customerDetails" id="shipAddr2" name="shipAddr2" placeholder="Address 2 (optional)" value="{{session.customer.address1}}">
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-4">
                            <div class="form-group">
                                <input type="text" class="form-control customerDetails" id="shipCountry" name="shipCountry" placeholder="Country" value="{{session.customer.country}}" required>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-4">
                            <div class="form-group">
                                <input type="text" class="form-control customerDetails" id="shipState" name="shipState" placeholder="State" value="{{session.customer.state}}" required>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-4">
                            <div class="form-group">
                                <input type="text" class="form-control customerDetails" id="shipPostcode" name="shipPostcode" placeholder="Post code" value="{{session.customer.postcode}}" required>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-12">
                            <div class="form-group">
                                <input type="number" class="form-control customerDetails" id="shipPhoneNumber" name="shipPhoneNumber" placeholder="Phone number" value="{{session.customer.phone}}" required>
                            </div>
                        </div>
                        {{#if session.customer}}
                        {{#ifCond config.paymentGateway '==' 'paypal'}}
                        <div class="paypal_button col-xs-12 col-md-12 text-center">
                            <button id="checkout_paypal" class="btn btn-success" type="submit"><i class="fa fa-cc-paypal fa-lg" aria-hidden="true"></i> Pay with PayPal <i class="fa fa-cc-paypal fa-lg" aria-hidden="true"></i></button>
                        </div>
                        {{/ifCond}}
                        {{/if}}
                        {{#unless session.customer}}
                        <div class="col-xs-12 col-md-12">
                            <p class="text-muted">Enter a password to create an account for next time</p>
                            <div class="form-group">
                                <input type="password" class="form-control customerDetails" id="newCustomerPassword" name="newCustomerPassword" placeholder="Password" required>
                            </div>
                            <a id="createCustomerAccount" class="btn btn-success pull-right">Create account</a>
                        </div>
                        {{/unless}}
                    </form>
                    {{#if session.customer}}
                    {{#ifCond config.paymentGateway '==' 'stripe'}}
                    <div class="col-xs-12 col-md-12 text-center">
                        <form method="POST" id="payment-form">
                            <button
                                type="submit"
                                id="stripeButton"
                                value="Process payment"
                                class="btn btn-success"
                                type="submit"
                                data-key="{{paymentConfig.publicKey}}"
                                data-amount="{{amountNoDecimal session.totalCartAmount}}"
                                data-name="{{config.cartTitle}}"
                                data-description="{{config.cartTitle}} Payment"
                                data-image="{{paymentConfig.stripeLogoURL}}"
                                data-locale="auto"
                                data-zip-code="false"
                                data-currency="{{paymentConfig.stripeCurrency}}">
                                <i class="fa fa-cc-stripe fa-lg" aria-hidden="true"></i> Process payment <i class="fa fa-cc-stripe fa-lg" aria-hidden="true"></i>
                            </button>
                            <script src="https://checkout.stripe.com/v2/checkout.js"></script>
                        </form>
                    </div>
                    {{/ifCond}}
                    {{/if}}
                </div>
            </div>
        </div>
        <div id="cart" class="col-md-7">
            {{> cart}}
        </div>
    </div>
</div>