Git Product home page Git Product logo

Comments (8)

bendrucker avatar bendrucker commented on June 8, 2024

No need to use data attributes. For building payment forms, you'll want to pair:

I think this merits a full example application with a mock server. If you post code in the mean time I can help answer specific questions.

from angularjs-stripe.

christopherdro avatar christopherdro commented on June 8, 2024

Hey thanks for the prompt response and leading me in right direction.

A few notes to help anyone else trying to use angular-credit-cards with angular-stripe.

These changes apply if your using the form provided in the example from angular-credit-cards.

  1. Make sure to set attribute 'full-year' to the expiration year field. Stripe requires the year to be passed as 4 digits.
  2. Update the ng-model attributes for all input fields with prefix 'payment.'
  3. Change attributes for expiration to 'payment.card.exp_month' & 'payment.card.exp_month', matching the parameter names required by Stripe.

I haven't incorporated 'angular-form-state' yet, but these were the steps I had to go through in order to create a successful token and make the post request to my server which I will work out.

I'm assuming that using angular-credit-cards, we can avoid doing card validations through Stripe.js Helpers?

Let me know what you think about some of my comments.

Thanks!

from angularjs-stripe.

bendrucker avatar bendrucker commented on June 8, 2024

Stripe requires the year to be passed as 4 digits.

Incorrect according to the docs:

exp_year: two or four digit number representing the card's expiration year

There's also no obligation to use a payment prefix for your models or any prefix at all. You just have to put the attributes on an object in the same format as Stripe expects. Or don't and just collect the right properties in the controller.

And yes, definitely use angular-credit-cards over the Stripe.js helpers. Stripe's just trying to make the new user experience a little easier, but coupling your validation to the tokenization library is code smell. angular-credit-cards delegates to https://github.com.com/bendrucker/creditcards which has better validation and type detection than Stripe's own jQuery.payments that powers Stripe Checkout.

from angularjs-stripe.

christopherdro avatar christopherdro commented on June 8, 2024

Your right I think I had attempted to switch it to four digit before converting to the right parameters.

from angularjs-stripe.

bendrucker avatar bendrucker commented on June 8, 2024

Cool. So I'll put together a full demonstration project that deals with payments and is backed by both a mock implementation for Stripe.js (https://github.com/bendrucker/mockstripe) and a mock server for simulating the server success scenarios. I'm 100% sure it'll be done by May so I can plug it in my ng-vegas talk.

from angularjs-stripe.

jajourda avatar jajourda commented on June 8, 2024

