Javascript / Jquery Split Variable Into Two for Stripe Integration

Question

I apologize in advance as I am fairly good with PHP, but when it comes to javascript and jquery, I really am a bit clueless. I have the following code, which I edited from the example found here https://gist.github.com/boucher/1750375, and wanted to combine the credit card exp month and year field into one. The issue is splitting them back apart to use with the stripe example code where it creates a token. Obviously the example on github works perfectly but when I attempt to edit, the script doesn't act like anything is wrong but doesn't submit to stripe and retreive the token as before.

$(document).ready(function() {
            $("#payment-form").submit(function(event) {
                // disable the submit button to prevent repeated clicks
                $('.submit-button').attr("disabled", "disabled");
                var expgroup = document.getElementById('date-exp').val;
                var expArray = expgroup.split( '/' );
                var expmm = ( expArray[ 0 ] );
                var expyy = ( expArray[ 1 ] );
                // createToken returns immediately - the supplied callback submits the form if there are no errors
                Stripe.createToken({
                    number: $('.cc').val(),
                    cvc: $('.card-cvc').val(),
                    exp_month: expmm,
                    exp_year: expyy
                }, stripeResponseHandler);
                return false; // submit from callback
            });
        });

Answer 1

This won't work.

var expgroup = document.getElementById('date-exp').val;

use this instead:

var expgroup = $("#date-exp").val()

Also "cc" is id and not a class. You need to use:

$("#cc").val()

and not:

$(".cc").val()

Answer 2

document.getElementById('date-exp').val

Is a mixture of jQuery and DOM idiom. It should either be:

document.getElementById('date-exp').value

or:

$('#date-exp').val()

Also consider checking that / is actually in the value (ie that expArray.length===2).

Answer 3

Stripe's jquery.payment library has this function built into it already:

https://github.com/stripe/jquery.payment#paymentcardexpiryvalstring-and-fnpaymentcardexpiryval

Here's some sample code.

# form fields on HTML.ERB page
<%= form_tag url do %>
  <%= text_field_tag :expiry, nil, name: nil, placeholder: "MM / YYYY", size: 9, id: "stripe-card-expiry" %>
  <%= hidden_field_tag :exp_month, nil, name: nil, id: "stripe-card-exp-month", data: { stripe: "exp-month" } %>
  <%= hidden_field_tag :exp_year, nil, name: nil, id: "stripe-card-exp-year", data: { stripe: "exp-year" } %>
  ...other fields and submit...
<% end %>

# Split single expiration field into month/year
expiration = $("#stripe-card-expiry").payment("cardExpiryVal") # => {month: "value", year: "value"}
$("#stripe-card-exp-month").val(expiration.month || 0)
$("#stripe-card-exp-year").val(expiration.year || 0)

# Submit to Stripe.com and get token
Stripe.card.createToken($("#form-id"), handleStripeResponse)

Depending on which version of Stripe.js you are using, if you use the "data-stripe..." items Stripe.js will automatically grab the values from the hidden fields.