Missing required param: card[exp_month] on Charge 2

Question

I created fields using Charge 2 plugin and after creating a form I getting an error

Missing required param: card[exp_month].

 <div class="">
    <div class="grp-form">
        <form 
              id="charge-form"
              method="post"
              action=""
              accept-charset="UTF-8"
              data-publicKey="{{ craft.charge.getPublicKey }}">


            {{ forms.hidden({ name : 'action', value: 'charge/charge' }) }}
            {{ getCsrfInput() }}

            {% set options = planAmount %}
            {{ craft.charge.setPaymentOptions(options) }}

            <div class="custDet-form">
            <h4>Customer Details</h4>

                {% include 'charge/_includes/inputs/customerDetails' %}

                {{ forms.textField({
                    name: 'fields[businessName]',
                    id: 'businessName',
                    label: 'Business Name',
                    placeholder: 'eg. My Business'
                }) }}

                {{ forms.textField({
                    name: 'fields[phoneNumber]',
                    id: 'phoneNumber',
                    label: 'Phone Number'
                }) }}

                {{ forms.textField({
                    name: 'fields[streetAddress]',
                    id: 'streetAddress',
                    label: 'Street Address'
                }) }}

                {{ forms.textField({
                    name: 'fields[city]',
                    id: 'city',
                    label: 'City'
                }) }}



                {{ forms.textField({
                    name: 'fields[postcode]',
                    id: 'postcode',
                    label: 'Post Code'
                }) }}


                <div class="select-indent">
                    <label for="state">State</label>
                    <select multiple name="fields[state][]" class="select-mult">
                        <option value="NSW">NSW</option>
                        <option value="QLD">QLD</option>
                        <option value="SA">SA</option>
                        <option value="VIC">VIC</option>
                        <option value="WA">WA</option>
                        <option value="ACT">ACT</option>
                        <option value="TAS">TAS</option>
                        <option value="NT">NT</option>
                    </select>
                </div>


                {% if charge is defined %}
                    {% for error in charge.getErrors('simpleText') %}
                    <ul class="errors"><li>{{ error }}</li></ul>
                    {% endfor %}
                {% endif %}


         </div>

        <div class="cardDet-form">
            <h4>Plan Details</h4>
            {{ stripe.amountField({
                label: 'Amount',
                value: options,
                readonly: true
            }) }}

            <h4>Card Details</h4>
             {% if charge is defined and charge.cardToken %}
            {# We already have the card details #}
            Pay with : {{ charge.cardType }} - {{ charge.cardLast4 }}

            <input type="hidden" name="cardToken" value="{{ charge.cardToken }}" data-stripe="token"/>
            <input type="hidden" name="cardLast4" value="{{ charge.cardLast4 }}"/>
            <input type="hidden" name="cardType" value="{{ charge.cardType }}"/>
            <input type="hidden" name="cardName" value="{{ charge.cardName }}"/>
            <input type="hidden" name="cardExpMonth" value="{{ charge.cardExpMonth }}"/>
            <input type="hidden" name="cardExpYear" value="{{ charge.cardExpYear }}"/>

          {% else %}
            <label for="cardNumber">Card Number</label>
            <input type="text" data-stripe="number" placeholder="•••• •••• •••• ••••" id="cardNumber"/>

           <label for="cardExpiry">Card Expiry</label>
            <input type="text" data-stripe="exp" placeholder="mm / yy" id="cardExpiry"/>

            <label for="cardCvc">Card CVC</label>
            <input type="text" data-stripe="cvc" placeholder="123" id="cardCvc"/>
          {% endif %}

            <div id="payment-errors" class="alert alert-error"></div>

            {% include 'charge/_includes/inputs/paymentButton' %}

         </div>

        </form>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="{{ resourceUrl('charge/js/stripe_v2.min.js') }}"></script>
        <script src="{{ resourceUrl('charge/js/jquery.charge.js') }}"></script>
        <script>
            (function () {
            Stripe.setPublishableKey('{{ craft.charge.getPublicKey() }}');
            $(this).charge();
            })();
        </script>

    </div>
</div>

Answer 1

Add the following hidden inputs below the <input type="text" data-stripe="exp" placeholder="mm / yy" id="cardExpiry"/> line:

<input type="hidden" name="cardExpMonth" data-stripe="exp_month">
<input type="hidden" name="cardExpYear" data-stripe="exp_year">

The example in the documentation seems to be missing that information but you can find it in the provided templates.