@incdevco/framework
Version:
node.js lambda framework
345 lines (232 loc) • 14.9 kB
JavaScript
/* global angular Stripe */
angular.module('stripe', [
'ngMessages'
])
.directive('stripeBankAccount', [
'Stripe',
function (Stripe) {
return {
link: function ($scope, $element, $attrs, $controller) {
$scope.bank_account = {
account_holder_name: null,
account_holder_type: null,
account_number: null,
country: 'us',
currency: 'usd',
routing_number: null
};
$scope.change = function () {
Stripe.createBankAccountToken($scope.bank_account)
.then(function (token) {
console.debug('Stripe.createBankAccountToken', token);
$controller.setToken(token);
})
.catch(function (exception) {
console.debug('stripe.createToken', exception);
});
};
},
replace: true,
require: '^stripeToken',
restrict: 'E',
scope: {
form: '=',
token: '='
},
templateUrl: 'stripe/templates/bank-account.html'
};
}
])
.directive('stripeCard', [
'Stripe',
function (Stripe) {
return {
link: function ($scope, $element, $attrs, $controller) {
$scope.card = {
number: null,
cvc: null,
exp_month: null,
exp_year: null,
name: null,
address_line1: null,
address_line2: null,
address_city: null,
address_zip: null,
address_country: 'us'
};
$scope.change = function () {
Stripe.createCardToken($scope.card)
.then(function (token) {
console.log('Stripe.createCardToken', token);
$controller.setToken(token);
})
.catch(function (exception) {
console.log('Stripe.createCardToken', exception);
});
};
},
replace: true,
require: '^stripeToken',
restrict: 'E',
scope: {
form: '=',
token: '='
},
templateUrl: 'stripe/templates/card.html'
};
}
])
.directive('stripeToken', [
'Stripe',
function (Stripe) {
return {
controller: [
'$scope',
function ($scope) {
this.setToken = function (token) {
$scope.$applyAsync(function () {
$scope.token = token;
});
};
}
],
controllerAs: 'crtl',
replace: true,
restrict: 'E',
scope: {
form: '=',
token: '='
},
templateUrl: 'stripe/templates/token.html'
};
}
])
.directive('stripeValidAccountNumber', [
function () {
return {
link: function ($scope, $element, $attrs, $model) {
$model.$parsers.unshift(function (value) {
var valid = false;
if (value) {
valid = Stripe.bankAccount.validateAccountNumber(value, 'US');
$model.$setValidity('accountNumber', valid);
}
return (valid) ? value : undefined;
});
},
require: 'ngModel',
restrict: 'A'
};
}
])
.directive('stripeValidCardNumber', [
function () {
return {
link: function ($scope, $element, $attrs, $model) {
$model.$parsers.unshift(function (value) {
var valid = false;
if (value) {
valid = Stripe.card.validateCardNumber(value);
$model.$setValidity('accountNumber', valid);
}
return (valid) ? value : undefined;
});
},
require: 'ngModel',
restrict: 'A'
};
}
])
.directive('stripeValidCvc', [
function () {
return {
link: function ($scope, $element, $attrs, $model) {
$model.$parsers.unshift(function (value) {
var valid = false;
if (value) {
valid = Stripe.card.validateCVC(value);
$model.$setValidity('cvc', valid);
}
return (valid) ? value : undefined;
});
},
require: 'ngModel',
restrict: 'A'
};
}
])
.directive('stripeValidExpiration', [
function () {
return {
link: function ($scope, $element, $attrs, $model) {
$model.$parsers.unshift(function (value) {
var valid = false;
if (value) {
valid = Stripe.card.validateExpiry(value);
$model.$setValidity('expiration', valid);
}
return (valid) ? value : undefined;
});
},
require: 'ngModel',
restrict: 'A'
};
}
])
.directive('stripeValidRoutingNumber', [
function () {
return {
link: function ($scope, $element, $attrs, $model) {
$model.$parsers.unshift(function (value) {
var valid = false;
if (value) {
valid = Stripe.bankAccount.validateRoutingNumber(value, 'US');
$model.$setValidity('routingNumber', valid);
}
return (valid) ? value : undefined;
});
},
require: 'ngModel',
restrict: 'A'
};
}
])
.factory('Stripe', [
'STRIPE_PUBLIC_KEY',
'$q',
function (key, $q) {
Stripe.setPublishableKey(key);
return {
createBankAccountToken: function (options) {
var deferred = $q.defer();
Stripe.bankAccount.createToken(options, function (status, response) {
if (response.error) {
deferred.reject(response.error);
} else {
deferred.resolve(response);
}
});
return deferred.promise;
},
createCardToken: function (options) {
var deferred = $q.defer();
Stripe.card.createToken(options, function (status, response) {
if (response.error) {
deferred.reject(response.error);
} else {
deferred.resolve(response);
}
});
return deferred.promise;
}
};
}
]);
angular.module('stripe')
.run([
'$templateCache',
function ($templateCache) {
$templateCache.put('stripe/templates/bank-account.html', '<div layout="column"> <div layout="row"> <md-input-container flex> <label for="bank_country">Country</label> <md-select name="bank_country" ng-change="change()" ng-model="bank_account.country" ng-required="!token && true"> <md-option value="us">US</md-option> </md-select> <div ng-messages="form.bank_country.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <md-input-container flex> <label for="bank_routing_number">Routing Number</label> <input type="text" name="bank_routing_number" ng-change="change()" ng-model="bank_account.routing_number" ng-required="!token && true" stripe-bank-account-valid-routing-number /> <div ng-messages="form.bank_routing_number.$error"> <div ng-message="required">Required</div> <div ng-message="routingNumber">Invalid Routing Number</div> </div> </md-input-container> <md-input-container flex> <label for="bank_account_number">Account Number</label> <input type="text" name="bank_account_number" ng-change="change()" ng-model="bank_account.account_number" ng-required="!token && true" stripe-bank-account-valid-account-number /> <div ng-messages="form.bank_account_number.$error"> <div ng-message="required">Required</div> <div ng-message="accountNumber">Invalid Account Number</div> </div> </md-input-container> </div> <div layout="row"> <md-input-container flex> <label for="bank_account_holder_name">Account Holder Name</label> <input type="text" name="bank_account_holder_name" ng-change="change()" ng-model="bank_account.account_holder_name" ng-required="!token && true" stripe-bank-account-valid-account-number /> <div ng-messages="form.bank_account_holder_name.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <md-input-container flex> <label for="bank_account_holder_type">Account Holder Type</label> <md-select name="bank_account_holder_type" ng-change="change()" ng-model="bank_account.account_holder_type" ng-required="!token && true"> <md-option value="company">Company</md-option> <md-option value="individual">Individual</md-option> </md-select> <div ng-messages="form.bank_account_holder_type.$error"> <div ng-message="required">Required</div> </div> </md-input-container> </div></div>');
$templateCache.put('stripe/templates/card.html', '<div layout="column"> <div layout="row"> <md-input-container flex> <label for="card_number">Card Number</label> <input type="text" name="card_number" ng-change="change()" ng-model="card.number" ng-required="!token && true" stripe-card-valid-number /> <div ng-messages="form.card_number.$error"> <div ng-message="required">Required</div> <div ng-message="cardNumber">Invalid Card Number</div> </div> </md-input-container> <md-input-container flex> <label for="card_exp_month">Expiration Month</label> <input type="text" name="card_exp_month" ng-change="change()" ng-model="card.exp_month" ng-required="!token && true" stripe-bank-account-valid-account-number /> <div ng-messages="form.card_exp_month.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <md-input-container flex> <label for="card_exp_year">Expiration Year</label> <input type="text" name="card_exp_year" ng-change="change()" ng-model="card.exp_year" ng-required="!token && true" stripe-card-valid-exp-year /> <div ng-messages="form.card_exp_year.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <md-input-container flex> <label for="card_cvc">Card CVC</label> <input type="text" name="card_cvc" ng-change="change()" ng-model="card.cvc" ng-required="!token && true" stripe-card-valid-cvc /> <div ng-messages="form.card_cvc.$error"> <div ng-message="required">Required</div> <div ng-message="cvc">Invalid CVC</div> </div> </md-input-container> </div> <md-input-container flex> <label for="card_name">Cardholder Name</label> <input type="text" name="card_name" ng-change="change()" ng-model="card.name" ng-required="false" /> <div ng-messages="form.card_name.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <md-input-container flex> <label for="card_address_line1">Billing Address</label> <input type="text" name="card_address_line1" ng-change="change()" ng-model="card.address_line1" ng-required="false" /> <div ng-messages="form.card_address_line1.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <md-input-container flex> <label for="card_address_line2">Billing Unit</label> <input type="text" name="card_address_line2" ng-change="change()" ng-model="card.card_address_line2" ng-required="false" /> <div ng-messages="form.card_address_line2.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <div layout="row"> <md-input-container flex> <label for="card_address_city">Billing City</label> <input type="text" name="card_address_city" ng-change="change()" ng-model="card.address_city" ng-required="false" /> <div ng-messages="form.card_address_city.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <md-input-container flex> <label for="card_address_state">Billing State</label> <input type="text" name="card_address_state" ng-change="change()" ng-model="card.address_state" ng-required="false" /> <div ng-messages="form.card_address_state.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <md-input-container flex> <label for="card_address_zip">Billing Zip</label> <input type="text" name="card_address_zip" ng-change="change()" ng-model="card.address_zip" ng-required="false" /> <div ng-messages="form.card_address_zip.$error"> <div ng-message="required">Required</div> </div> </md-input-container> <md-input-container flex> <label for="address_country">Billing Country</label> <md-select name="address_country" ng-change="change()" ng-model="card.address_country" ng-required="false"> <md-option value="us">us</md-option> </md-select> <div ng-messages="form.address_country.$error"> <div ng-message="required">Required</div> </div> </md-input-container> </div></div>');
$templateCache.put('stripe/templates/token.html', '<div> <md-tabs flex md-dynamic-height md-center-tabs> <md-tab> <md-tab-label> Pay With Bank Account </md-tab-label> <md-tab-body> <stripe-bank-account form="form" token="token"></stripe-bank-account> </md-tab-body> </md-tab> <md-tab> <md-tab-label> Pay With Credit/Debit Card </md-tab-label> <md-tab-body> <stripe-card form="form" token="token"></stripe-card> </md-tab-body> </md-tab> </md-tabs> <input type="hidden" name="stripe_token" ng-model="token" ng-required="true" /> <ng-messages for="form.stripe_token.$error" role="alert"> <ng-message when="required">Payment Token Is Required</ng-message> </ng-messages></div>');}
]);