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

Abhijeet Rathore
Mar 4, 2019 · 8 min read
Image for post
Image for post

1. Apple Pay

Image for post
Image for post
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
}
}
Image for post
Image for post

2. Apple Wallet

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
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:

FOUND THIS POST INTERESTING ?

NEED FREE IONIC 4 STARTERS?

References

Enappd

Ionic and React Native Hybrid Mobile App Templates | UI, Backend, Dashboard & PWA

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

Ionic and React Native Hybrid Mobile App Templates | UI, Backend, Dashboard & PWA

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

Ionic and React Native Hybrid Mobile App Templates | UI, Backend, Dashboard & PWA

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store