CartThrob Forums | "Invalid Credit Card Number" error with Stripe

“Invalid Credit Card Number” error with Stripe

Posted: 22 March 2012 03:29 PM

[ Ignore ]

Wallflower

Total Posts: 7

Joined 2012-03-08

I am using Stripe as my gateway. It is generating the token correctly before submitting the form, but I still get an error page on submission with the message “The credit card number you submitted is invalid”. Obviously, there is no credit card number, since Stripe requires that there not be a name attribute on the card number input. How do I turn off that validation? Even setting required=“not credit_card_number” on the checkout_form tag doesn’t prevent the error. An abbreviated version of my template is below.

{exp:cartthrob:checkout_form return="cart/confirmation" required="not credit_card_number"}

    <fieldset>
        <legend>Billing Info</legend>

    {exp:cartthrob:customer_info}
        [Address fields removed for length]
    {/exp:cartthrob:customer_info}
    </fieldset>
    
    <fieldset>
        <legend>Payment Info</legend>

    {if {exp:cartthrob:view_setting allow_gateway_selection="yes"}}
        <dl>
            <dt><label for="gateway">Payment Type:</label></dt>
            <dd><select name="gateway" id="gateway">
                <option value="[code from the payment tab of CartThrob admin page]" selected="selected">Credit Card</option>
                <option value="[code from the payment tab of CartThrob admin page]">Check, Cash, or Gift Certificate</option>
            </select></dd>
        </dl>
    {/if}

        <div id="payment_stripe">
            <dl>
                <dt><label for="credit_card_number">Credit Card #:</label></dt>
                <dd><input type="text" name="" value="" id="credit_card_number" /></dd>
            </dl>

            <dl class="cvv2">
                <dt><label for="CVV2">Security Code:</label></dt>
                <dd><input type="text" name="" value="" id="CVV2" /> <em>(on the back of card)</em></dd>
            </dl>

            <dl class="expiry">
                <dt><label for="expiration_month">Expiration:</label></dt>
                <dd>
                    <input type="text" name="" value="" placeholder="MM" id="expiration_month" /> /
                    <input type="text" name="" value="" placeholder="YYYY" id="expiration_year" />
                </dd>
            </dl>
        </div>

        <div id="payment_check">
            <p class="info">You must provide a check, cash, or gift certificate for the complete amount before the event begins.</p>
        </div>
    </fieldset>

    <div class="button_set">
        <input type="submit" value="Complete Order" />
    </div>

{/exp:cartthrob:checkout_form} 

Profile

EliVZ

Posted: 22 March 2012 03:35 PM

[ Ignore ] [ # 1 ]

Wallflower

Total Posts: 7

Joined 2012-03-08

Speaking of the Stripe implementation, I wonder if you would consider modifying the tokenizer script to check for an existing copy of jQuery before loading it. Since I already use jQuery on my site, I was getting two copies loaded into my checkout page.

Profile

EliVZ

Posted: 22 March 2012 03:48 PM

[ Ignore ] [ # 2 ]

Wallflower

Total Posts: 7

Joined 2012-03-08

Ha, never mind on the first count. After looking at this for an hour, I figured it out 5 minutes after posting here. I just had to turn off the “validate credit card” option in the control panel. Maybe that check should automatically be disabled for payment methods that don’t involve a credit cart (Stripe, but also check, cash, etc.)?

Profile

Rob Sanchez

Posted: 23 March 2012 06:57 AM

[ Ignore ] [ # 3 ]

Administrator

Total Posts: 3541

Joined 2009-05-29

We do check for an existing jQuery in the tokenizer script, maybe it’s not working?

if (typeof jQuery === "function"){
            return CartthrobTokenizer.bind();
        } 

I suppose it depends on where you are loading your jQuery, if you’re loading it below the form, then this might not work.

Re: auto turn off validation—sounds like a good idea.

Profile

EliVZ

Posted: 23 March 2012 07:08 AM

[ Ignore ] [ # 4 ]

Wallflower

Total Posts: 7

Joined 2012-03-08

Yeah, I load jQuery at the bottom of the page (as is recommended for performance reasons). Not sure what the solution is here… maybe a checkbox on the Stripe settings page? Or I wonder if I could even get away with putting function jQuery(){} higher up on the page and having the real jQuery overwrite it when it gets loaded.

Actually, I noticed one other small problem with the Stripe JS as well. Those scripts get loaded if Stripe is enabled, whether or not it is the current gateway. So for instance, if I decide to check out with the “Pay by Check” gateway, the tokenizer will still run and throw an error (because there is not credit card field). Any way to get it to only insert that script if I’m actually using Stripe for the current transaction?

Thanks for your help on this. Everything else has gone very smoothly, and I’ll send you a link to the site when it goes live very soon.

Profile

Rob Sanchez

Posted: 23 March 2012 09:06 AM

[ Ignore ] [ # 5 ]

Administrator

Total Posts: 3541

Joined 2009-05-29

I refactored the tokenizer lib to remove jQuery as a dependency (using ender.js instead). Can I send you a copy to try out?

It also has a new method: CartthrobTokenizer.unbind(). You can use this when the user changes their gateway:

$("#gateway").change(function(){
    if (this.selectedIndex === 0) { //if stripe is the first in the dropdown
        CartthrobTokenizer.bind();
    } else {
        CartthrobTokenizer.unbind();
    }
}); 

Profile

EliVZ

Posted: 23 March 2012 09:08 AM

[ Ignore ] [ # 6 ]

Wallflower

Total Posts: 7

Joined 2012-03-08

Sure, send it over. My email is my first name at elivz.com.

-Eli

Profile

‹‹ DeliveryState required error from Sagepay Docs mention Commidea but I can’t see that as an option ››