laurihy / angular-payments Goto Github PK

It's obvious of course, but it would be helpful to make it explicit in bower.json since bower tooling, like main-bower-files, sort by order of dependency.

I submitted your repo to the bower.io registry. See http://sindresorhus.com/bower-components/#!/search/angular-payments

You might want to officially include a bower.json file in your root directory.

I have just installed this package, everything works except the letters and other characters are still allowed to be typed in, but the docs say they are prevented. Can I get some directions how to fix this? Maybe the issue is that I use angular 1.3 beta?

In the credit card number field, a letter can be added in place of the last digit and/or after.

If you use payments-validate in Firefox, keypresses such as tab, Ctrl+R, backspace, delete, etc. does not register. This makes it very hard to make changes to input. This goes for all validation types.

I am experiencing a problem where the Discover card is not checking the type when using the payment-format attribute.

For example, using payments-validate="card" payments-format="card" and entering 6011 the Discover card is not appearing until you type the next number.

Seems like the card type lookup is being paused because of the added ' ' (space).

I'm using stripeForm which sends the data to stripe and provides the callback. But I would like to save the users last 4 digits of the credit card on my server and also get users email address?. Is there a way I can get the data from the form fields before or after it is sent to stripe?

This is what i'd like to do

          <form stripe-form="handleStripe" name="myForm">
            <div class='form-row'>
              <div class='col-xs-12 form-group required'>
                <label class='control-label'>Email</label>
                <input type="text" class="form-control" name="card_email">
              </div>
            </div>
            <div class='form-row'>
              <div class='col-xs-12 form-group card required'>
                <label class='control-label'>Card Number</label>
                <input type="text" class="form-control" name="card_number" ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.number.$card.type">
              </div>
            </div>
            <div class='form-row'>
              <div class='col-xs-4 form-group cvc required'>
                <label class='control-label'>CVC</label>

                <input type="text" class="form-control" name="card_cvc" ng-model="cvc" payments-validate="cvc" payments-format="cvc" payments-type-model="type">
              </div>
              <div class='col-md-offset-4 col-xs-4 form-group expiration required'>
                <label class='control-label'>Expiration</label>

                <input type="text" class="form-control" nam="card_expiry" ng-model="expiry" payments-validate="expiry" payments-format="expiry">
              </div>
            </div>
            <div class='form-group'>
              <div class='col-md-12 form-group'>
                <button class='form-control  submit-button btn btn-majoo' type='submit'>Pay »</button>
              </div>
            </div>
     </form>

  $scope.handleStripe = function(status, response){
    if(response.error) {
      alert("Error happened")
    } else {
      // got stripe token, now charge it 
      var dataModel = {
        token: response.id
        email: <how do I get access to the email address entered by the user?>
      };

    }
  }

I like the idea of the card icon. IS the intention that the icon appears when enough of the card number has been entered to identify the issuer? I cant get the icon to appear at all. The ng-class stays as myForm.number.$card.type without being dynamically changed to the card type (e.g. mastercard) to take advantage of the CSS styling.

