Payment Gateway Solutions in Ionic 4 — Paypal, Apple Pay, Stripe and others

Abhijeet Rathore
Mar 4 · 8 min read

1. Apple Pay

Apple Pay
ionic cordova plugin add cordova-plugin-applepaynpm install @ionic-native/apple-pay
// import ApplePay in the component
import { ApplePay } from '@ionic-native/apple-pay/ngx';
constructor(private applePay: ApplePay) { }
async applePay() {

try {
const applePayTransaction = await this.applePay.makePaymentRequest({
items,
shippingMethods,
merchantIdentifier,
currencyCode,
countryCode,
billingAddressRequirement: ['name', 'email', 'phone'],
shippingAddressRequirement: 'none',
shippingType: 'shipping'
});
const transactionStatus = await completeTransactionWithMerchant(applePayTransaction);
await this.applePay.completeLastTransaction(transactionStatus);
} catch {
// handle payment request error
}
}

2. Apple Wallet

ionic cordova plugin add cordova-apple-walletnpm install @ionic-native/apple-wallet
import { AppleWallet } from '@ionic-native/apple-wallet/ngx';
this.appleWallet.available()
.then((status) => {
// status is a boolean value, either true or false
console.log("Is Apple Wallet available? ", status);
})
.catch((message) => {
console.error("ERROR >> ", message);
});
let data = {
cardholderName: 'Test User',
primaryAccountNumberSuffix: '1234',
localizedDescription: 'Description of payment card',
paymentNetwork: 'VISA'
}
AppleWallet.startAddPaymentPass(data)
.then((res) => {
/**
* User proceed and successfully asked to add card to his wallet
* Use the callback response JSON payload to complete addition process
* Expect
* res = {
* "certificateSubCA":"Base64 string represents certificateSubCA",
* "certificateLeaf":"Base64 string represents certificateLeaf"
* "nonce":"Base64 string represents nonce",
* "nonceSignature":"Base64 string represents nonceSignature",
* }
*/
})
.catch((err) => {
// Error or user cancelled.
});
let encryptedData = {
activationData: "encoded Base64 activationData ",
encryptedPassData: "encoded Base64 encryptedPassData ",
wrappedKey: "encoded Base64 wrappedKey"
}
AppleWallet.completeAddPaymentPass(encryptedData)
.then((res) => {
// A success callback response means card has been added successfully
})
.catch((err) => {
// Error and can not add the card
});

3. PayPal

ionic cordova plugin add com.paypal.cordova.mobilesdknpm install @ionic-native/paypal
import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal/ngx';
this.payPal.init({
PayPalEnvironmentProduction: 'YOUR_PRODUCTION_CLIENT_ID',
PayPalEnvironmentSandbox: 'YOUR_SANDBOX_CLIENT_ID'
}).then(() => {
// Environments: PayPalEnvironmentNoNetwork, PayPalEnvironmentSandbox, PayPalEnvironmentProduction
this.payPal.prepareToRender('PayPalEnvironmentSandbox', new PayPalConfiguration({
// Only needed if you get an "Internal Service Error" after PayPal login!
//payPalShippingAddressOption: 2 // PayPalShippingAddressOptionPayPal
})).then(() => {
let payment = new PayPalPayment('3.33', 'USD', 'Description', 'sale');
this.payPal.renderSinglePaymentUI(payment).then(() => {
// Successfully paid
}, () => {
// Error or render dialog closed without being successful
});
}, () => {
// Error in configuration
});
}, () => {
// Error in initialization, maybe PayPal isn't supported or something else
});
// Example sandbox response

{
"client": {
"environment": "sandbox",
"product_name": "PayPal iOS SDK",
"paypal_sdk_version": "2.16.0",
"platform": "iOS"
},
"response_type": "payment",
"response": {
"id": "PAY-1AB23456CD789012EF34GHIJ",
"state": "approved",
"create_time": "2016-10-03T13:33:33Z",
"intent": "sale"
}
}

4. Stripe

ionic cordova plugin add cordova-plugin-stripenpm install @ionic-native/stripe
import { Stripe } from '@ionic-native/stripe/ngx';constructor(private stripe: Stripe) { }
this.stripe.setPublishableKey('my_publishable_key');let card = {
number: '4242424242424242',
expMonth: 12,
expYear: 2020,
cvc: '220'
}
this.stripe.createCardToken(card)
.then(token => console.log(token.id))
.catch(error => console.error(error));

5. Braintree

ionic cordova plugin add cordova-plugin-braintreenpm install @ionic-native/braintree
import { Braintree, ApplePayOptions, PaymentUIOptions } from '@ionic-native/braintree/ngx';constructor(private braintree: Braintree) { }
const BRAINTREE_TOKEN = '<YOUR_BRAINTREE_TOKEN>';// NOTE: Do not provide this unless you have configured your Apple Developer account
// as well as your Braintree merchant account, otherwise the Braintree module will fail.
const appleOptions: ApplePayOptions = {
merchantId: '<YOUR MERCHANT ID>',
currency: 'USD',
country: 'US'
}
const paymentOptions: PaymentUIOptions = {
amount: '14.99',
primaryDescription: 'Your product or service (per /item, /month, /week, etc)',
}
this.braintree.initialize(BRAINTREE_TOKEN)
.then(() => this.braintree.setupApplePay(appleOptions))
.then(() => this.braintree.presentDropInPaymentUI(paymentOptions))
.then((result: PaymentUIResult) => {
if (result.userCancelled) {
console.log("User cancelled payment dialog.");
} else {
console.log("User successfully completed payment!");
console.log("Payment Nonce: " + result.nonce);
console.log("Payment Result.", result);
}
})
.catch((error: string) => console.error(error));

6. Alipay

Selfie for payments
ionic cordova plugin add cordova-plugin-gubnoi-alipaynpm install @ionic-native/alipay
import { Alipay } from '@ionic-native/alipay/ngx';constructor(private alipay: Alipay) {//alipayOrder is a string that has been generated and signed by the server side.
this.alipay.pay(alipayOrder)
.then(result => {
console.log(result); // Success
})
.catch(error => {
console.log(error); // Failed
});
}

Conclusion:

We got to know in quick fashion about the top rated payment solutions available in the market. Main code snippets for integration of these plugins are shared right in the blogpost for reference. This will give a boost to your understanding and saves time.

FOUND THIS POST INTERESTING ?

Also check out our other blog posts related to Firebase in Ionic 4, Geolocation in Ionic 4, QR Code and scanners in Ionic 4 and Payment gateways in Ionic 4

NEED FREE IONIC 4 STARTERS?

You can also find free Ionic 4 starters on our website enappd.com

References

Enappd

App starters, Themes, Templates, Complete Web and Mobile Apps Solutions

Abhijeet Rathore

Written by

Rocket scientist turned programmer. Co-founder at Enappd and Youstart Education. Trying to make the world a better place, one solution at a time.

Enappd

Enappd

App starters, Themes, Templates, Complete Web and Mobile Apps Solutions