I have a Javascript file of which I am trying to use, to create a Stripe source from a Stripe token. To then be able to submit that source to my form, submit the form and then create a charge from the .php file of which the form submits to.
I am just having some difficulty doing this, I am not getting any errors in my console and it creates the token and source as supposed. However the data is never submitted to my form, as the page never redirects and no charge is ever made.
I am unsure of what exactly I am missing to make it work properly.
Below is an attached image of the console output.
The code I have so far is the one seen below.
Stripe.card.createToken({
number: document.getElementById('cardNumId').value,
cvc: document.getElementById('cvcID').value,
exp_month: document.getElementById('expMonthId').value,
exp_year: document.getElementById('expYearId').value
}, stripeResponseHandler);
var stripeResponseHandler = function(status, response) {
if (response.error) {
alert('Something went wrong, sorry!' + error);
} else {
var token = response.id;
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createSource(source, token).then(function(result) {
if (result.error) {
// Inform the user if there was an error
alert('Something went wrong, sorry!' + error);
} else {
// Send the source to your server
stripeSourceHandler(result.source);
}
});
});
function stripeSourceHandler(source) {
// Insert the source ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeSource');
hiddenInput.setAttribute('value', source.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
}
};
I think you should read this in the Stripe docs:
https://stripe.com/docs/stripe-js/elements/quickstart
Related
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.
This question already has answers here:
"Submit is not a function" error in JavaScript
(19 answers)
Closed 8 years ago.
Okay so I followed stripes tutorial for creating a custom form. And my code is as follows for the javascript. Now my credit card fields are part of a larger form and not just those fields. it's ID is payment-form as you would think it would be in the code below.
My issue is that when the code runs everything works up until this line: $form.get(0).submit(); where I receive this error: Uncaught TypeError: object is not a function I tried removing some stuff and making it: $form.submit but that resulted in a infinite loop.
So what do I need to do to fix this problem? What is causing this problem?
My Code:
<script type="text/javascript">
Stripe.setPublishableKey('<?php echo $key; ?>');
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('#submit').prop('disabled', false);
} else {
// 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="text" name="stripeToken" />').val(token));
$form.find('[data-stripe]').val('');
// and re-submit
$form.get(0).submit();
}
};
jQuery(function($) {
$('#payment-form').submit(function(event) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('#submit').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
</script>
Change the id/name of the submit button to something else..aka name="btnSubmit"
I have a signup form with the fields Firstname, lastname, email, class of, and college major and I am trying to send the information from the form to a parse user object. When I set a breakpoint at "user.signup" the code steps through and I see the new user show up in my parse dashboard. However, if I remove the breakpoint and submit the form I get the error:
"Error: 100 XMLHttpRequest failed:
{"statusText":"","status":0,"response":"","responseType":"","responseXML":null,"responseText":"","upload":{"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null},"withCredentials":false,"readyState":4,"timeout":0,"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null}"
the code for my javascript file is:
function SignUp() {
var user = new Parse.User();
var form = document.getElementById("signup-form")
var firstname = form.firstname.value;
var lastname = form.lastname.value;
var email = form.email.value;
var grad = form.grad.value;
var major = form.major.value;
var password = "6789";
user.set("firstname", firstname);
user.set("lastname", lastname);
user.set("email", email);
user.set("username", email);
user.set("grad", grad);
user.set("major", major);
user.set("password", password);
user.signUp(null, {
success: function(user) {
// Hooray! Let them use the app now.
alert("Thank you for signing up. We'll keep you updated!");
},
error: function(user, error) {
// Show the error message somewhere and let the user try again.
alert("Error: " + error.code + " " + error.message);
}
});
return false;
};
In my html file I am calling this function at:
<form class="form-signup" role="form" id="signup-form" onsubmit="SignUp();">
Is there an issue with how I'm storing the values? I don't understand how something can work with a breakpoint but not without. Any help is really appreciated!
That’s the typical problem with returning a value from within an asynchronous method … which is not possible.
Prevent the default submitting of the form, and then submit it explicitly within the call back function.
There is an another way also to solve this problem:
Instead of form in form class="form-signup" role="form" id="signup-form" onsubmit="SignUp()"
Write div i.e. div class="form-signup" role="form" id="signup-form" onsubmit="SignUp()"
As stated above, just add e.preventDefault(); at the start of your function and document.getElementById("your-form-id").submit(); or in this case just form.submit(); (because it was defined earlier in the script by var form) into the success callback and it should work! Thought I would add a bit of clarity to reinforce CBroe's answer as it wasn't specified what the form.submit function looked like exactly.
I'm using the code example from Stripe's documentation located here. But, when this is processed $form.get(0).submit(); I'm getting this error.
Uncaught TypeError: Property 'submit' of object #<HTMLFormElement>
is not a function
My code is below:
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token = response.id;
console.log(token);
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and re-submit
$form.get(0).submit(); **//Error happens here**
}
};
jQuery(function($) {
$('#payment-form').submit(function(e) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('#payment-button').prop('disabled', true);
Stripe.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
What am I doing wrong?
On the line you're getting the error, try this instead:
jQuery($form.get(0)).submit();
Your problem is that you're getting the first HTML element, but in order to call "submit" on that, you need to wrap it with jQuery.
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