Your account is limited to posting only in the Pre-Sales Questions forum.
Support forum access is limited to members with a purchase history.

If you are working on behalf of another member, please contact us with the name of the license holder and we will upgrade your account.
   
 
“Invalid Credit Card Number” error with Stripe
Posted: 22 March 2012 11:29 PM   [ Ignore ]
Wallflower
Rank
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]">CheckCash, 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">
            <
class="info">You must provide a checkcash, 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
 
 
Posted: 22 March 2012 11:35 PM   [ Ignore ]   [ # 1 ]
Wallflower
Rank
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
 
 
Posted: 22 March 2012 11:48 PM   [ Ignore ]   [ # 2 ]
Wallflower
Rank
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
 
 
Posted: 23 March 2012 02:57 PM   [ Ignore ]   [ # 3 ]
Administrator
Avatar
RankRankRank
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
 
 
Posted: 23 March 2012 03:08 PM   [ Ignore ]   [ # 4 ]
Wallflower
Rank
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
 
 
Posted: 23 March 2012 05:06 PM   [ Ignore ]   [ # 5 ]
Administrator
Avatar
RankRankRank
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
 
 
Posted: 23 March 2012 05:08 PM   [ Ignore ]   [ # 6 ]
Wallflower
Rank
Total Posts:  7
Joined  2012-03-08

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

-Eli

Profile