Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laurihy/angular-payments
Module that provides AngularJS-directives for formatting, validating and working with payments
https://github.com/laurihy/angular-payments
Last synced: 27 days ago
JSON representation
Module that provides AngularJS-directives for formatting, validating and working with payments
- Host: GitHub
- URL: https://github.com/laurihy/angular-payments
- Owner: laurihy
- Archived: true
- Created: 2013-08-13T09:08:35.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2020-09-23T18:49:08.000Z (about 4 years ago)
- Last Synced: 2024-11-03T19:04:45.651Z (about 1 month ago)
- Language: HTML
- Size: 80.1 KB
- Stars: 559
- Watchers: 30
- Forks: 269
- Open Issues: 72
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Deprecated, unmaintained
Thank you all for all the contributions and support over the years! It's been evident already for a while, that this repository isn't been actively maintained anymore, and modern and _much_ better alternatives exist. For Angular, [ngx-stripe](https://www.npmjs.com/package/ngx-stripe) is probably a good alternative (no personal experience), or if you just need credit card validation, have a look into e.g. https://formvalidation.io/guide/validators/credit-card
Using _this_ module isn't a good idea.
# Angular Payments
An Angular Module that provides directives for *formatting* and *validating* forms related to payments. Also, it ships with a directive that makes it easy to integrate with Stripe's wonderful stripe.js.
### Credits
This library wasn't just heavily inspired by Stripe's jQuery.payments, but is in fact mostly just a port of it to a more AngularJS-oriented style.
Also, stripeForm is pretty much directly from gtramontina's Stripe Angular: https://github.com/gtramontina/stripe-angular
All I did was port and combine these great libraries. Cheers!
### Stripe Dependency
Angular Payments includes a directive `stripe-form` which depends on the
[stripe library](https://stripe.com/docs/stripe.js).
The stripe library is not necessary to use the other directives.
Be sure to also configure Stripe by setting your publishable key, something like:
```html
Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');
```
## Usage
To use Angular Payments, add angularPayments as a dependency to your AngularJS module or app.
If you are using `stripe-form`, follow the instructions above on including
stripe.
The module ships 3 directives, all of which should be added as attributes to elements.
* paymentsValidate
* paymentsFormat
* stripeFormat
### paymentsValidate
Is used for validating fields on the client side. Usage:
```html
```
For validation to work, element must have an associated ng-model -value.
Possible validation types are:
#### card
```html
```
Card validation also uses an extra attribute "payments-type-model". This attribute defines a model on the scope where the card type will be set as the field recognizes the type from the number.
```html
```
In this case $scope.number will have the card number from the field and $scope.type will have the credit card type.
The card validator will also place a $card object on the on the input control as the card type is recognized. This card object has a number of different fields. It's easiest to get to this object if both the form and the input have a name, in which case you can access the card object at $scope.formName.inputName.$card.
#### expiry
```html
```
Expiry actually matches, that a string with format mm / yy[yy] is a valid and non-expired date. It's pretty cool when combined with matching formatting. Again, ported from jQuery.payments.
#### cvc
```html
```
CVC validation also uses an extra attribute "payments-type-model". This attribute defines a model on the scope where the CVC will load the card type in order to validate CVC rules based on the card. This attribute is meant to be used in conjunction with the same attribute on the card validation.
```html
```
In this case the CVC field will change its validation rules when $scope.type changes. For example, a 'visa' type will require 3 digits, but an 'amex' type will allow 3 or 4.
### paymentsFormat
Is used for formatting fields.
```html
```
For formatting to work, element must have an associated ng-model -value.
Possible formats:
#### card
```html
```
- After every 4th character a space (" ") character is added
- Maximum 16 characters (excluding those spaces)
- Only digits
#### Expiry
```html
```
- Essentially "mm / yyyy"
- After two digits for months, insert slash ("/")
- Accept only digits and at most 6 of them (excluding the slash)
#### cvc
- Limit to 4 digits
- *Could also be used to match with card type, but this is not implemented yet.*
### stripeForm
Intercepts form-submission, obtains stripeToken and then fires a callback. Essentially abstracts away what you would do manually when following instructions at https://stripe.com/docs/stripe.js
...
Instead of sending the form and annotating it with data-stripe -attributes, you should use form's scope, i.e. attach values to form field's using ng-model. Values that are in the scope and that match to values that Stripe accepts, are sent. So if in addition to the formattable and validateable fields you want to send `address_state`, just add `` to your form.
**Important:** expiry makes a small exception. If you haven't explicitly defined `$scope.expMonth` and `$scope.expYear`, we take `$scope.expiry` and parse it into a month and year assuming mm / yy[yy] format that is produced by `payments-format="expiry"`.
When Stripe responds, it passes results to a callback function, which could be:
```javascript
$scope.handleStripe = function(status, response){
if(response.error) {
// there was an error. Fix it.
} else {
// got stripe token, now charge it or smt
token = response.id
}
}
```
And then:
```html
...
```
Basically the directive sends the credit card details directly to stripe, which then returns a token that you can use to charge the card, subscribe a user or to do other things. This ensures that the card details themselves never hit your backend and thus you have to worry a little bit less.
## Example
See example-folder. You can run the example with
grunt connect
then connect to it at http://localhost:8000/example/index.html
## Contributors
Please Edit files in `src/`-folder and before submitting pull request, run grunt to compile and minify files in `lib`-folder.
Despite of slow response times, all patches, bugfixes and features are more and welcome and much appreciated. Thanks to all who have and will contribute! :)
## License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.