I'm interested in integrating PayPal with AngularJS, and I recently found an amazing AngularJS directive for PayPal.
<paypal-button business="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f6e6d5f8f0bbf6faf8">[email protected]</a>" language-code="en_US" currency-code="USD"
item-name="socks" amount="{{dollarValue}}" ng-model="paypalButton"></paypal-button>
The issue I'm facing is that the amount for the button needs to be passed via scope.
For example, if a user wants to purchase 10 socks priced at $5 each, they will enter "10". A backend script then calculates 10 x $5 to return 50 as the amount value that should be placed in the amount="" field.
How can I pass $scope.amount as the submitted amount on the PayPal form?
I attempted to pass the amount to the PayPal directive but encountered difficulties in doing so.
angular.module('WCtrl', [])
.controller('WController',['$scope','$q','$http','$location','$interval','$firebase','$timeout','$stateParams','$routeParams', function($scope,$q,$http,$location,$interval,$firebase,$timeout,$stateParams,$routeParams) {
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
/$scope.calculate = function(){
//console.log("reached")
$scope.calculate = $scope.calc();
$scope.calculate = $scope.calculate.then(function(amount){
$http.post('public/views/calculate.php?a='+amount,$.param($scope.FormData))
.success(function(response){
if(!response.success){
$("#message").attr('class','alert alert-danger text-center')
$scope.message = response.message
}else{
$scope.amount = response.amount
}
})
})
}
}])
.directive('paypalButton',function() {
return {
restrict: 'E',
scope: {
amount:'='
},
link: function(scope, element, attrs){
element.text(scope.amount);
},
compile: function(element, attrs) {
var languageCodes = [
'en_US',
'es_ES',
'fr_FR',
'it_IT',
'de_DE'
];
var currencyCodes = [
'AUD',
'CAD',
'CZK',
'DKK',
'EUR',
'HKD',
'HUF',
'ILS',
'JPY',
'MXN',
'NOK',
'NZD',
'PHP',
'PLN',
'GBP',
'RUB',
'SGD',
'SEK',
'CHF',
'TWD',
'THB',
'USD'
];
var buttonSizes = [
'SM',
'LG'
];
var name = this.name;
function err(reason) {
element.replaceWith('<span style="background-color:red; color:black; padding:.5em;">' + name + ': ' + reason + '</span>');
console.log(element.context);
}
var action = attrs.action || 'https://www.paypal.com/us/cgi-bin/webscr';
var business = attrs.business;
var languageCode = attrs.languageCode || 'en_US';
var currencyCode = attrs.currencyCode || 'USD';
var itemName = attrs.itemName;
var amount = parseFloat(attrs.amount);
var buttonSize = attrs.buttonSize || 'SM';
var imgAlt = attrs.imgAlt || 'Make payments with PayPal - it\'s fast, free and secure!';
if (!business) { return err('business not specified!'); }
if (!itemName) { return err('item name not specified!'); }
if (!amount) { return err('amount not specified!'); }
if (isNaN(amount)) { return err('amount is not a number!'); }
if (languageCodes.indexOf(languageCode) < 0) { return err('unforeseen language code!'); }
if (currencyCodes.indexOf(currencyCode) < 0) { return err('unforeseen currency code!'); }
if (buttonSizes.indexOf(buttonSize) < 0) { return err('unforeseen button size!'); }
var imgSrc = 'http://www.paypalobjects.com/' + languageCode + '/i/btn/btn_buynow_' + buttonSize + '.gif';
var template =
'<form name="_xclick" action="' + action + '" method="post">' +
'<input type="hidden" name="cmd" value="_xclick">' +
'<input type="hidden" name="business" value="' + business + '">' +
'<input type="hidden" name="currency_code" value="' + currencyCode + '">' +
'<input type="hidden" name="item_name" value="' + itemName + '">' +
'<input type="hidden" name="amount" value="' + amount + '">' +
'<input type="image" src="' + imgSrc + '" border="0" name="submit" alt="' + imgAlt + '">' +
'</form>';
//element.replaceWith(template);
element.append(template);
}
};
});