Integrate PayPal Plugin in PhoneGap ?

As we all know that nowadays increase the use of cross platform development for mobile application.Because its easy to developed in less cost and time.Also in application development we used different payment option.

So in this post i have give the brief description for how to integrate paypal payment plugin with phonegap for android and iPhone.

Android Integration

STEP 1

Download the PayPal SDK.

STEP 2

For CLI installation run below command and your plugin will install automatically.

cordova plugin add https://github.com/paypal/PayPal-Cordova-Plugin

STEP 3

Now copy two js files and add to your index.html like below

<script type="text/javascript" src="paypal-mobile-js-helper.js"></script>
<script type="text/javascript" src="cdv-plugin-paypal-mobile-sdk.js"></script>

STEP 4

Add this two Button in Body Tag

 <button id="buyNowBtn"> Buy Now !</button>
 <button id="buyInFutureBtn"> Pay in Future !</button>

STEP 5

Add this script in Head tag

var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id);

// start to initialize PayPalMobile library
app.initPaymentUI();
},
initPaymentUI : function () {
var clientIDs = {
"PayPalEnvironmentProduction": "YOUR_PRODUCTION_CLIENT_ID",
"PayPalEnvironmentSandbox": "YOUR_SANDBOX_CLIENT_ID"
};
PayPalMobile.init(clientIDs, app.onPayPalMobileInit);

},
onSuccesfulPayment : function(payment) {
console.log("payment success: " + JSON.stringify(payment, null, 4));
},
onFuturePaymentAuthorization : function(authorization) {
console.log("authorization: " + JSON.stringify(authorization, null, 4));
},
createPayment : function () {
// for simplicity use predefined amount
var paymentDetails = new PayPalPaymentDetails("1.50", "0.40", "0.05");
var payment = new PayPalPayment("1.95", "USD", "Awesome Sauce", "Sale", paymentDetails);
return payment;
},
configuration : function () {
// for more options see `paypal-mobile-js-helper.js`
var config = new PayPalConfiguration({merchantName: "My test shop", merchantPrivacyPolicyURL: "https://mytestshop.com/policy", merchantUserAgreementURL: "https://mytestshop.com/agreement"});
return config;
},
onPrepareRender : function() {
var buyNowBtn = document.getElementById("buyNowBtn");
var buyInFutureBtn = document.getElementById("buyInFutureBtn");

buyNowBtn.onclick = function(e) {
// single payment
PayPalMobile.renderSinglePaymentUI(app.createPayment(), app.onSuccesfulPayment, app.onUserCanceled);
};

buyInFutureBtn.onclick = function(e) {
// future payment
PayPalMobile.renderFuturePaymentUI(app.onFuturePaymentAuthorization, app.onUserCanceled);
};
},
onPayPalMobileInit : function() {
// must be called
// use PayPalEnvironmentNoNetwork mode to get look and feel of the flow
PayPalMobile.prepareToRender("PayPalEnvironmentNoNetwork", app.configuration(), app.onPrepareRender);
},
onUserCanceled : function(result) {
console.log(result);
}
};

NOTE: Now replace your credential with YOUR_PRODUCTION_CLIENT_ID” and YOUR_SANDBOX_CLIENT_ID.
If you don’t have production then do nothing simply run code it will work but dont comment or add wrong id.

There are three Environment available. Choices are:

PayPalEnvironmentNoNetwork == For Simple flow no need for anything.
PayPalEnvironmentSandbox ==     For sandbox verification need your sandbox ID
PayPalEnvironmentProduction ==  This is for live integration

Follow same method for iPhone integration.

For More Detail Visit Below Links

https://github.com/mayurloved/Paypal-Phonegap
https://github.com/paypal/PayPal-Cordova-Plugin

The post Integrate PayPal Plugin in PhoneGap ? appeared first on Excellent Web World.