I have search the web for this, but I have no luck. Anyone know how to integrate or have some example code for reference? Thanks a lot.
Quickly whipping together some examples here - hopefully does not lead you astray.
In index.html, add:
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
In cart.ts ( or whatever your cart page will be named ):
declare var paypal: any;
@Component({
selector: 'page-cart',
templateUrl: 'cart.html'
})
export class CartPage {
@ViewChild('paypalbuttoncontainer') paypalbuttoncontainer: ElementRef;
paypal_initialized;
cart_id;
items_paypal = []; // I duplicate and finesse the cart items for PayPal submission - but not required
...
}
And call this function when you have your cart items ready and are prepared to reveal the PayPal button:
initPayPal() {
console.log("-------------- initPayPal ------------");
this.paypal_initialized = true;
let paypalbuttoncontainer = this.paypalbuttoncontainer.nativeElement as HTMLDivElement;
let _this = this;
paypal.Button.render({
env: 'sandbox', // sandbox | production
//locale: 'en_US',
//ref: https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/
style: {
size: 'responsive',
color: 'gold',
shape: 'pill',
label: 'checkout', // label: checkout, buynow, credit, pay, paypal
tagline: false
},
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
production: 'YOUR_PRODUCTION_KEY',
sandbox: 'YOUR_SANDBOX_KEY'
},
// Show the buyer a 'Pay Now' button in the checkout flow
commit: true,
// payment() is called when the button is clicked
payment: function (data, actions) {
console.log("PayPal button clicked");
// Make a call to the REST api to create the payment
return actions.payment.create({
//weight_unit: "kgs",
//enableDeliveryAddress: true,
payment: {
transactions: [
{
amount: {
total: _this.total_fixed,
currency: _this.country.currency,
details: {
subtotal: _this.subtotal_fixed,
tax: _this.tax_total_fixed,
//delivery: _this.delivery,
handling_fee: _this.surcharge,
}
},
description: 'DESCRIBE YOUR CART',
custom: 'Hello Shopper',
invoice_number: this.cart_id,
payment_options: {
allowed_payment_method: 'INSTANT_FUNDING_SOURCE'
},
soft_descriptor: 'ECHI5786786',
item_list: {
items: this.items_paypal,
}
}
]
},
experience: {
input_fields: {
//no_delivery: 1
}
}
});
},
onCancel: function (data, actions) {
//return actions.redirect();
},
// onAuthorize() is called when the buyer approves the payment
onAuthorize: function (data, actions, error) {
if (error) {
console.log("---------WE HAVE AN ERROR-------------------")
console.log("ERROR: " + error)
}
if (error === 'INSTRUMENT_DECLINED') {
actions.restart();
}
actions.payment.get().then(function (paymentDetails) {
/* SOME LOGS TO SHOW YOU WHAT YOU WILL BE RECEIVING
console.log("paymentDetails: " + paymentDetails);
for (var xx in paymentDetails) {
console.log(xx + " : " + paymentDetails[xx])
}
for (var xx in paymentDetails.payer) {
console.log("P-: " + xx + " : " + paymentDetails.payer[xx])
}
for (var xx in paymentDetails.transactions) {
console.log("T-: " + xx + " : " + paymentDetails.transactions[xx])
}
*/
_this.paymentDetails = paymentDetails;
});
// Make a call to the REST api to execute the payment
return actions.payment.execute().then(function () {
//window.alert('Payment Complete!');
// NOW MAKE ANY CALLS TO YOUR DB AND SAVE WHAT YOU WANT
let confirm = this.alertCtrl.create({
title: 'Payment Complete!',
message: "Your payment has completed successfully.<br>You will find it in your History.",
buttons: [
{
text: 'OK',
handler: () => {
}
}
]
});
confirm.present();
});
}
}, paypalbuttoncontainer);
}
In your Cart/html:
<div #paypalbuttoncontainer id="paypal-button-container"></div>
And here are some additional references:
https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-the-checkout-flow/#pass-experience-profile-options
https://developer.paypal.com/docs/classic/lifecycle/sb_create-accounts/
1 Like
@shepard Thank you very much for your help! May I ask you it can use in the ionic3 ios/android app? Will it render the paypal page or need to do something? Thanks again.
Not sure. I use it in the browser/PWA. I’d say the odds are good though.
@Nulra,
were you able to use the example of @shepard in Ionic 3 / Android?
I have tried and it works from the browser but in Android all the calls made to the PayPal site return the error “404 not found”
Did it work for you ?
thanks for the solution!!!
Has anyone been able to use this in his Ionic mobile application (iOS or Android, not PWA)?