Hi eighty3design,
This may be a bit overkill compared to the 4 different buttons/links, and would only work on an HTML/JS website. But I was able to hack up this example pretty quickly.
Example and code here on PLNKR.co:
http://plnkr.co/edit/TLI6vkzGJmYjgBYWm4sX?p=preview
Here's the raw JavaScript:
angular.module('subscribe', []);
angular.module('subscribe')
.controller('subscribeCtrl', function($scope, subscribeService) {
$scope.subscribeService = subscribeService;
$scope.options = [];
$scope.options[0] = { name: "Monthly", amount: 10.00 };
$scope.options[1] = { name: "Quarterly", amount: 30.00 };
$scope.options[2] = { name: "SemiYearly", amount: 60.00 };
$scope.options[3] = { name: "Yearly", amount: 120.00 };
});
angular.module('subscribe')
.service('subscribeService', function() {
function selectPlan(planName) {
subscribe.plan = planName;
if(planName === "Monthly") {
subscribe.a3 = "10.00";
subscribe.p3 = "1";
subscribe.t3 = "M";
subscribe.dropDownLabel = "$10.00 every Month";
} else if(planName === "Quarterly") {
subscribe.a3 = "30.00";
subscribe.p3 = "3";
subscribe.t3 = "M";
subscribe.dropDownLabel = "$30.00 every 3 Months";
} else if(planName === "SemiYearly") {
subscribe.a3 = "60.00";
subscribe.p3 = "6";
subscribe.t3 = "M";
subscribe.dropDownLabel = "$60.00 every 6 Months";
} else if(planName === "Yearly") {
subscribe.a3 = "120.00";
subscribe.p3 = "1";
subscribe.t3 = "Y";
subscribe.dropDownLabel = "$120.00 every Year";
} else {
//defaulting just incase..
subscribe.a3 = "10.00";
subscribe.p3 = "1";
subscribe.t3 = "M";
subscribe.dropDownLabel = "$10.00 every Month";
}
}
var subscribe = {
a3: "10.00",
p3: "1",
t3: "M",
plan: "",
dropDownLabel: "Select an Option",
selectPlan: function(subscribe){ return selectPlan(subscribe); }
};
return subscribe;
});
Here's the raw HTML Button Code:
<body ng-app="subscribe">
<div class="container" ng-controller="subscribeCtrl">
<div class="row">
<div class="col-md-12">
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="n8<AT>x.com">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Recurring Subscription">
<input type="hidden" name="item_number" value="OptionsExample">
<input type="hidden" name="src" value="1">
<input type="hidden" name="currency_code" value="USD">
<div style="margin-top: 10px"></div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="optionsDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<input type="hidden" name="on0" value="Options">{{subscribeService.dropDownLabel}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="optionsDropDown">
<li ng-repeat="sOption in options"><a href="#" ng-click="subscribeService.selectPlan(sOption.name)">{{sOption.name}} {{sOption.amount | currency:"$"}}</a></li>
</ul>
</div>
<div style="margin-top: 10px"></div>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="a3" value="{{subscribeService.a3}}">
<input type="hidden" name="p3" value="{{subscribeService.p3}}">
<input type="hidden" name="t3" value="{{subscribeService.t3}}">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
</form>
</div>
</div>
</div>
</body>
Hope this helps!
- PP_N8
~Disclaimer~ Any code or examples provided are purely examples and not intended for use in a production (live) environment. If you would like to use any examples provided, please ensure you modify the code for your specific usage. The examples are provided As-Is without any warranty of any kind. If the examples don't work, you may message the creator or poster through this forum, however, the responsibility to ensure that the example is secure and it's doing what you want it to do and nothing else, is the responsibility of the person using it.
... View more