It be because I have carved up your example into its separate components (styling into my .css file, handler into existing controller etc.

Anything obvious Im doing wrong?

Hi there,

I can't seem to get the demo working. I just enter all the information, and the page doesn't do anything. I did get it to highlight the CC field when the input was invalid, but that's it. Upon trying the second time, I got an error in the console:

Is this repository in active development or supported ? because I see commits 1 year old and pull requests haven't been merged.

What the status of the project ?

Is it possible to get access to the calculated card type? I can see that internally, some of the directives use the value, but is there a way of setting a binding on the card input to bind the card type to a model variable, or is there some other way of managing this?

Would be great to hear your ideas - The aim would be to achieve something like this:

https://stripe.com/docs/tutorials/checkout (I'm sure you are familiar with the page but just in case - click the "pay with card" button and start typing a card number to )

I'm admittedly a novice..but I can't seem to get a grasp on accessing field validation.

I'm using the example form, so for example:

<div class="span3">
                <label for="">Card number</label>
                <input type="text"
                       class="input-block-level"
                       ng-model="number"
                       payments-validate="card"
                       payments-format="card"
                       payments-type-model="type"
                       ng-class="formName.number.$card.type"/>

and adding an error

                <div class="error" ng-show="formName.number.$dirty">XXXXXXXXXXXX</div>
            </div>

seems as though I've tried:

number.$dirty
formName.number.$dirty
formName.number.$card.type.number.$dirty
formName.$card.type.$dirty

etc. and so on....I can't seem to trigger ng-show. From a novice js perspective the wording in the readme is opaque, this seems more painful than should be. I'm sure its easier to understand with more experience in js, but right now for me not so much and the example & documentation are not helping and rather than continue to flail around, I thought I would ask, and then I'll send a pull with an updated example because this is like 2/3 of this repo that is diffucult to understand on a drop-in-beginner basis, and would help making your project amenable to more people (I suppose).

tl;dr: Having an example that incorporates usage of 2/3 of the library would be very helpful to people trying to use this library. I'd be willing to push that out if I can figure out whats going on here that I'm having issues with.

answer seems straightforward with naming the field....supposing guessing at other parts will take some time on my effort:

div class="span3">
                <label for="">Card number</label>
                <input type="text"
                       name="cccardnumber"
                       class="input-block-level"
                       ng-model="number"
                       payments-validate="card"
                       payments-format="card"
                       payments-type-model="type"
                       ng-class="formName.number.$card.type"/>

and adding an error

                <div class="error" ng-show="formName.cccardnumber.$dirty && formName.cccardnumber.$invalid">XXXXXXXXXXXX</div>
            </div>

still this is something that would make the example clearer to users

Right now if we use <input type=number>, I got Javascript error because only type=text is supported.

This is important for mobile since we don't want to show a regular keyboard but only numeric keyboard. How to fix this? I may work around and use tel but it's a hack.

How can I fix that issue?

ReferenceError: attributes is not defined
at angular-payments.js:795
at n.a.$get.n.$eval (angular.js:15846)
at n.a.$get.n.$apply (angular.js:15945)
at angular-payments.js:793
at Object.Stripe.token.a.create.c.success ((index):2)
at Object. ((index):3)
at Object.Stripe.a._receiveChannelRelay as onMessage
at Object.Stripe.isDoubleLoaded.H.Socket.t.concat.incoming ((index):2)
at f ((index):2)(anonymous function) @ angular.js:12330b.$get @ angular.js:9109a.$get.n.$apply @ angular.js:15947(anonymous function) @ angular-payments.js:793Stripe.token.a.create.c.success @ (index):2(anonymous function) @ (index):3Stripe.a._receiveChannelRelay @ (index):2Stripe.isDoubleLoaded.H.Socket.t.concat.incoming @ (index):2f @ (index):2

Currently bower pulls in the github repo with the version of *. This is bad, because a bad commit could break everyone who uses ci and they wouldn't know why..

If expiry date is entered incorrectly eg 12/222 and then the user left the expiry field to input other things. When he comes back to fix expiry it still stays the old value for some reason. So I would get an error:
{"error":{"message":"Your card's expiration year is invalid.","type":"card_error","param":"exp_year","code":"invalid_expiry_year"}}

Hi Lauri,

Would it be possible to tag your repository with release numbers in order to use it through the service https://rails-assets.org?

Thanks!

While using the default browser on android, it seems that the formatting doesn't work.

Example: The card formatting does not add spaces on every 4th digit. The expiry formatting does not add a slash.

Using Android v4.4.4, with Internet v2.0.341100600.122953

I've injected angular-payments into my project and set my publishable key via Stripe.setPublishableKey() and am able to successfully create a stripe token.

But there are certain, fairly important methods I am not able to call. I understand that including the Stripe script itself into your index.html attaches a Stripe object to the window, which should presumably allow you to access the Stripe API.

For instance, I can console.log(Stripe.card). But if I do this: console.log(Stripe.charges), the console returns undefined.

Perhaps if I put the full controller here, it might outline some fundamental understanding of my regarding how Stripe and/or angularPayments works.

angular.module('myApp.controllers', ['angularPayments'])
.controller('CheckoutCtrl', ['$scope', '$state', '$stateParams', '$localstorage',
function($scope, $state, $stateParams, $localstorage) {

    $scope.order = $localstorage.getObject('order');
    $scope.handleStripeResponse = function(status, response) {
        if(response.error) {
            console.log(response.error.message)
        }
        else {
            $scope.stripeToken = response.id;
            console.log($scope.stripeToken);
        }
        console.log(Stripe.card);
        if($scope.stripeToken) {
                $scope.charge = stripe.charges.create({
                amount: $scope.order.total,
                currency: "usd",
                card: $scope.stripeToken,
            }, function(err, charge) {
                if (err && err.type == "StripeCardError") {
                    // The card has been declined
                }
            });
        }   
    }
}]);

I'm having trouble calling the stripe-form directive from my controller. The reason I'm doing it like this is that the button I need to use to 'submit' the form is outside of the form element. I've tried a few different things (like calling the stripeForm directive on click of an element, etc.), but it's surprisingly tricky. Any idea how I could implement this?

Wondering what the rationale is for setting button.prop('disabled', true) and then false. Would it not be easier to let the user handle this via ng-disabled? Use case is that I use angular-payments to generate a token and then use stripe.js to create a customer. While waiting for the response on creating the customer the button is enabled but disabled for the initial token request.

found in validate.js

 var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }

