I am getting this error and I have no clue about this and trying to sort out the things and tried many things but nothing works. Kindly check the errors below:
Notice: Undefined index: stripeToken in
/opt/lampp/htdocs/fullbrick/thankYou.php on line 42 NULL Fatal error:
Uncaught Stripe\Error\InvalidRequest: Must provide source or customer.
in /opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php:181
from API request 'req_cuGvSG7abb9bzS' Stack trace: #0
/opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php(144):
Stripe\ApiRequestor::_specificAPIError('{\n "error": {\n...', 400,
Array, Array, Array) #1
/opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php(430):
Stripe\ApiRequestor->handleErrorResponse('{\n "error": {\n...', 400,
Array, Array) #2
/opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php(97):
Stripe\ApiRequestor->_interpretResponse('{\n "error": {\n...', 400 ,
Array) #3
/opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiOperations/Request.php(56):
Stripe\ApiRequestor->request('post', '/v1/charges', Array, Array) #4
/opt/lampp/htdocs/halfdrink/stripe-php/lib/ApiOperations/Create.php(23):
Stripe\ApiResource::_staticRequest('post', '/v1/charges', Array, NULL)
5 /opt/lampp/htdocs/fullbrick/thankYou.php(53): Stripe\Charge::create(Array) #6
{main} in
/opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php on line
181
The code is:
<script>
// Errors For Stripe Payment Card Check
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the customer that there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token 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', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
// Custom styling can be passed to options when creating an Element.
var style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
color: "#32325d",
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
</script>
<form action="thankYou.php" method="post" id="payment-form">
<span class="bg-danger" id="payment_errors"></span>
<span class="bg-danger" id="card-errors"></span>
<div class="form-group col-md-6">
<label for="full_name">Full Name:</label>
<input class="form-control" type="text" name="full_name" id="full_name">
</div>
//Same as Email div, phone,address,city,state,zipcode,country,cardname,cardnumber,exp month, exp year, cvc
<button type="submit" class="btn btn-primary" id="checkout_button" style="display:none;">Check Out >></button>
</form>
On thanYou.php
//Getting Variable details like
$full_name = $_POST['full_name']; // same as email,phone, address,city ...
$metadata = array(
"cart_id" => $cart_id,
"tax" => $tax,
"sub_total" => $sub_total,
);
// Set your secret key: remember to change this to your live secret key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
\Stripe\Stripe::setApiKey("sk_test_hiQjZlN9oJ9GcLGAlPVwAvfq"); // secret Key
// Token is created using Checkout or Elements!
// Get the payment token ID submitted by the form:
$token = $_POST['stripeToken']; // Here not getting token
var_dump($token);
try{ . // Here not getting inside the try because token is null
$charge = \Stripe\Charge::create([
'amount' => 999,
'currency' => 'usd',
'description' => 'Example charge',
'source' => $token,
'receipt_email' => $email,
'metadata' => $metadata,
]);
}catch(\Stripe\Error\card $e){
echo $e;
}
This ApiRequestor.php is the main problem I guess.
Related
I am using Stripe to accept donations on my website and everything works great but it doesn't save the customer name and email however I am passing it in the billing_details. I think I need to pass it also on the server side,but it gives me this error (Undefined array key "email") when I used the post method '$email=$_POST['email'].. my question is how to pass the email to 'receipt_email' correctly.
\Stripe\Stripe::setApiKey('my secret key');
if(!isset($_SESSION['amount'])){
header("Location: donations.php");
}
$amount = $_SESSION['amount'];
$donation = $amount * 100;
$email = $_POST['email'];
$customer = \Stripe\Customer::create(array(
'email' => $email
));
$intent = \Stripe\PaymentIntent::create([
'amount' => $donation,
'currency' => 'usd',
// Verify your integration in this guide by including this parameter
'metadata' => ['integration_check' => 'accept_a_payment'],
'automatic_payment_methods' => ['enabled' => true],
'customer' => $customer->id,
'receipt_email' => $email,
]);
?>
<!DOCTYPE html >
<html >
<head>
<body>
<form id="payment-form" data-secret="<?= $intent->client_secret ?>">
<label>Card Holder Name</label>
<span id="card-holder-name-info" class="info"></span><br>
<input type="text" id="fullname" name="fullname" required><br>
<label>Email</label>
<span id="email-info" class="info"></span><br>
<input type="email" id="email" name="email" required><br>
<label>Card Number</label>
<div id="card-element" >
<!-- Elements will create input elements here -->
</div>
<button type="submit" id="card-button" class="donate-btn yellow-btn">Donate</button>
</form>
</div>
</div>
<script>
var stripe = Stripe('my public key');
var elements = stripe.elements();
var style = {
base: {
color: "#565556",
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
card.on('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
var form = document.getElementById('payment-form');
var fullname = document.getElementById('fullname');
var email = document.getElementById('email');
form.addEventListener('submit', function(ev) {
ev.preventDefault();
stripe.confirmCardPayment(form.dataset.secret, {
payment_method: {
card: card,
billing_details: {
name: fullname,
email: email
}
}
}).then(function(result) {
if (result.error) {
// Show error to your customer (e.g., insufficient funds)
alert(result.error.message);
} else {
// The payment has been processed!
if (result.paymentIntent.status === 'succeeded') {
// Show a success message to your customer
alert('The payment has been proccessed');
window.location.replace("SuccessPage");
}
}
});
});
</script>
I have followed this documentation to implement the Stripe Recurring Payments, which is working fine for both non-3d-Secure card and 3d-Secure enabled cards. For initial payments i get the 3d-Secure Payment authentication Modal from Stripe to authenticate payments using 3D-Secure Test cards.
The subscription is created along with invoices that Stripe generates for me. Everything's seems to be OK, BUT for 3D-Secure Enabled (Stripe Testing Cards) the First Payment goes through successfully but the subsequent payments which i have set interval of 1Day (for testing) are "Failed" by Stripe. From what i understand Stripe requires Customer's Authentication again to continue the Subscription.
In this they said
When 3D Secure is encountered, configure your billing settings to send
a hosted link to your customer to complete the flow.
That's completely OK, But why they even require the authentication step again if the first payment is succeeded and the subscription is started? I have gone through all the related Docs but found nothing to prevent that.
What if Customer does not check his/her email to come back to my Application to authenticate the payments?
OR
Is there anything wrong with the code? By that i mean that Stripe should have saved the Payment Method i.e. Card Number so it does not require the Customer Authentication on subsequent charges every time the new billing cycle start(monthly/biannually).
I have searched on internet and found and answer saying
You are using stripe.createToken which does not support 3ds
authentication. You need to migrate your client side code to
stripe.createPaymentMethod which does support it
Is that it? Any response is appreciated
My Payment.js
// set your stripe publishable key
var stripe = Stripe('pk_test_key');
var elements = stripe.elements();
var style = {
base: {
color: '#32325d',
lineHeight: '18px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
var cardNumber = elements.create('cardNumber', {
style: style
});
cardNumber.mount('#cardNumber');
var cardExpiry = elements.create('cardExpiry', {
style: style
});
cardExpiry.mount('#cardExpiry');
var cardCvc = elements.create('cardCvc', {
style: style
});
cardCvc.mount('#cardCVC');
var cardholderName = $('#custName').val();
var amount = $('#amount').val();
var cardButton = document.getElementById('makePayment');
cardButton.addEventListener('click', function(ev) {
// alert();
ev.preventDefault();
stripe.createToken(cardNumber).then(function(result) {
if (result.error) {
} else {
//$body.addClass("loading");
fetch('process.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
token_id: result.token.id
})
}).then(function(result) {
// Handle server response (see Step 3)
result.json().then(function(json) {
handleServerResponse(json);
//alert();
})
});
}
});
});
function handleServerResponse(response) {
if (response.error) {
// Show error from server on payment form
} else if (response.requires_action) {
// Use Stripe.js to handle required card action
var action = response.next_action;
if (action && action.type == 'redirect_to_url') {
window.location = action.redirect_to_url.url;
}
handleAction(response);
} else {
console.log("3D" + response);
}
}
function handleAction(response) {
var paymentIntentSecret = response.payment_intent_client_secret;
stripe.handleCardPayment(paymentIntentSecret).then(function(result) {
if (result.error) {
// Display error.message in your UI.
} else {
// The payment has succeeded. Display a success message.
alert('Payment succeeded!');
}
});
}
Process.php
<?php
require_once('stripe-php/init.php');
\Stripe\Stripe::setApiKey('sk_test_key');
$json_str = file_get_contents('php://input');
$json_obj = json_decode($json_str);
//print_r($json_obj->token_id);die;
//$intent = null;
try {
if (isset($json_obj->token_id)) {
//Create Customer
$customer = \Stripe\Customer::create([
"email" => "test#gmail.com",
"name" => "Haroon",
"source" => $json_obj->token_id,
]);
//create product
$product = \Stripe\Product::create([
'name' => 'Water',
'type' => 'service',
]);
//create a plan
$plan = \Stripe\Plan::create([
'product' => $product->id,
'nickname' => 'Water',
'interval' => 'day',
'currency' => 'eur',
'amount' => 1200.00,
]);
//add subscription to stripe
$subscription = \Stripe\Subscription::create([
'customer' => $customer->id,
'items' => [[
"plan" => $plan->id],],
'expand' => ['latest_invoice.payment_intent'],
]);
}
$intent = \Stripe\PaymentIntent::retrieve($subscription->latest_invoice->payment_intent->id);
$subscription = \Stripe\Subscription::retrieve($subscription->id);
// $intent->confirm();
// }
generatePaymentResponse($intent,$subscription);
}catch (\Stripe\Error\Base $e) {
# Display error on client
echo json_encode([
'error' => $e->getMessage()
]);
}
function generatePaymentResponse($intent,$subscription) {
if ($intent->status == 'requires_action' && $subscription->status == 'incomplete' &&
$intent->next_action->type == 'use_stripe_sdk' ) {
# Tell the client to handle the action
echo json_encode([
'requires_action' => true,
'payment_intent_client_secret' => $intent->client_secret
]);
} else if ($intent->status == 'succeeded' && $subscription->status == 'active') {
# The payment didn’t need any additional actions and completed!
# Handle post-payment fulfillment
echo json_encode([
'success' => true
]);
} else if ($intent->status == 'requires_payment_method' && $subscription->status == 'incomplete') {
echo "Subscription failed";
} else {
# Invalid status
http_response_code(500);
echo json_encode(['error' => 'Invalid PaymentIntent status']);
}
}
If you are doing this for already exist card then i have done this just before some day . Refer this document https://stripe.com/docs/payments/3d-secure .
This suggest that you need to create paymentIntent and need to confirm this payment intent . and also in 3ds there are test card 4242 4242 4242 4242 This card does not require any authentication for 3ds . Giving below link for test cards
https://stripe.com/docs/payments/3d-secure/web#three-ds-cards
I'm going to try and be thorough as possible. So what I'm trying to do is charge a user a percentage of the overall total that is calculated. How do we get the total? Well, the total cost is depended upon the progression of questions the user answers.
If the user needs a specific service then the cost might increase a bit, say to $100, but we're wanting to charge just 10% of that total that constantly changes like stated before. Currently, the amount is hardcoded, but since the amount changes depending on their services select, I can't have it hard coded.
I'm new to Stripe and Node but is there an easy way such as 'document.getElementById'? of something similar? The charge and everything work correctly but I believe I'm getting confused on the routing.
My HTML form (with the area where the total will be displayed):
<div class="" style="margin-top: 60px;">
<h2 class="quote-info">Estimated total: $<span id="new_text"></span> USD</h2>
<h2 class="quote-info">Reservation deposit: $<span id="new_text2"></span> USD</h2>
</div>
<!-- Payment form -->
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors"></div>
</div>
<input type="hidden" name="totalAmount" value="1000">
<button>Submit Payment</button>
</form>
My script tag that's found at the bottom of my HTML file that contains the form above:
<script type="text/javascript">
//Create a Stripe client
var stripe = Stripe('my_key_should_go_here');
// Create an instance of Elements
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token 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', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
var formData = JSON.stringify({
mytoken: token.id
});
$.ajax({
type: "POST",
url: "/charge",
data: formData,
success: function(){alert("done")},
dataType: "json",
contentType: "application/json"
});
// alert("Created a token with value: "+token.id)
form.submit();
}
</script>
And lastly, my app.js file:
const express = require('express');
const stripe = require('stripe')('deleted_key');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
// Set Static Folder
app.use(express.static('public'));
// Index route
app.get('/charge', (req, res) => {
res.send();
});
// charge route
app.post('/charge', (req, res) => {
// const amount = 2500;
const amount = req.body.totalAmount;
stripe.customers.create({
email: "random#gmail.com",
source: req.body.mytoken
})
.then(customer => {
stripe.charges.create({
amount,
description:'specified service description here',
currency:'usd',
customer:customer.id
})})
.then(charge => res.send('success'));
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
My primary question is this, how would I go about obtaining the amount given in the 'new_text' area in my HTML file to use and charge the user in node?
To use the getElementById is to add an ID to your amount field first:
<input type="hidden" name="totalAmount" id="totalAmount" value="1000">
Then you can use the ID to get the value of the field:
const amount = document.getElementById("totalAmount").value;
Although, I can see that your input type is hidden - is that intentional?
I'm using the code below to validate (through bootstrap-validator) the content of each field in my contact form (there's also an extra check via google recaptcha). You can see and test the form at at this address.
By default, the submit button is disabled <button id="submit-btn" class="btn-upper btn-yellow btn" name="submit" type="submit" disabled><i class="fa fa-paper-plane-o" aria-hidden="true"></i> SEND</button>, and is supposed to be re-enabled once all the fields are validated via bootstrap-validator and google recaptcha completed.
Issue: the submit button gets re-enabled directly once the first field is filled-in so there must be something somewhere that reactivates it (you can do a test by typing your name in the first field and then put your mouse over the submit button, and you will see that the button is active instead of disabled)
Any idea what the issue is and how to fix this?
Many thanks
JS:
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'aaVeuillez indiquer votre prénom'
}
}
},
last_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'aaVeuillez indiquer votre nom'
}
}
},
email: {
validators: {
notEmpty: {
message: 'aaVeuillez indiquer votre adresse e-mail'
},
regexp: {
regexp: '^[^#\\s]+#([^#\\s]+\\.)+[^#\\s]+$',
message: 'aaVeuillez indiquer une adresse e-mail valide'
}
}
},
message: {
validators: {
stringLength: {
min: 20,
max: 1000,
message:'aaVotre message doit faire plus de 20 caractères et moins de 1000.'
},
notEmpty: {
message: 'aaVeuillez indiquer votre message'
}
}
}
}}).on('success.form.bv', function (e) {
e.preventDefault();
$('button[name="submit"]').hide();
var bv = $(this).data('bootstrapValidator');
// Use Ajax to submit form data
$.post($(this).attr('action'), $(this).serialize(), function (result) {
if (result.status == 1) {
$('#error_message').hide();
$('.g-recaptcha').hide();
$('#success_message').slideDown({
opacity: "show"
}, "slow");
$('#contact_form').data('bootstrapValidator').resetForm()
} else {
$('button[name="submit"]').show();
$('#error_message').slideDown({
opacity: "show"
}, "slow")
}
}, 'json');
}
);
});
Submit btn:
<button id="submit-btn" class="btn-upper btn-yellow btn" name="submit" type="submit" disabled><i class="fa fa-paper-plane-o" aria-hidden="true"></i> ENVOYER</button>
Additional script on the contact page:
<script type="text/javascript">
function recaptcha_callback(){
$('#submit-btn').removeAttr('disabled');
}
</script>
my sendmessage.php:
<?php
require 'PHPMailer/PHPMailerAutoload.php';
$mail = new PHPMailer;
$mail->CharSet = 'utf-8';
$email_vars = array(
'message' => str_replace("\r\n", '<br />', $_POST['message']),
'first_name' => $_POST['first_name'],
'last_name' => $_POST['last_name'],
'phone' => $_POST['phone'],
'email' => $_POST['email'],
'organisation' => $_POST['organisation'],
'server' => $_SERVER['HTTP_REFERER'],
'agent' => $_SERVER ['HTTP_USER_AGENT'],
);
// CAPTCHA
function isValid()
{
try {
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = ['secret' => '6LtQ6_y',
'response' => $_POST['g-recaptcha-response'],
'remoteip' => $_SERVER['REMOTE_ADDR']];
$options = [
'http' => [
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
]
];
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
return json_decode($result)->success;
}
catch (Exception $e) {
return null;
}
}
// RE-VALIDATION (first level done via bootsrap validator js)
function died($error) {
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['message'])) {
died('*** Fields not filled-in ***');
}
//Enable SMTP debugging.
$mail->SMTPDebug = false;
//Set PHPMailer to use SMTP.
$mail->isSMTP();
//Set SMTP host name
$mail->Host = "smtp.sendgrid.net";
//Set this to true if SMTP host requires authentication to send email
$mail->SMTPAuth = true;
//Provide username and password
$mail->Username = "fdsfs";
$mail->Password = "#pz7HQ";
//If SMTP requires TLS encryption then set it
$mail->SMTPSecure = "tls";
//Set TCP port to connect to
$mail->Port = 587;
$mail->FromName = $_POST['first_name'] . " " . $_POST['last_name'];
//To be anti-spam compliant
/* $mail->From = $_POST['email']; */
$mail->From = ('ghdsfds#gmail.com');
$mail->addReplyTo($_POST['email']);
$mail->addAddress("ghdsfds#outlook.com");
//CC and BCC
$mail->addCC("");
$mail->addBCC("");
$mail->isHTML(true);
$mail->Subject = "Nouveau message depuis XYZ";
$body = file_get_contents('emailtemplate.phtml');
if(isset($email_vars)){
foreach($email_vars as $k=>$v){
$body = str_replace('{'.strtoupper($k).'}', $v, $body);
}
}
$mail->MsgHTML($body);
$response = array();
if(isValid()) {
// send mail
if(!$mail->send()) {
$response = array('message'=>"Mailer Error: " . $mail->ErrorInfo, 'status'=> 0);
} else {
$response = array('message'=>"Message has been sent successfully", 'status'=> 1);
}
} else {
// handle error
$response = array('message' => 'Captcha was not valid');
}
/* send content type header */
header('Content-Type: application/json');
/* send response as json */
echo json_encode($response);
?>
Actually your code is working as expected and no error in your code. But in bootstrapValidator you need to check the status of every field before success.form.bv event, like describe below.
Please add this event before .success.form.bv event like describe below.
.on('status.field.bv', function(e, data) {
var $this = $(this);
var formIsValid = true;
$('.form-group', $this).each(function() {
formIsValid = formIsValid && $(this).hasClass('has-success');
});
$('#submit-btn', $this).attr('disabled', !formIsValid);
}).on('success.form.bv', function(e, data) {
Let me know if it not works.
Below is a pseudo code, kinda clone of the page that you shared, with the basic validation checks that are triggered on multiple events (keyup, change, keypress, blur).
It checks if all fields are filled or not, if any one is empty, button won't be enabled.
It checks if the input fields have minimum 2 characters.
It checks if the message field has message length between 20 to 1000.
And in the same manner, we can keep adding custom validations to our needs.
required = function(fields) {
console.clear();
var valid = true;
fields.each(function() { // iterate all
var $this = $(this);
if ((($this.is(':text') || $this.is('textarea')) && !$this.val())) {
valid = false;
}
if ($this.is(":text") && $this.val().length < 3) {
console.log('less than 2 characters..');
valid = false;
}
if ($(this).attr('id') == 'your_message' && ($this.val().length < 20 || $this.val().length > 1000)) {
console.log('aaVotre message doit faire plus de 20 caractères et moins de 1000.');
valid = false;
}
});
return valid;
}
validateRealTime = function() {
var fields = $("form :input");
fields.on('keyup change keypress blur', function() {
if (required(fields)) {
{
$("#register").prop('disabled', false);
}
} else {
{
$("#register").prop('disabled', true);
}
}
});
}
validateRealTime();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
First name<br />
<input type="text" id="user_input" name="firstname" /><br /> Name
<br />
<input type="name" id="name_input" name="name" /><br /> Email<br />
<input type="email" id="email_input" name="email" /><br />
<br/> Your Message
<textarea name="your_message" id="your_message"></textarea>
<br>
<input type="submit" id="register" value="Submit" disabled="disabled" />
</form>
Hope this helps you. Happy Coding!
There seems to be a problem with naming the submit button submit http://bootstrapvalidator.votintsev.ru/getting-started/#name-conflict It might have caused the unexpected behavior
Just write a separated validation to your form
$("#contact_form").on('change', function () {
$("form").each(function(){
if ($(this).find(':input').val()== "")
$('#submit-btn').addClass('disabled');
});
})
I'm trying to integrate stripe.js into a web app I'm working on, however I'm being thrown the following error:
Cannot read property 'stripeToken' of undefined
The clientside is setting the hidden input of the token but for some reason, the server can't pull it this:
var stripeToken = request.body.stripeToken;
Any ides as to why this might be?
Client-side JS
jQuery(function($) {
$('#payment-form').submit(function(event) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').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);
// Prevent the form from submitting with the default action
return false;
});
});
function stripeResponseHandler(status, response) {
// Grab the form:
var $form = $('#payment-form');
if (response.error) { // Problem!
// Show the errors on the form:
$form.find('.payment-errors').text(response.error.message);
$form.find('.submit').prop('disabled', false); // Re-enable submission
} else { // Token was created!
// Get the token ID:
var token = response.id;
// Insert the token ID into the form so it gets submitted to the server:
$form.append($('<input type="hidden" name="stripeToken">').val(token));
// Submit the form:
$form.get(0).submit();
}
};
jQuery(function($) {
$('[data-numeric]').payment('restrictNumeric');
$('.cc-number').payment('formatCardNumber');
$('.cc-exp').payment('formatCardExpiry');
$('.cc-cvc').payment('formatCardCVC');
$.fn.toggleInputError = function(erred) {
this.parent('.form-group').toggleClass('has-error', erred);
return this;
};
$('form').submit(function(e) {
e.preventDefault();
var cardType = $.payment.cardType($('.cc-number').val());
$('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
$('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
$('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
$('.cc-brand').text(cardType);
$('.validation').removeClass('text-danger text-success');
$('.validation').addClass($('.has-error').length ? 'text-danger' : 'text-success');
});
});
Server-side JS
app.post('/', function(req, res) {
var stripeToken = request.body.stripeToken;
var charge = stripe.charges.create({
amount: 1000, // amount in cents, again
currency: "usd",
source: stripeToken,
description: "Example charge"
}, function(err, charge) {
if (err && err.type === 'StripeCardError') {
// The card has been declined
}
});
});
Form (jade)
form(novalidate='', autocomplete='on', method='POST' id="payment-form")
.form-group
label.control-label(for='cc-number')
| Card number formatting
small.text-muted
| [
span.cc-brand
| ]
input#cc-number.input-lg.form-control.cc-number(type='tel', autocomplete='cc-number', placeholder='•••• •••• •••• ••••', required='')
.form-group
label.control-label(for='cc-exp') Card expiry formatting
input#cc-exp.input-lg.form-control.cc-exp(type='tel', autocomplete='cc-exp', placeholder='•• / ••', required='')
.form-group
label.control-label(for='cc-cvc') Card CVC formatting
input#cc-cvc.input-lg.form-control.cc-cvc(type='tel', autocomplete='off', placeholder='•••', required='')
button.btn.btn-lg.btn-primary(type='submit' class='submit') Submit
h2.validation
our request is in the variable req not request
this var stripeToken = request.body.stripeToken; should be var stripeToken = req.body.stripeToken;