Angular Paypal Checkout Button
This directive implements the paypal checkout button in AngularJs 1.x
.
Installation
Bower:
bower install angular-paypal-checkout --save
Get Started
Add the jmp.paypalCheckout
to your Angular module as dependency.
angular.module('app', ['jmp.paypalCheckout']);
There is no need to install other dependencies for this to work.
In your controller, create the configuration variables. You can use the options provided in the paypal api as well.
angular
.module('app')
.contoller('yourController', function ($scope) {
/**
* Complete configuration
*
* */
$scope.config = {
/**
* This is a boolean type variable. If this variable is missing
* in the configuration, it will assume that you are in production mode
* */
sandbox: true,
sandboxClientID: '',
productionClientID: '',
checkoutFlow: true, // Optional. Enable Pay Now Checkout Flow
useConfirmation: false, // Not yet implemented
locale: 'en_GB', // Optional
style: {
size: 'medium', // small | medium | large | responsive
shape: 'pill', // pill | rect
color: 'gold' // gold | blue | silver | black
tagline: 'false'
},
payments: {
currency: 'USD',
shippingFee: 0, // Optional
tax: 0, // Optional
referenceID: 'REF001-TEST', // Optional
totalAmount: 100, // total amount to be paid
/**
* Optional. If ever you want to fill this in,
* make sure that the sub total amount
* should match in the total amount
* */
items: [
{
name: 'Product Name',
description: 'Product description',
quantity: 1,
price: 100,
tax: 0,
sku: 'SKU-TEST',
currency: 'USD'
}
]
}
};
$scope.onEnter = function (config) {
// After paypal is initialized
};
$scope.onComplete = function (data, actions, config) {
// After completing the payment, this will execute
};
});
Then use the directive:
<paypal-checkout
config="config"
on-enter="onEnter"
on-complete="onComplete">
</paypal-checkout>
Demo
Navigate to example folder.
npm install live-server -g # Save globally
bower install # install bower dependencies
live-server # serve the app