Old cards module

cards.js

////////////////////////////////
////// PAYSTACK FUNCTIONS ///////
////////////////////////////////

var Paystack = {
    createToken: function(args, responseHandler) {
        var paymentform = args.paymentForm;
        var cvc = 0;
        var cardnumber = 0;
        var expmonth = 0;
        var expyear = 0;
        var accountnumber = 0;
        var accounttoken = 0;

        var status = 0;
        var response = {};

        var card_field = paymentform.find('[data-paystack="number"]')[0];
        if (card_field) {
            cardnumber = card_field.value;
            cardnumber = cardnumber.replace(/\s+/g, '');
        }

        var cvc_field = paymentform.find('[data-paystack="cvc"]')[0];
        if (cvc_field) cvc = cvc_field.value;

        var expiry_field = paymentform.find('[data-paystack="exp"]')[0];
        if (expiry_field) {
            expiry = $.payment.cardExpiryVal(expiry_field.value);
            expmonth = expiry.month;
            expyear = expiry.year;
        }

        var cardval = ($.payment.validateCardNumber(cardnumber));
        var cardtype = $.payment.cardType(cardnumber);
        var expiryval = ($.payment.validateCardExpiry(expmonth, expyear));

        if (cardval == false) {
            response.message = 'Invalid Card Number';
            response.field = 'cardnumber';
        } else if (expiryval == false) {
            response.message = 'Invalid Expiry Date';
            response.field = 'expiry';
        } else if (cvc == 0) {
            response.message = 'Invalid CVV';
            if (cvc.length != 3) {
                response.message = 'CVV must be 3 digits';
            }
            response.field = 'cvv';
        } else {
            status = 1;

            var card = new Array(4);
            card[0] = cardnumber;
            card[1] = cvc;
            card[2] = expmonth;
            card[3] = expyear;

            var cardstring = card.join("*")
            var enc = cryptico.encrypt(cardstring, paystackOptions.publishable_key);
            var clientdata = (enc.cipher);

            response = args.params;
            response.clientdata = clientdata;
            response.last4 = cardnumber.substring(cardnumber.length - 4);
        }

        responseHandler(status, response);
    },

    encryptPin: function(args) {
        var encrypted_pin = cryptico.encrypt(args.pin, paystackOptions.publishable_key);
        return encrypted_pin.cipher
    }
};


////////////////////////////////
/// CARD PAYMENT FUNCTIONS /////
////////////////////////////////

function formatCard() {
    $('.paystack-form').find('#cvv-helper').click(function(e) {
        e.preventDefault();
        var form = $(this).parents('.form-group');
        resetErrors();
        form.find('#cvv').focus();
        $(this).popover({
            trigger: 'focus',
            content: 'The CVV is the three digit security code at the back of your card',
            container: 'body',
            placement: 'auto bottom'
        }).popover('show');
        $(document).mousedown(function(e) {
            form.find('#cvv-helper').popover('destroy');
        });
    });

    $('[data-numeric]').payment('restrictNumeric');
    $('.cc-number').focus().payment('formatCardNumber');
    $('.cc-exp').payment('formatCardExpiry');
    $('.cc-cvc').payment('formatCardCVC');

    var page_url = (window.location != window.parent.location) ? document.referrer : document.location.origin;
    if (page_url.substring(0, 5) == 'https') {
        $('.cc-number').attr('name', 'card[number]');
        $('.cc-exp').attr('name', 'card[expiry]');
        $('.cc-cvc').attr('name', 'card[cvv]');
    }

    $.fn.toggleInputError = function(erred) {
        this.parent('.form-group').toggleClass('has-error', erred);
        return this;
    };

    if (isMobile.phone) {
        $('.pin-field-desktop').remove();
        $('.pin-field-mobile').show();

        $('.cc-pin').on('focus', function() {
            $(this).siblings('.cc-pin-password').addClass('focused');
        });

        $('.cc-pin').on('blur', function() {
            $(this).siblings('.cc-pin-password').removeClass('focused');
        });

        $('.cc-pin').on('input', function() {
            $(this).siblings('.cc-pin-password').val($(this).val());
        });
    } else {
        $('.cc-number').on('keyup', function() {
            if (($.payment.cardType($(this).val()) == 'verve' && $(this).val().length == 23) || $(this).val().length == 19) {
                $('.cc-exp').focus();
                analytics.track('input', 'card number');
            }
        });

        $('.cc-number').on('keyup', function() {
            var type = $.payment.cardType($(this).val()) ? $.payment.cardType($(this).val()) + ' identified animated fadeInLeft' : "";
            $(this).siblings('#paystack-card').removeClass().addClass('paystack-card ' + type);
        });

        $('.cc-exp').on('keyup', function() {
            if ($(this).val().length == 7) {
                $('.cc-cvc').focus();
                analytics.track('input', 'card expiry');
            }
        });

        $('.cc-cvc').on('keyup', function() {
            if ($(this).val().length == 3) {
                analytics.track('input', 'card cvc');
            }
        });

        $('.pin-field-desktop').show();
        $('.pin-field-mobile').remove();
    }
};

