Vue Paypal Example.

PaymentGateway.vue

<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>