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">
              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>

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


        <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' %}



        <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>
            (function () {
            Stripe.setPublishableKey('{{ craft.charge.getPublicKey() }}');


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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