var charging_card;
function payWithCard(trans, pin, options) {
    if (charging_card) return;

    var options = options || {};
    var params = {
        trans: transaction.id,
        device: transaction.device
    }

    if (pin) {
        params.handle = Paystack.encryptPin({
            pin: pin
        })
    }

    Paystack.createToken({
        paymentForm: $('#paystack-form'),
        params: params
    }, function(status, response) {
        if (status == 1) {
            charging_card = true;
            $.ajax({
                type: 'POST',
                url: paystackOptions.payment_base_url + 'charge/',
                data: params,
                dataType: 'json',
                success: function(response) {
                    if (!options.retrial) {
                        if (response.auth == '3DS') {
                            handleSecurecode(response);
                            analytics.track('auth', '3DS');
                        } else {
                            handleResponse(response, options);
                        }
                    }
                },
                error: function(error) {
                    handleErrors({
                        response: error
                    });
                },
                complete: function() {
                    charging_card = false;
                }
            });
        } else {
            delay_action(function() {
                handleErrors(response);
            }, 300);
        }
    });
}

function handleSecurecode(response) {
    $('#paystack-form').find('.securecode-message').show();
    $('#paystack-form .securecode-button').click(function() {
        $('#paystack-form').find('.pre-authorization').hide();
        $('#paystack-form').find('.during-authorization').show();
        openSecurecode(response.otpmessage);
    });
    $('#paystack-form .close-securecode').click(function() {
        $('#paystack-form').find('.securecode-message').hide();
        $('#paystack-form .securecode-button').unbind('click');
        $('.btn').prop('disabled', false);
        $('.btn-loader').addClass('hidden');
        $('.btn-text').removeClass('hidden');
    });
}

function openSecurecode(url) {
    var authWindow = window.open("", "_blank", 'width=600,height=600');
    authWindow.document.write(PaystackVariables.securecodeLoading);
    authWindow.location.href = url;

    var authWindowTimer = window.setInterval(function() {
        if (authWindow && authWindow.closed !== false) {
            window.clearInterval(authWindowTimer);
            closeSecurecode({
                message: "Authorization was abandoned. Please try again"
            })
        }
    }, 200);

    window.onbeforeunload = function() {
        authWindow.close();
    }

    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    eventer(messageEvent, function(e) {
        var data = (e.data || e.message);
        if (data && (typeof data === 'string' || data instanceof String)) {
            var action = data.split(" ")[0];

            if (action == 'PaystackAuth') {
                window.clearInterval(authWindowTimer);
                var response = JSON.parse(data.substr(data.indexOf(' ') + 1));
                closeSecurecode(response);

                authWindow.close();
            }
        }
    }, false);
}

function closeSecurecode(response) {
    $('#paystack-form .securecode-button').unbind('click');
    $('#paystack-form').find('.securecode-message, .during-authorization').hide();
    $('#paystack-form').find('.pre-authorization').show();
    handleResponse(response);
}