i'm just curious. in validate.js many of the names are prefixed with an _ but not in other files.

Throws a lot of errors on IE8 including Error: 'undefined' is null or not an object after each letter you type in the card number field. Would be nice to support it.

Lines 29-33 in form.js should be replaced with:

for(i in possibleKeys){
if(data.hasOwnProperty(possibleKeys[i])){
ret[camelToSnake(possibleKeys[i])] = angular.copy(data[possibleKeys[i]]);
}
}

Noticed an issue in some code I inherited that uses this library. It appears to break the same way in the example..

Seems like it's counting the spaces in the input as digits in the credit card number.. therefore a real 16 digit credit card number is "not valid"..

Is this still being maintained?

but it seems like a total "gotcha" that declaring

stripe-form="functionName"

without the (), is undocumented, I think it would be better if this were explicitly states IMHO.

And thanks for the awesome plugin! Saving me tons of time! I'll definitely contribute if I think I can do something useful!

Since _getDataToSend is defined as an implicit global variable (along with a few other functions), this library will fail to load when run in Javascript strict mode (i.e. "use strict";) with the error: ReferenceError: _getDataToSend is not defined.

I believe that angular-payments should be changed to define those functions as local variables so that it doesn't cause issues in strict mode and leak variables into the global scope. Looking at the functions they don't appear to be meant to be loaded into the global scope.

The demo site is using an older version of the lib.

The input for the card number has name="number", meaning the card number is submitted along with the opaque Stripe token to the non-Stripe server. Fix is to remove this attribute.

Also, the form should really be a post, not a get.

Your bower file has an error. I believe it's line 16. There is an extra comma. It gives an 'unexpected token ]' when trying to install via bower.

I am able to enter 4 digits in CVC field, even though I am using VISA card which allows only 3 digits CVC. Same for the MasterCard.

You are missing a matching tag corresponding to the version you have in your bower.json file. i.e. 0.1.0.
Otherwise this is what happens when trying to install via bower.

+++++ERROR MESSAGE+++++
bower angular-payments#0.1.0 ENORESTARGET No tag found that was able to satisfy 0.1.0
Additional error details:
No versions found in git://github.com/laurihy/angular-payments.git

btw - Thanks for this!

I have developed a one-page angular app and really like your module(s). One question though: As in your example I am loading stripe.js in the head tag on the main index.html page. This page is loaded before all partial views, even those where the stripe call is not required. I'm wondering if there's any EASY way to inject the stripe.js call into the head only when the partial view needs it (ie on credit card pages)? If not it's a bit of overhead I guess I can live with but just wondered.

Hello,
Thanks for such a wonderful credit card validation plugin. Everything works great as expected but there is a little problem.
After entering 4 digits in the CSC field, the backspace no longer functions on Firefox. The problem is not seen in Chrome or Safari.
NB: I am using the latest versions of all the mentioned browsers.

can we just $http?
from what I understand your code that deals with stripe is only making 1 http call. stripe has a documented HTTP API.

would you accept a PR that replaces the $window.Stripe with $http?

