Skip to content

Instantly share code, notes, and snippets.

@vaibhavgehani
Last active July 14, 2021 12:56
import { defineComponent } from 'vue';
import { IonPage, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonTitle, IonContent, IonGrid, IonRow, IonCol, IonCard, IonImg, IonCardContent, IonButton } from '@ionic/vue';
import Axios from 'axios';
import { alertController } from '@ionic/vue';
declare const braintree: any;
export default defineComponent({
data() {
return {
paymentAmount: '3.33',
currency: 'USD',
currencyIcon: '$'
}
},
name: 'Home',
components: {
IonPage,
IonHeader,
IonToolbar,
IonButtons,
IonMenuButton,
IonTitle,
IonContent,
IonGrid,
IonRow,
IonCol,
IonCard,
IonImg,
IonCardContent,
IonButton
},
mounted() {
this.addScript();
// eslint-disable-next-line @typescript-eslint/no-this-alias
},
methods: {
addScript() {
const script = document.createElement("script");
script.src ="https://js.braintreegateway.com/js/braintree-2.32.1.min.js";
script.addEventListener("load", this.initializeBraintree);
document.body.appendChild(script);
},
handleBraintreePayment(nonce: any) {
this.makePaymentRequest(this.paymentAmount, nonce).then((transaction: any) => {
this.initializeBraintree();
this.showDoneAlert();
})
},
async showDoneAlert() {
const paymentAlert = await alertController.create({
header: 'Successfull Transaction',
subHeader: 'Payment Done by Paypal.',
buttons: [
{
text: 'Ok',
role: 'cancel',
handler: () => {}
}
]
});
paymentAlert.present();
},
makePaymentRequest(amount: any, nonce: any): Promise <any> {
return new Promise((resolve) => {
const paymentDetails = {
paymentAmount: amount,
nonceFromTheClient: nonce
}
Axios.post('https://couponappserver.herokuapp.com/checkoutWithPayment', paymentDetails).then((res) =>{
resolve(res.data);
});
});
},
getClientTokenForPaypal(): Promise <any> {
return new Promise((resolve) => {
Axios.get('https://couponappserver.herokuapp.com/brainTreeClientToken').then((res) =>{
resolve(res.data);
});
})
},
initializeBraintree() {
const that = this;
this.getClientTokenForPaypal().then((res: any) => {
let checkout: any;
braintree.setup(res.clientToken, 'custom', {
paypal: {
container: 'paypal-container',
},
onReady: function (integration: any) {
checkout = integration;
},
onCancelled: () => {
checkout.teardown(() => { checkout = null });
},
onPaymentMethodReceived: (obj: any) => {
checkout.teardown(() => {
checkout = null;
that.handleBraintreePayment(obj.nonce);
});
}
});
});
},
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment