We Keep Coding

STRIPE.JS Error

Stripe.js
Trying to implement Stripe in a project and i keep getting this error
Any idea what should i do ???
Stripe is not defined fix or add /global $/
-----> "stripe_card_token"=>"undefined"}} <------
$(document).ready(function() {
Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));
// Watch for a form submission:
$("#form-submit-btn").click(function(event) {
event.preventDefault();
$('input[type=submit]').prop('disabled', true);
var error = false;
var ccNum = $('#card_number').val(),
cvcNum = $('#card_code').val(),
expMonth = $('#card_month').val(),
expYear = $('#card_year').val();
if (!error) {
// Get the Stripe token:
Stripe.createToken({
number: ccNum,
cvc: cvcNum,
exp_month: expMonth,
exp_year: expYear
}, stripeResponseHandler);
}
return false;
}); // form submission
function stripeResponseHandler(status, response) {
// Get a reference to the form:
var f = $("#new_user");
// Get the token from the response:
var token = response.id;
// Add the token to the form:
f.append('<input type="hidden" name="user[stripe_card_token]" value="' + token + '" />');
// Submit the form:
f.get(0).submit();
}
});

I think your first error is from the linter you're using. You can add /* global Stripe */ as the first line (depending on the linter you use).

Haml is erasing javascript

I am implementing a custom form for stripe. I am getting an error stating that there is no card entered when I put in one. I checked by current file which contains this javascript:
:javascript
Stripe.setPublishableKey('pk_test_key');
$('#payment-form').submit(function(event) {
var form = $(this);
form.find('button').prop('disabled', true);
Stripe.createToken(form, stripeResponseHandler);
return false;
});
function stripeResponseHandler(status, response) {
var form = $('#payment-form');
if (response.error) {
form.find('.payment-errors').text(response.error.message);
form.find('button').prop('disabled', false);
} else {
var token = response.id;
form.append($('<input type="hidden" name="stripeToken">').val(token));
form.get(0).submit();
}
But when I see the javascript that is actually formed in the browser all i see is this:
var form = $(this);
form.find('button').prop('disabled', true);
Stripe.createToken(form, stripeResponseHandler);
return false;
var form = $('#payment-form');
if (response.error) {
form.find('.payment-errors').text(response.error.message);
form.find('button').prop('disabled', false);
} else {
var token = response.id;
form.append($('<input type="hidden" name="stripeToken">').val(token));
form.get(0).submit();
}
I contacted stripe support and said my javascript is correct but when it's rendered through haml it's coming out wrong. Does anybody know of a way to stop haml from removing sections of my javascript?

The entire filtered block must be indented as per the docs:
http://haml.info/docs/yardoc/file.REFERENCE.html#filters
Note only your indented JS is being rendered.

Form data with attachments: jQuery and PHPMailer, how to process attachments?

I have a div with form fields in it including multiple attachments in my HTML. However, I am not sure how to recode the following to allow for zero to many attachments, and not sure about the PHPMailer part. Here is the Ajax part I've got so far. Is this part at least correct? What about sendContactFormEmail.php? Do I have to use the FormData interface?
<!-- validate and submit form input -->
<script type="text/javascript">
$(document).ready(function() {
matchFormFields = "#contactForm input[required], #contactForm textarea[required]";
matchContactSubmitResult = "#contactSubmitResult";
errorColor = 'red';
$("#form_send").click(function() {
var formIsValid = true;
// loop through each field and change border color to red for invalid fields
$(matchFormFields).each(function() {
$(this).css('border-color', '');
// check whether field is empty
if(!$.trim($(this).val())) {
$(this).css('border-color', errorColor);
formIsValid = false;
}
// check whether email is valid
var email_reg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if($(this).attr("type") == "email" && !email_reg.test($.trim($(this).val()))) {
$(this).css('border-color', errorColor);
formIsValid = false;
}
});
// submit data to server if form field contents are valid
if (formIsValid) {
// retrieve input field values to be sent to server
post_data = {
'form_firstname' : $('input[name=form_firstname]').val(),
'form_lastname' : $('input[name=form_lastname]').val(),
'form_address' : $('input[name=form_address]').val(),
'form_city' : $('input[name=form_city]').val(),
'form_email' : $('input[name=form_email]').val(),
'form_phone' : $('input[name=form_phone]').val(),
'form_attachment' : $('input[name=form_attachment]').val(),
'form_message' : $('textarea[name=form_message]').val(),
};
// Ajax post data to server
$.post('mail/sendContactFormEmail.php', post_data, function(response) {
if (response.type == 'error') { // load json data from server and output message
output = '<div class="error">' + response.text + '</div>';
} else {
output = '<div class="success">' + response.text + '</div>';
// reset values in all form fields
$(matchFormFields).val('');
}
// display an animation with the form submission results
$(matchContactSubmitResult).hide().html(output).slideDown();
}, 'json');
}
});
// reset border on entering characters in form fields
$(matchFormFields).keyup(function() {
$(this).css('border-color', '');
$(matchContactSubmitResult).slideUp();
});
});
</script>

how to get response from a function and validate another function in jquery

when i click a button i want to validate two functions one by one and my functions are
validateEmail(email);
validatemobile(mobile);
what i am trying so far and my code is
when i click getotp button
$('.getotp').click(function(e) {
e.preventDefault();
var response;
var email=$('#email').val();
validateEmail(email);
if(response=true){
var mobile=$('#mob').val();
validatemobile(mobile);}});
my emailvalidation function is
function validateEmail(email){
var emailReg = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(#\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
var valid = emailReg.test(email);
if(!valid)
{
$('.errornotice').text('Email Address Is Not Valid');
response=false;
}
else
{
response=true;
}
}//email validate function
and my mobile validation function is
function validatemobile(mobile){
//CHECK MOBILE NUMBER
if(mobile=='')
{
$('.errornotice').removeClass('nodisplay');
$('.errornotice').text('Mobile Number can not be empty');
e.preventDefault();
}
else if(mobile.toString().length>10 || mobile.toString().length<10 )
{
$('.errornotice').removeClass('nodisplay');
$('.errornotice').text('Mobile Number Must be 10 Digit');
e.preventDefault();
}
//send OTP
else
{
e.preventDefault();
$.ajax({
type:'POST',
url:"otp.php",
data:{mob:mobile},
success: function(data){
e.preventDefault();
$('.errornotice').text('check your mobile and enter OTP');
}//success
})//ajax
}//else
}//mobile validate function

Creating stripe payment token after validating other fields

To keep this simple I have only included one of the forms I am validating. Everything validates right, but I can't figure out why a token does not get generated. The form never submits. I had the form working right without validating not sure what the problem is.
var oeValidate = {
'name' : function() {
var ele = $('#name');
if(ele.val().length < 6) {
oeValidate.errors = true;
ele.removeClass('correct').addClass('error');
} else {
ele.removeClass('error').addClass('correct');
}
},
'sendIt' : function() {
if(!oeValidate.errors) {
$('#payment-form').submit(function(event){
// disable the submit button to prevent repeated clicks
$('#stripe-submit').attr("disabled", "disabled");
// send the card details to Stripe
Stripe.createToken({
name: $('#name').val(),
number: $('#card-number').val(),
exp_month: $('select[name="card-month"]').val(),
exp_year: $('select[name="card-year"]').val(),
cvc: $('#card-cvc').val()
}, stripeResponseHandler);
// prevent the form from submitting the default action
return false;
});
}
}
};
Stripe.setPublishableKey(stripe_vars.publishable_key);
function stripeResponseHandler(status, response) {
if (response.error) {
// show errors returned by Stripe
jQuery(".payment-errors").html(response.error.message);
// re-enable the submit button
jQuery('#stripe-submit').attr("disabled", false);
} else {
var form$ = jQuery("#payment-form");
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
// and submit
form$.get(0).submit();
}
}
jQuery(document).ready(function($) {
$('#stripe-submit').click(function (){
oeValidate.errors = false;
oeValidate.name();
oeValidate.sendIt();
return false;
});
});

Figured it out. Needed to not have the submit function as a method.
$('#payment-form').submit(function(event){
// validate fields
oeValidate.errors = false;
oeValidate.name();
// send the card details to Stripe
if(!oeValidate.errors){
// disable the submit button to prevent repeated clicks
$('#stripe-submit').attr("disabled", "disabled");
Stripe.createToken({
name: $('#name').val(),
number: $('#card-number').val(),
exp_month: $('select[name="card-month"]').val(),
exp_year: $('select[name="card-year"]').val(),
cvc: $('#card-cvc').val()
}, stripeResponseHandler);
}
// prevent the form from submitting the default action
return false;
});

suppose you have to use
Stripe.createToken($(this), stripeResponseHandler);
I mean the first parameter must be your form object and your form must contain specified fields, but not an object, that you are trying to create
then response will contain this info
check this docs