---
description: 'Payment form partial for Test Payment payment method'
---
<p>This is a test payment method. Never use your real credit card information in this form.</p>

<form method="post" action="" data-ajax-handler="shop:onPay">
    <input type="hidden" name="payment_method_id" value="{{ paymentMethod.id}}">
    <div class="form">
        <div class="row field-row">
            <div class="col-xs-6 field text left">
                <label for="FIRSTNAME" class="hide">Cardholder First Name</label>
                <div><input autocomplete="off" name="FIRSTNAME" value="John" id="FIRSTNAME" type="text" class="text md-input" placeholder="Cardholder First Name"/></div>
            </div>
            <div class="col-xs-6 field text right">
                <label for="LASTNAME" class="hide">Cardholder Last Name</label>
                <div><input autocomplete="off" name="LASTNAME" value="Smith" id="LASTNAME" type="text" class="text md-input" placeholder="Cardholder Last Name"/></div>
            </div>
        </div>
        
        <div class="row field-row">
            <div class="col-xs-12 field text">
                <label for="ACCT" class="hide">Credit Card Number</label>
                <div><input autocomplete="off" name="ACCT" value="4111111111111111" id="ACCT" 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-6 field select left">
                <label for="EXPDATE_MONTH" class="hide">Expiration Date - Month</label>
                <div><input type="text" name="EXPDATE_MONTH" class="md-input" placeholder="Expiration Date - Month"></div>
            </div>
    
            <div class="col-xs-6 field text right">
                <label for="EXPDATE_YEAR" class="hide">Expiration Date - Year</label>
    
                <div><input type="text" name="EXPDATE_YEAR" class="md-input" placeholder="Expiration Date - Year"></div>
            </div>
        </div>
        
        <div class="row field-row">
            <div class="field text">
                <div class="col-xs-4">
                    <label for="CVV2" class="hide">
                        CVV2
                    </label>
                    <input autocomplete="off" name="CVV2" value="123" id="CVV2" type="text" class="text md-input" placeholder="CVV2"/>
                </div>
                <div class="col-xs-8">
                    <small class="comment">For MasterCard, Visa, and Discover, the CSC is the last three digits in the signature area on the back of your card. For American Express, it's the four digits on the front of the card.</small>
                </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>