Skip to content

Instantly share code, notes, and snippets.

@haigopi
Last active December 22, 2020 00:22
Show Gist options
  • Save haigopi/5d459b8a298d2b22ce30422c6c0d4b68 to your computer and use it in GitHub Desktop.
Save haigopi/5d459b8a298d2b22ce30422c6c0d4b68 to your computer and use it in GitHub Desktop.
Vue Paypal Example.
<template>
<v-container fluid>
<v-tabs
v-model="tab"
centered
dark
icons-and-text
background-color="orange accent-3"
next-icon="mdi-arrow-right-bold-box-outline"
prev-icon="mdi-arrow-left-bold-box-outline"
show-arrows
>
<v-tabs-slider></v-tabs-slider>
<v-tab href="#paypal_form_vs" @click="loadPaypal">
Paypal
<v-icon>mdi-credit-card-outline</v-icon>
</v-tab>
<v-tab href="#google">
Google
<v-icon>mdi-google</v-icon>
</v-tab>
<v-tab href="#paytm">
PayTM
<v-icon>mdi-credit-card-outline</v-icon>
</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item value="paypal_form_vs">
<v-card>
<v-card-text class="align-center justify-center">
<div no-gutters id="payPalParent">
<div id="payPalButtons">
<div id="paypal-button-container"></div>
</div>
</div>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item value="google">
<v-card flat>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item value="paytm">
<v-card flat>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-container>
</template>
<style lang="scss" scoped>
.customSelect {
min-height: 30px;
max-width: 80px;
}
</style>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import router from '@/router';
import { Action, getModule, Module, Mutation, VuexModule } from 'vuex-module-decorators';
@Component({
components: {},
})
export default class PayPalPaymentGateway extends Vue {
name = 'PayPalPaymentGateway: ';
paypal;
isLoaded = false;
tab = null;
text = 'Lorem ipsum dolor sit ame';
payPalURL = 'https://www.paypal.com/sdk/js?client-id=CLIENT_IDQfBeUPw2qDYKtq_TnVwe85Gx-&currency=USD';
orderID;
// Just for example
orderService: OrderService = OrderService.getInstance();
mounted() {
this.loadPaypal();
}
createOrderForPayment(paymentMethod: string) {
const order = new OrderModel();
const cartItems = getModule(CartStore).cartItems; // Imagine from Store
const clonnedCartItems = new Array<CartItemModel>();
cartItems.forEach((cartItem) => {
const target = new CartItemModel();
const returnedTarget = Object.assign(target, cartItem);
(returnedTarget.item as Item).itemPictures = [];
clonnedCartItems.push(returnedTarget);
});
order.cartItems = clonnedCartItems; // Odd code but wrote for when there are images we don't need to send them to Server
console.log(order);
const details: Promise<OrderModel> = this.orderService.create(order);
return details
.then((res) => {
console.log(res);
window.location.href = String(res);
GlobalSnackBarUtilities.showSuccessMessage('Payment Drafted. Go a head and confirm the order');
})
.catch((err) => {
GlobalSnackBarUtilities.showErrorMessage(err);
});
}
createPayPalButtons() {
console.log('Asking to load the paypal script..');
Vue.prototype
.$loadScript(this.payPalURL, {
'data-sdk-integration-source': 'button-factory',
})
.then(() => {
this.paypal = window['paypal'];
console.debug('**---> Script Loaded: ', this.paypal, this.paypal.Buttons);
this.createPaypalContainerIfNotAvailable();
const btns = this.paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: (data, actions) => {
console.log('....', this.orderService);
return this.createOrderForPayment('PAYPAL');
},
onError: (err) => {
GlobalSnackBarUtilities.showErrorMessage(err);
},
});
setTimeout(function () {
btns.render('#paypal-button-container');
}, 2);
});
console.log('Returnign from Create Buttons');
}
createPaypalContainerIfNotAvailable() {
if (document.getElementById('paypal-button-container')) {
console.log('Container Avaibale');
return;
} else {
const superParent = document.getElementById('payPalParent');
const parent = document.createElement('div');
parent.setAttribute('id', 'payPalButtons');
superParent?.appendChild(parent);
const child = document.createElement('div');
child.setAttribute('id', 'paypal-button-container');
parent?.appendChild(child);
}
}
loadPaypal() {
console.log('-->', this.isLoaded, document.getElementById('paypal-button-container'));
if (!this.isLoaded) {
this.createPayPalButtons();
this.isLoaded = true;
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment