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).
Related
I am using 2checkout payment gateway in my PHP project and facing issue in generating token with 'sandbox' mode. Here's the code:
<form action="" method="post" id="frmSignup" name="frmSignup">
<input type="hidden" value="" name="token" id="token" />
<script type="text/javascript" src="https://www.2checkout.com/checkout/api/2co.min.js"></script>
<script>
// Called when token created successfully.
var successCallback = function(data) {
console.log("success::"+data);
var myForm = document.getElementById('frmSignup');
// Set the token as the value for the token input
myForm.token.value = data.response.token.token;
// IMPORTANT: Here we call `submit()` on the form element directly instead of using jQuery to prevent and infinite token request loop.
myForm.submit();
};
// Called when token creation fails.
var errorCallback = function(data) {
// Retry the token request if ajax call fails
console.log("error::"+data.errorMsg);
if (data.errorCode === 200) {
// This error code indicates that the ajax call failed. We recommend that you retry the token request.
} else {
alert(data.errorMsg);
}
};
var tokenRequest = function() {
// Setup token request arguments
var args = {
sellerId: "<?php echo accountnumber_checkout; ?>",
publishableKey: "<?php echo publickey_checkout; ?>",
ccNo: $("#creditcardno").val(), //input field
cvv: $("#billingcvv").val(), //input field
expMonth: $("#expiryMonth").val(), //input field
expYear: $("#expiryYear").val() //input field
};
// Make the token request
TCO.requestToken(successCallback, errorCallback, args);
};
$(function() {
// Pull in the public encryption key for our environment
TCO.loadPubKey('sandbox');
$("#frmSignup").submit(function(e) {
// Call our token request function
tokenRequest();
// Prevent form from submitting
return false;
});
});
</script>
</form>
Facing this error: ( in 2co.min.js 2:1628 )
Uncaught ReferenceError: tokenRequestUrl is not defined
If I use 'production' in TCO.loadPubKey('production') instead of 'sandbox', then the token is generated. But, in production mode, I am not able to use test cards:
Test Payment Methods
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
I want when I resubmit form it will goes to next page.
But,
when I am trying to resubmit form it recursively called
'$('#payment-form').submit(function(e){}' function and program goes in infinite loop.
I also try,
$form.get(0).submit();
I don't know what exactly this code does but its not working.
What change can I do so that code will work properly.Please Suggest me to find out solution.
Code:
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('pk_test_JvzbQnE7YDpeiZOMQO0D9Mar');
var stripeResponseHandler = function( status , response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
alert("error...!");
var error = " error : "+response.error.message;
$form.find('.payment-errors').text(error);
$form.find('button').prop('disabled', false);
return false;
}
else
{
alert(" Card Submited..");
var token = response.id;
$form.find('.payment-errors').text('Your Card is Submited..! :: ' + token);
document.getElementById("stripeToken").value = token;
// and re-submit
$form.submit();
}
};
jQuery(function($) {
$('#payment-form').submit(function(e){
//function submitCard() {
var $form = $('#payment-form');
var number = $('.card-number').val();
var cvc = $('.card-cvc').val();
var exp_month = $('.card-expiry-month').val();
var exp_year = $('.card-expiry-year').val();
//var email =$('.card-email').val();
//var amount =$('.card-amount').val();
if (!Stripe.validateCardNumber(number)) {
alert('The credit card number appears to be invalid.');
return false;
}
// Validate the CVC:
if (!Stripe.validateCVC(cvc)) {
alert('The CVC number appears to be invalid.');
return false;
}
// Validate the expiration:
if (!Stripe.validateExpiry(exp_month, exp_year)) {
alert('The expiration date appears to be invalid.');
return false;
}
// Disable the submit button to prevent repeated clicks
$form.find('#submit').prop('disabled', true);
Stripe.card.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
//Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
</script>
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