It appears mockstripe never got finished (https://github.com/bendrucker/mockstripe), but I feel the need is still great. The adoption of your (wonderful) work is hindered by IMHO equating the best practice of modularizing working components, with the (confusing) practice of allowing documentation to be modularized. Said another way, modularize and encapsulate to your heart's content, but unify your documentation somehow. without adoption, what's the point in open source?

my use case: i am using meanjs 0.4.0 with a gulp task runner on localhost:3000, and am seeking to define a route within an encapsulated module (with ui-router), called "/charge" that will accomplish what is described here (https://stripe.com/docs/tutorials/charges) on the backend. I keep getting the following error in the console: Stripe.isDoubleLoaded.c.

here is my controller in angular (based on your docs).

var testCard = {
'number': '4242424242424242',
'cvc': '123',
'exp_month': 12,
'exp_year': 2016
};

    $scope.charge = function() {
        console.log('i am scope.charge:');
        console.log('i am scope.payment.card');
        console.log($scope.payment.card);
        return stripe.card.createToken(testCard)
            .then(function(token) {
                console.log('token created for card ending in ', token.card.last4);
                var payment = angular.copy($scope.payment);
                payment.card = void 0;
                payment.token = token.id;
                return $http.post('/charge', payment);
            })
            .then(function(payment) {
                console.log('successfully submitted payment for $', payment.amount);
            })
            .catch(function(err) {
                if (err.type && /^Stripe/.test(err.type)) {
                    console.log('Stripe error: ', err.message);
                } else {
                    console.log('Other error occurred, possibly with your API', err.message);
                }
            });
    };

and here is my (preliminary) code for the backend:
//subPages.server.controller.js
'use strict';
///things get required at top

/functions related to subPages: charge a user for buying a gift card/
exports.charge = function(req,res){

// res
console.log('i am exports.charge!');

// 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
var stripe = require('stripe')('sk_test_7SdP9ZjFu208DhIxMnrpf8qy');

// (Assuming you're using express - expressjs.com)
// Get the credit card details submitted by the form
var stripeToken = req.body.stripeToken;

var charge = stripe.charges.create({
  amount: 1000, // amount in cents, again
  currency: 'usd',
  source: stripeToken,
  description: 'Example charge'
}, function(err, charge) {
     res.sendStatus(200);
  // if (err && err.type === 'StripeCardError') {
  //   // The card has been declined
  // }
});

};

any and ALL help is appreciated.

from angularjs-stripe.

jajourda avatar jajourda commented on June 8, 2024

as an update this reaches the node backend:

 var testCard = {
        'number': '4242424242424242',
        'cvc': '123',
        'exp_month': 12,
        'exp_year': 2016
    };

    $scope.testCharge = function() {
        console.log('i am the beginning of testCharge...')
        $http.post('/charge', testCard).then(function(){
            console.log('i am testCharge http:');
        });
    }

but I can't seem to get the above charge() function based on your angular-stripe example to reach the backend...

from angularjs-stripe.

jajourda avatar jajourda commented on June 8, 2024

sorry for the garbled lines, been busy, but want to contribute/get help from you.
so part of the issue: i was using 1.2 and angular-q-constructor BEFORE i decided to use angular-credit-cards; when i started using angular-credit-cards, i was forced to upgrade to angular 1.3 (with not breaking changes in my app so far). But I never got rid of angular-q-constructor as a dependency.

Separately, i was using my live key from stripe locally; that's a no-go; using BOTH the test publishable and test secret keys got me working.

so now this is working as expected (with little tweaks to the expected returned object after success):

    $scope.charge = function() {
            return stripe.card.createToken($scope.payment.card)
                .then(function(token) {
                    console.log('token created for card ending in ', token.card.last4);
                    console.log('i am token:');
                    console.log(token);
                    var payment = angular.copy($scope.payment);
                    payment.card = void 0;
                    payment.token = token.id;
                    return $http.post('/charge', payment);
                })
                .then(function(payment) {
                    console.log('successfully submitted payment for $', payment.data.amount);
                })
                .catch(function(err) {
                    if (err.type && /^Stripe/.test(err.type)) {
                        console.log('Stripe error: ', err.message);
                    } else {
                        console.log('Other error occurred, possibly with your API', err.message);
                    }
                });
        };

Next I pass the token to my modules server.controller.js file where i define exports.charge:

    //subPages.server.controller.js
        'use strict';
        ///things get required at top

        /*functions related to subPages: charge a user for buying a gift card*/
        exports.charge = function(req, res) {
            console.log('i am exports.charge!');
            // 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
            var stripe = require('stripe')('sk_test_7SdP9ZjFu208DhIxMnrpf8qy');

            // (Assuming you're using express - expressjs.com)
            // Get the credit card details submitted by the form
            console.log('i am req.body');
            console.log(req.body);
            var stripeToken = req.body.token;
            console.log('i am stripeToken:');
            console.log(stripeToken);

            var charge = stripe.charges.create({
                amount: 1000, // amount in cents, again
                currency: 'usd',
                source: stripeToken,
                description: 'Example charge'
            }, function(err, charge) {
                console.log('i am charge:');
                console.log(charge);
                res.status(200).json(charge);
                if (err && err.type === 'StripeCardError') {
                    // The card has been declined
                }
            });

        };

from angularjs-stripe.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.