Question

I am using Stripe payment system to accept credit cards with jQuery validator for forms all with ajax.
This works for stripe and ajax but the validation doesnt work.
Here’s process.php https://gist.github.com/1750375

$(document).ready(function() {
    var payBtn = $('#paymentBtn').click(function(){
            Stripe.createToken({
                    number: $('.card_number').val(),
                    cvc: $('.card_cvc').val(),
                    exp_month: $('.card_expiry_month').val(), 
                    exp_year: $('.card_expiry_year').val()
            }, 
            function(status, response) {
                if (response.error) {
                    payBtn.removeAttr("disabled");
                    $(".payment_errors").html(response.error.message);
                    addInputNames();
                } else {
                    var token = response['id'];
                    //$("#stripeToken").val(token); 
                    var amount = $("#formAmount").val();
                    $.post( 'process.php', {amount:amount, stripeToken:token},function(data){
                        $('#recDiv').html(data);
                    });
                }
            });

            return false;
    });

    // THIS SECTION BELOW DOES NOT GET CALLED
    jQuery.validator.addMethod("cardNumber", Stripe.validateCardNumber, "*");
    jQuery.validator.addMethod("cardCVC", Stripe.validateCVC, "*");
    jQuery.validator.addMethod("cardExpiry", function() {
            return Stripe.validateExpiry($(".card_expiry_month").val(), 
                                                                     $(".card_expiry_year").val())
    }, "*");

    $("#payment_form").validate({
            submitHandler: submit,// this does nothing
            rules: {
                    "card_cvc" : {
                            cardCVC: true,
                            required: true
                    },
                    "card_number" : {
                            cardNumber: true,
                            required: true
                    },
                    "card_expiry_year" : "cardExpiry"
            }
    });
});

This works for validation but then stripe doesnt work because now i have put the .post function, missing all its previous variables from the first example, into this submitHandler.

$("#payment_form").validate({
        submitHandler: function(form) {
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: $(this).serialize(),
            success: function(returnedData) {
                $('#recDiv').append(returnedData);//nothing happens because stripe doesnt work
            } 
        });         
        return false;
    },
        rules: {
                "card_cvc" : {
                        cardCVC: true,
                        required: true
                },
                "card_number" : {
                        cardNumber: true,
                        required: true
                },
                "card_expiry_year" : "cardExpiry"
        }
});

QUESTION: How can i get the validation to work from the first sample above?

Answer 1

i see you also incorporate this https://gist.github.com/9ce1a97c0453581044bb – if you are using as Mobile / Phonegap, can you show some sample code on how to connect to the backend server?