function validatePin() {
    var pin_field = $('.paystack-form').find('.cc-pin');
    if (pin_field.val().length == 4) {
        $('#paystack-form .card-pin-group').addClass('working').find('input').blur().attr('disabled', true);
        payWithCard(transaction.id, pin_field.val(), {
            sent_pin: true
        });
    }
}

var sending_authorization;
function sendAuthorization(token, options) {
    if (sending_authorization) return;
    sending_authorization = true;

    var options = options || {};
    options.sent_token = true;

    $.ajax({
        type: 'POST',
        url: paystackOptions.payment_base_url + 'charge/validate',
        data: {
            trans: transaction.id,
            token: token
        },
        dataType: 'json',
        success: function(response) {
            if (!options.retrial) {
                if (response.auth == '3DS') {
                    handleSecurecode(response);
                    analytics.track('auth', '3DS');
                } else {
                    handleResponse(response, options);
                }
            }
        },
        error: function(response) {
            handleErrors({
                response: response
            });
        },
        complete: function(){
            sending_authorization = false;
        }
    });
}

function authorizeCard(response, options) {
    $('#paystack-form').find('.token-input-view').show();

    if (!options.sent_pin && !options.sent_token && !options.authorized_pin) {
        $('#paystack-form').find('.token-input-view').find('input').eq(0).focus();
        if (isMobile.phone) {
            $('#paystack-form').find('.cc-pin').on('input', function() {
                validatePin();
            });
        } else {
            pincode();
        }
    }

    if (options.authorized_pin && !options.sent_token) {
        $('#paystack-form').find('.card-pin-group').hide();
        $('#paystack-form').find('.card-token-group').show();
        $('#paystack-form').find('.cc-token').focus();

        $('#paystack-form').find('.authorization-view_header').html('AUTHORIZATION REQUIRED');
        $('#paystack-form').find('.authorization-view_subheader').html(response.otpmessage);

        $('#paystack-form').find('#authorizeCard').on('click', function() {
            var token = $('#paystack-form').find('.cc-token').val();
            $('#paystack-form').find('#authorizeCard').prop('disabled', true).find('span').toggleClass('hidden');
            $('#paystack-form').find('.reset-options').addClass('disabled');
            sendAuthorization(token);
        });

        $('#paystack-form').find('#start-over').click(function() {
            resetErrors();
            switchMode('card');
        });

        $('#paystack-form').find('#resend-token').click(function() {
            resetErrors();
            var token = $('#paystack-form').find('.cc-token').val();
            sendAuthorization(token, {
                retrial: true
            });
        });
    } else if (options.authorized_pin) {
        $('#paystack-form').find('.reset-options').removeClass('disabled');
        $('#paystack-form').find('#authorizeCard').prop('disabled', false).find('span').toggleClass('hidden');
        handleErrors({
            field: 'cardtoken',
            message: response.otpmessage
        });
    } else if (options.sent_pin) {
        $('#paystack-form .card-pin-group').removeClass('working').find('input').attr('disabled', false).val("");
        handleErrors({
            message: response.message
        });
    }
}

function resetCardAuth() {
    var clone = $('#card-payment').find('.token-input-view').clone();
    $('#paystack-form').find('.token-input-view').replaceWith(clone);
}

function pincode() {
    $('.paystack-form').find('.pincode-input-text').on('keyup', function() {
        var pin_field = $('.paystack-form').find('.cc-pin');
        var card_pin = pin_field.val();
        card_pin = card_pin.split("");
        card_pin[$(this).data('position')] = $(this).val();
        pin_field.val(card_pin.join(""));

        if ($(this).val().length == 1) {
            $(this).next('.pincode-input-text').focus().select();
        }

        validatePin();
    });

    $('.paystack-form').find('.pincode-input-text').on('keydown', function() {
        var key = event.keyCode || event.charCode;
        var isDeleteKey = key == 8 || key == 46;
        if (isDeleteKey && $(this).val().length == 0) {
            $(this).prev('.pincode-input-text').focus().select();
        }
    });

    $('.paystack-form').find('.pincode-input-text').focus(function() {
        $(this).attr('type', 'tel');
        $(this).select();
    }).blur(function() {
        $(this).attr('type', 'password');
    });
}