i'm interested in this for testing purposes using $httpbackend.

I'm getting this error when I submit the form:

TypeError: Cannot read property 'apply' of undefined

scope[attr.stripeForm].apply(scope, args);

 <form stripe-form="myCtrl.handleStripe" name="myCtrl.myForm">

Hi @laurihy ,

You haven't replied to any of the issues filed in the last months. Do you want to transfer the ownership of this repo to someone who could dedicate enough time to maintain it?

Names such as 'Common' for services are likely to clash with other Angular modules I think. Better to prefix them with something if you can.

When using Firefox, in a credit card number field, backspace erases numbers until it finds a space.

If your you try to erase at a space, it adds a ��character (String.fromCharCode(8), 8 being the keycode of backspace) instead of erasing the next number.

Default error messages for card and cvc are please enter card error and please enter cvc error. Information on how to change this would be great to have on this wiki/project homepage. Plus it would be a good idea if it came out the box with slightly in context error messages e.g. For card error - Please enter a valid card number. For cvc error - Invalid CVC number.

Many of the anonymous functions are missing a var e.g.

var _formatCVC ...

var _restrictExpiry

etc. Errors are thrown until these are added.

Hi guys,

Exist one annoying issue when you have a ajax submit payment method, in the situation you submit a expired card and without refresh the page, you change the expired date to a correct and submit again and the submitted expiry date of month and year it's the same of the last submit expiry date.

I check the code and i find this condition.

PS: this problem exist only in ajax request.

Many Thanks

Unless I'm wrong about this; but I don't think AmEx makes cards with 3 digit CVCs.

payments-validate="expiry"

If the date comes from the model is already expired then it doesn't appear on UI, but if I enter the expired date in the textbox it does show up with the error message(which is fine). When the date from the model is already expired it should show on the UI so that the user knows its an expired date instead of showing the empty textbox field.

Putting 4 characters into the cvc field freezes any editing of the cvc field.

It will read as ng-dirty ng-valid ng-valid-cvc, however it becomes uneditable(Firefox only, not Chromium, untested in other browsers), unable to delete, backspace, or change.

No console output --- no apparent error anywhere.

Can you add addressZip, etc. to the Readme? I found it in the code, but the documentation is hidden really well at the bottom there. Listing all the options would be nice.

Just an FYI I downloaded the source from the example page (https://angularstripe-docoye.backliftapp.com/example/scripts/angular-payments.min.js) and could never get
ccForm.cardNumber.$error.card to ever be a value.

If I download the files myself from the source everything worked.

                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="cardNumber" ng-model="cc.cardNumber" placeholder="card number" payments-validate="card" required>
                        <div data-ng-show="ccForm.cardNumber.$error.required && ccForm.cardNumber.$error.card && ccForm.cardNumber.$dirty">
                            Card Number is Required
                        </div>
                        <pre>{{ccForm.cardNumber.$error.card}}</pre>
                    </div>

It's really basic at the moment, lots of cases are not being handled. Might be worth to port-in a complete jQuery solution instead. I'm working on a business project and took a more complex approach to formatting the card number. What I do is upon any change, I flash the reformatted card number, and then I position the caret back to its expected position. It's a lot of work, but the finished result is much smoother.

You may also want to refrain from using event.preventDefault(), as this stops the scope on the field from $digesting. So if another directive is watching a change to the value, it won't be propagated as expected..

I'm noticing when I first load a form with payments-format="expiry" that I'm getting an "Invalid Date" javascript error. I tracked it down to the function call for _getFormattedExpiry.

var _getFormattedExpiry = function(value) { if(value !== null) { var obj = Common.parseExpiry(value); var expiry = new Date(obj.year, obj.month-1); return $filter('date')(expiry, 'MM / yyyy'); } return null; };

The problem is that value being passed in is undefined, not null. I was able to fix the issue in my code by setting the ng-model value to null once I start the controller, but I wasn't sure if it'd be safer to check if null or undefined?

How do I get these things to check? For some reason they are returning back "unchecked" in my result.card.

I have address_line1 (addressLine1) and address_zip (addressZip) filled in along with other address components.

P.S. I am using the test stripe cards so these things should check.