---
description: 'Payment form partial for Braintree payment method'
---
<form method="post" action="" data-ajax-handler="shop:onPay">
    <input type="hidden" value="{{  paymentMethod.id}}" name="payment_method_id">
    <div class="form">
        <div class="row field-row">
            <div class="col-xs-6 field text left">
                <label for="cardholderName" class="hide">Cardholder Name</label>
                <div><input autocomplete="off" name="cardholderName" value="" id="cardholderName" type="text" class="text md-input" placeholder="Cardholder Name"/></div>
            </div>
            <div class="col-xs-6 field text right">
                <label for="cardNumber" class="hide">Credit Card Number</label>
                <div><input autocomplete="off" name="cardNumber" value="" id="cardNumber" type="text" class="text md-input credit-card-input" placeholder="Credit Card Number"/></div>
            </div>
        </div>
        
        <div class="row field-row">
            <div class="col-xs-4 field text left">
                <label for="expiryMonth">Expiration Date - Month</label>
                <select name="expiryMonth" class="md-select col-xs-12">
                {% for i in 1..12 %}
                    <option value="{{ i }}">{{ i }}</option>
                {% endfor %}
                </select>
            </div>
            <div class="col-xs-4 field text right">
                <label for="expiryYear">Expiration Date - Year</label>
                <select autocomplete="off" name="expiryYear" id="expiryYear" class="md-select col-xs-12">
                    {% for i in 2014..2034 %}
                    <option value="{{ i }}">{{ i }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-xs-4 field text">
                <label for="securityCode">
                    Card Verification Value (CVV)
                </label>
                <div><input autocomplete="off" name="securityCode" value="" id="securityCode" type="text" class="text md-input"/></div>
            </div>
        </div>

        
    </div>
    <div class="row field-row">
        <div class="col-xs-12 button-holder right">
            <input type="submit" value="Pay" class="button md-button step-btn">
        </div>
    </div>
</form>