Hello I am new to AngularJS and working on a project where i am creating a payment form with stripe. I have create the form and create my JS code as described in the stripe's website. I am getting true response for card verification but payment method gives me this error on console "Uncaught TypeError: Cannot read property 'create' of undefined",
Following is my HTML code:
<div class="checkout_popup" id="checkout_popup">
<div class="col-md-12"><h3>Form</h3></div>
<form id="payment-form" method="post">
<div class="col-md-12"><input type="email" id="email" placeholder="Email" /></div>
<div class="col-md-12"><input type="text" id="card-number" data-stripe="number" value="4242424242424242" placeholder="Card Number (16 Digit)"/></div>
<div class="col-md-12"><input type="text" id="card-cvc" placeholder="cvc" data-stripe="cvc" value="123" /></div>
<div class="col-md-12"><input type="text" id="card-expiry-month" data-stripe="exp_month" value="12" placeholder="Month Expire" /></div>
<div class="col-md-12"><input type="text" id="card-expiry-year" data-stripe="exp_year" value="2017" placeholder="Year Expire" /></div>
<div class="col-md-12"><input type="button" id="pay-now" value="Pay Now" ng-click="submitstripe()" /></div>
</form>
</div>
and this the JS code:
.controller('UserAccountController', function($scope, $http, $state, $stateParams, $filter) {
$scope.submitstripe = function(){
console.log('ready stripe');
Stripe.card.createToken({
number: document.getElementById('card-number').value,
cvc: document.getElementById('card-cvc').value,
exp_month: document.getElementById('card-expiry-month').value,
exp_year: document.getElementById('card-expiry-year').value
}, stripeResponseHandler);
return false;
};
})
function stripeResponseHandler(status, response) {
if (response.error) { // Problem!
console.log(response.error.message);
} else { // Token was created!
// Get the token ID:
var token = response.id;
// Insert the token into the form so it gets submitted to the server:
console.log('Credit card verified, your token is : '+token);
var email = document.getElementById('email').value;
var charge = Stripe.charges.create({
amount: 10, // Amount in cents
currency: "usd",
source: token,
description: "test charges"
}, function(err, charge) {
if (err && err.type === 'StripeCardError') {
// The card has been declined
alert('Your card is not valid');
}
document.getElementById('card-number').value = '';
document.getElementById('card-cvc').value = '';
document.getElementById('card-expiry-month').value = '';
document.getElementById('card-expiry-year').value = '';
document.getElementById('checkout_popup').style.display = 'none';
alert('payment successfull');
});
}
}
Hello I am new to AngularJS and working on a project where i am creating a payment form with stripe. I have create the form and create my JS code as described in the stripe's website. I am getting true response for card verification but payment method gives me this error on console "Uncaught TypeError: Cannot read property 'create' of undefined",
Following is my HTML code:
<div class="checkout_popup" id="checkout_popup">
<div class="col-md-12"><h3>Form</h3></div>
<form id="payment-form" method="post">
<div class="col-md-12"><input type="email" id="email" placeholder="Email" /></div>
<div class="col-md-12"><input type="text" id="card-number" data-stripe="number" value="4242424242424242" placeholder="Card Number (16 Digit)"/></div>
<div class="col-md-12"><input type="text" id="card-cvc" placeholder="cvc" data-stripe="cvc" value="123" /></div>
<div class="col-md-12"><input type="text" id="card-expiry-month" data-stripe="exp_month" value="12" placeholder="Month Expire" /></div>
<div class="col-md-12"><input type="text" id="card-expiry-year" data-stripe="exp_year" value="2017" placeholder="Year Expire" /></div>
<div class="col-md-12"><input type="button" id="pay-now" value="Pay Now" ng-click="submitstripe()" /></div>
</form>
</div>
and this the JS code:
.controller('UserAccountController', function($scope, $http, $state, $stateParams, $filter) {
$scope.submitstripe = function(){
console.log('ready stripe');
Stripe.card.createToken({
number: document.getElementById('card-number').value,
cvc: document.getElementById('card-cvc').value,
exp_month: document.getElementById('card-expiry-month').value,
exp_year: document.getElementById('card-expiry-year').value
}, stripeResponseHandler);
return false;
};
})
function stripeResponseHandler(status, response) {
if (response.error) { // Problem!
console.log(response.error.message);
} else { // Token was created!
// Get the token ID:
var token = response.id;
// Insert the token into the form so it gets submitted to the server:
console.log('Credit card verified, your token is : '+token);
var email = document.getElementById('email').value;
var charge = Stripe.charges.create({
amount: 10, // Amount in cents
currency: "usd",
source: token,
description: "test charges"
}, function(err, charge) {
if (err && err.type === 'StripeCardError') {
// The card has been declined
alert('Your card is not valid');
}
document.getElementById('card-number').value = '';
document.getElementById('card-cvc').value = '';
document.getElementById('card-expiry-month').value = '';
document.getElementById('card-expiry-year').value = '';
document.getElementById('checkout_popup').style.display = 'none';
alert('payment successfull');
});
}
}
- You get this error when Stripe or Stripe.charges are undefined. Put a bebugger point and make sure both objects are defined – Ravi Teja Commented Oct 1, 2016 at 5:33
- @RaviTeja but this method is working Stripe.card.createToken({ }), that doesn't mean that stripe is defined already? – Harish Kumar Commented Oct 1, 2016 at 5:38
- Probably, yes. Then make sure strip.charges is also defined. You can console.log(Stripe) and verify whether there is an charges object in Stripe object. – Ravi Teja Commented Oct 1, 2016 at 5:40
- @RaviTeja it prints function a(){} when i console.log(Stripe) – Harish Kumar Commented Oct 1, 2016 at 5:48
-
What? Can you put debugger point on
var charges = Strip.... line and see whether it contains charges object? – Ravi Teja Commented Oct 1, 2016 at 5:52
1 Answer
Reset to default 8Looks like you're trying to process the charge on the client side. But the documentation states:
Use Stripe's API and your server-side code to process charges.
The client side library is different from the NodeJS library. You're trying to call stripe.charges on the client library that doesn't exist. This logic should be created on the Server side.
If you check the source code for the Client side library here you will see that the charges object doesn't exist.
Instead, it's available here in the NodeJS library