0

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}
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.