Store: One page checkout not working

Question

I'm having an issue with the checkout tag. If I use it and split the billing address and credit card information on two different templates/pages, then it works, but when I combine them into the same template I get the following error:

The store.payment field is required

Hoping someone can point out what I'm missing or doing wrong.

{exp:store:checkout
    form_class="form-horizontal"
    return="store/order/ORDER_HASH"
    require="billing_name|billing_address1|billing_state|billing_country|billing_postcode|order_email|payment"}

    {if no_items}
        {redirect="store/cart"}
    {/if}

    <input type="hidden" name="payment_method" value="Stripe" />

    <div class="grid grid_noMargin">
        <div class="grid-col grid-col_6of12">
            <div class="form-group">
                <label class="control-label" for="billing_name">Name</label>
                <div class="controls">
                    <input type="text" name="billing_name" id="billing_name" value="{billing_name}" class="form-control" />
                    {if error:billing_name}
                        <label for="billing_name" class="error">{error:billing_name}</label>
                    {/if}
                </div>
            </div>
        </div>
        <div class="grid-col grid-col_6of12">
            <div class="form-group">
                <label class="control-label" for="order_email">Email</label>
                <div class="controls">
                    <input type="text" name="order_email" id="order_email" value="{order_email}" class="form-control" />
                    {if error:order_email}
                    <label for="order_email" class="error">{error:order_email}</label>
                    {/if}
                </div>
            </div>
        </div>
    </div>
    <div class="grid grid_noMargin">
        <div class="grid-col grid-col_6of12">
            <div class="form-group">
                <label class="control-label" for="billing_address1">Address</label>
                <div class="controls">
                    <input type="text" name="billing_address1" id="billing_address1" value="{billing_address1}" class="form-control" />
                    {if error:billing_address1}
                        <label for="billing_address1" class="error">{error:billing_address1}</label>
                    {/if}
                </div>
            </div>
        </div>
        <div class="grid-col grid-col_6of12">
            <div class="form-group">
                <label class="control-label" for="billing_address1">Address 2</label>
                <div class="controls">
                    <input type="text" name="billing_address2" id="billing_address2" value="{billing_address2}" class="form-control" />
                    {if error:billing_address2}
                        <label for="billing_address2" class="error">{error:billing_address2}</label>
                    {/if}
                </div>
            </div>
        </div>
    </div>
    <div class="grid grid_noMargin">
        <div class="grid-col grid-col_3of12">
            <div class="form-group">
                <label class="control-label" for="billing_city">City</label>
                <div class="controls">
                    <input type="text" name="billing_city" id="billing_city" value="{billing_city}" class="form-control" />
                    {if error:billing_city}
                        <label for="billing_city" class="error">{error:billing_city}</label>
                    {/if}
                </div>
            </div>
        </div>
        <div class="grid-col grid-col_3of12">
            <div class="form-group">
                <label class="control-label" for="billing_postcode">Postcode</label>
                <div class="controls">
                    <input type="text" name="billing_postcode" id="billing_postcode" value="{billing_postcode}" class="form-control" />
                    {if error:billing_postcode}
                        <label for="billing_postcode" class="error">{error:billing_postcode}</label>
                    {/if}
                </div>
            </div>
        </div>
        <div class="grid-col grid-col_3of12">
            <div class="form-group">
                <label class="control-label" for="billing_state">State</label>
                <div class="controls">
                    <select name="billing_state" id="billing_state" class="form-control">
                        {billing_state_options}
                    </select>
                    {if error:billing_state}
                        <label for="billing_state" class="error">{error:billing_state}</label>
                    {/if}
                    {error:billing_state}
                </div>
            </div>
        </div>
        <div class="grid-col grid-col_3of12">
            <div class="form-group">
                <label class="control-label" for="billing_country">Country</label>
                <div class="controls">
                    <select name="billing_country" id="billing_country" class="form-control">
                        {billing_country_options}
                    </select>
                    {if error:billing_country}
                    <label for="billing_country" class="error">{error:billing_country}</label>
                    {/if}
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid_noMargin verticalRhythm_md">
        <div class="grid-col grid-col_4of12">
            <div class="header">
                <h1>Payment</h1>
            </div>
        </div>
        <div class="grid-col grid-col_6of12 grid-col_push2of12">
            <div class="header">
                <h1>Cart</h1>
            </div>
        </div>
    </div>

    <div class="grid">
        <div class="grid-col grid-col_5of12">
            {if error:payment_method}
                <div class="form-group">
                    <div class="alert alert-danger">{error:payment_method}</div>
                </div>
            {/if}

            <p class="">
                We accept the following credit cards
            </p>
            <img src="{site_url}assets/images/design/credit-cards/visa_32.png" />
            <img src="{site_url}assets/images/design/credit-cards/mastercard_32.png" />
            <img src="{site_url}assets/images/design/credit-cards/discover_32.png" />
            <img src="{site_url}assets/images/design/credit-cards/american_express_32.png" />
            <img src="{site_url}assets/images/design/credit-cards/diners_club_32.png" />
            <img src="{site_url}assets/images/design/credit-cards/jcb_32.png" />

            <div class="form-group">
                <label class="control-label" for="payment_card_no">Card Number</label>
                <input type="text" id="payment_card_no" name="payment[card_no]" value="" class="form-control" />
            </div>

            <div class="form-group">
                <label class="control-label" for="payment_name">Name as it appears on card</label>
                <input type="text" id="payment_name" name="payment[name]" value="" class="form-control" />
            </div>

            <div class="form-group grid grid_noMargin">
                <div class="controls grid-col grid-col_6of12">
                    <label class="control-label" for="payment_exp_month">Expiration</label>
                    <select id="payment_exp_month" name="payment[exp_month]" class="form-control">
                        <option value="">Month</option>
                        {exp_month_options}
                    </select>
                </div>
                <div class="controls grid-col grid-col_6of12">
                    <label class="control-label" for="payment_exp_month">&nbsp;</label>
                    <select id="payment_exp_year" name="payment[exp_year]" class="form-control">
                        <option value="">Year</option>
                        {exp_year_options}
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label" for="payment_csc">CSC</label>
                <input type="text" id="payment_csc" name="payment[csc]" value="" class="form-control" />
            </div>

        </div>
        <div class="grid-col grid-col_6of12 grid-col_push1of12">
            {if no_items}
                <p>Your cart is empty!</p>
            {/if}
            <table class="table table-condensed">
                {items}
                    <tr>
                        <td>{item_qty} &times; {title}</td>
                        <td style="text-align:right">{item_subtotal}</td>
                    </tr>
                {/items}
                <tr>
                    <th>Total</th>
                    <th style="text-align:right">{order_subtotal}</th>
                </tr>
            </table>
        </div>
    </div>

    <div class="form-actions verticalRhythm_sm">
        <a href="{path='store/cart'}" class="btn btn-default">Back</a>
        <input type="submit" name="next" value="Place Order ({order_subtotal})" class="btn btn-primary" />
    </div>

{/exp:store:checkout}

Answer 1

Figured it out. The submit button needed to have the name="submit", not name="next". Per the docs submit will trigger the last step and process the payment. I also had "payment" as an option in the require parameter on the checkout tag, which isn't required for the validation to occur (since its handled by the payment processor.