Getting an error when using Stripes payment process example - javascript

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.

Related

Create Stripe source from token issue

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

How do I Redirect to a 'Thank-You' page after form submission?

I have absolutely no idea how to add a 'thank you page' submission to my clients website. I am not experienced in coding, only UI etc.
Here is a [link][1] to site in question.
(EDIT) Let me elaborate. I am using Blocs (bootstrap wysiwyg app) and there is a form submit. I now need to add a 'thank-you' page redirect for google analytics purposes. The code below is what I believe will be able to help:
$(function()
{
var successMsg = "Your message has been sent."; // Message shown on success.
var failMsg = "Sorry it seems that our mail server is not responding, Sorry for the inconvenience!"; // Message shown on fail.
$("input,textarea").jqBootstrapValidation(
{
preventSubmit: true,
submitSuccess: function($form, event)
{
if(!$form.attr('action')) // Check form doesnt have action attribute
{
event.preventDefault(); // prevent default submit behaviour
var processorFile = "./includes/"+$form.attr('id')+".php";
var formData = {};
$form.find("input, textarea, option:selected").each(function(e) // Loop over form objects build data object
{
var fieldData = $(this).val();
var fieldID = $(this).attr('id');
if($(this).is(':checkbox')) // Handle Checkboxes
{
fieldData = $(this).is(":checked");
}
else if($(this).is(':radio')) // Handle Radios
{
fieldData = $(this).val()+' = '+$(this).is(":checked");
}
else if($(this).is('option:selected')) // Handle Option Selects
{
fieldID = $(this).parent().attr('id');
}
formData[fieldID] = fieldData;
});
First, submit the form and then catch the post. Handle the form and redirect.
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Handle your form
// redirect
header("Location: thank-you.php");
exit;
}
?>
<form metod="POST" action="<?= $_SERVER['REQUEST_URI']; ?>">
<button type="submit">Send</button>
</form>

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.

object is not a function on stripe javascript [duplicate]

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"

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

Categories