JavascriptJquery Split Variable Into Two for Stripe Integration - Stack Overflow

admin管理员组

文章数量:1384656

I apologize in advance as I am fairly good with PHP, but when it es to javascript and jquery, I really am a bit clueless. I have the following code, which I edited from the example found here , and wanted to bine 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: $('').val(),
                    cvc: $('.card-cvc').val(),
                    exp_month: expmm,
                    exp_year: expyy
                }, stripeResponseHandler);
                return false; // submit from callback
            });
        });

I apologize in advance as I am fairly good with PHP, but when it es 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./boucher/1750375, and wanted to bine 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: $('').val(),
                    cvc: $('.card-cvc').val(),
                    exp_month: expmm,
                    exp_year: expyy
                }, stripeResponseHandler);
                return false; // submit from callback
            });
        });

• javascript
• jquery
• payment
• gateway

Share Improve this question Follow edited Nov 5, 2013 at 16:43 Joshua Olds asked Nov 5, 2013 at 16:07 Joshua OldsJoshua Olds 17733 silver badges1111 bronze badges 3

• To add onto, the bined id of the expiration field is date-exp, this is where users would type in something like 10/2014. The goal is to separate by the / and set exp_month and exp_year as the correct values in the stripe.createToken section – Joshua Olds Commented Nov 5, 2013 at 16:09
• did you try to write to log the information that you're sending? to see that the data is retrieved? – Guy Commented Nov 5, 2013 at 16:10
• does cc and carc-cvc real are classes? hard to find the issue without looking at the rest of your code. Please post your HTML as well – Guy Commented Nov 5, 2013 at 16:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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:

$("").val()

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).

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

https://github./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. 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.

本文标签： JavascriptJquery Split Variable Into Two for Stripe IntegrationStack Overflow