“Uncaught TypeError: Cannot read property 'create' of undefined” while using stripe payment method Stripe.charges.create({}) in angularJS/NodeJS

Question

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'); 
            });
       }
    }

Answer 1

Looks 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