Paypal Integration TypeError: Object(...) is not a function

hi,

i am right into the PayPal payment but i get the following error:

CheckoutPage.html:152 ERROR TypeError: Object(...) is not a function

    at PayPal.init (index.js:10)

    at CheckoutPage.webpackJsonp.352.CheckoutPage.placeOrder (checkout.ts:94)

    at Object.eval [as handleEvent] (CheckoutPage.html:152)

    at handleEvent (core.js:13589)

    at callWithDebugContext (core.js:15098)

    at Object.debugHandleEvent [as handleEvent] (core.js:14685)

    at dispatchEvent (core.js:10004)

    at core.js:10629

    at HTMLButtonElement.<anonymous> (platform-browser.js:2628)

    at t.invokeTask (polyfills.js:3)

    at Object.onInvokeTask (core.js:4751)

    at t.invokeTask (polyfills.js:3)

    at r.runTask (polyfills.js:3)

    at e.invokeTask [as invoke] (polyfills.js:3)

    at p (polyfills.js:2)

    at HTMLButtonElement.v (polyfills.js:2)

My checkout.ts file is:

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import * as WC from 'woocommerce-api';
import { HomePage } from '../home/home';
import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal/ngx';
 
@Component({
  selector: 'page-checkout',
  templateUrl: 'checkout.html',
})
export class CheckoutPage {
 
  WooCommerce: any;
  newOrder: any;
  paymentMethods: any[];
  paymentMethod: any;
  billing_shipping_same: boolean;
  userInfo: any;
 
  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage, public alertCtrl: AlertController, public payPal: PayPal) {
    this.newOrder = {};
    this.newOrder.billing_address = {};
    this.newOrder.shipping_address = {};
    this.billing_shipping_same = false;
 
    this.paymentMethods = [
      { method_id: "bacs", method_title: "Direct Bank Transfer" },
      { method_id: "cheque", method_title: "Cheque Payment" },
      { method_id: "cod", method_title: "Cash on Delivery" },
      { method_id: "paypal", method_title: "PayPal" }];
 
      this.WooCommerce = WC ({
        url:"https://woocommerce-251774-1115146.cloudwaysapps.com",
        consumerKey: "ck_6c9779a96e5377a4b28df5a1aca2e8c6dbbfaae3",
        consumerSecret: "cs_5dc2811ed708448a3dfc889a0921e2e266b25813"
  
    });
 
    this.storage.get("userLoginInfo").then((userLoginInfo) => {
 
      this.userInfo = userLoginInfo.user;
 
      let email = userLoginInfo.user.email;
 
      this.WooCommerce.getAsync("customers/email/" + email).then((data) => {
 
        this.newOrder = JSON.parse(data.body).customer;
 
      })
 
    })
 
  }
 
  setBillingToShipping() {
    this.billing_shipping_same = !this.billing_shipping_same;
 
    if (this.billing_shipping_same) {
      this.newOrder.shipping_address = this.newOrder.billing_address;
    }
 
  }
 
  placeOrder() {
 
    let orderItems: any[] = [];
    let data: any = {};
 
    let paymentData: any = {};
 
    this.paymentMethods.forEach((element, index) => {
      if (element.method_id == this.paymentMethod) {
        paymentData = element;
      }
    });
 
 
    data = {
      payment_details: {
        method_id: paymentData.method_id,
        method_title: paymentData.method_title,
        paid: true
      },
 
      billing_address: this.newOrder.billing_address,
      shipping_address: this.newOrder.shipping_address,
      customer_id: this.userInfo.id || '',
      line_items: orderItems
    };
 
 
    if (paymentData.method_id == "paypal") {
 
      this.payPal.init({
        PayPalEnvironmentProduction: "YOUR_PRODUCTION_CLIENT_ID",
        PayPalEnvironmentSandbox: "ARP4uyVXQzfGXHKK25rrYghpZD7lZ-1jeiOea0K30j_iiG518jZUMfmfBc-x4KI8ZaITX_cUrmDDx056"
      }).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(() => {
 
          this.storage.get("cart").then((cart) => {
 
            let total = 0.00;
            cart.forEach((element, index) => {
              orderItems.push({ product_id: element.product.id, quantity: element.qty });
              total = total + (element.product.price * element.qty);
            });
 
            let payment = new PayPalPayment(total.toString(), 'USD', 'Description', 'sale');
            this.payPal.renderSinglePaymentUI(payment).then((response) => {
              // Successfully paid
 
              alert(JSON.stringify(response));
 
 
              data.line_items = orderItems;
              //console.log(data);
              let orderData: any = {};
 
              orderData.order = data;
 
              this.WooCommerce.postAsync('orders', orderData).then((data) => {
                alert("Order placed successfully!");
 
                let response = (JSON.parse(data.body).order);
 
                this.alertCtrl.create({
                  title: "Order Placed Successfully",
                  message: "Your order has been placed successfully. Your order number is " + response.order_number,
                  buttons: [{
                    text: "OK",
                    handler: () => {
                      this.navCtrl.setRoot(HomePage);
                    }
                  }]
                }).present();
              })
 
            })
 
          }, () => {
            // Error or render dialog closed without being successful
          });
        }, () => {
          // Error in configuration
        });
      }, () => {
        // Error in initialization, maybe PayPal isn't supported or something else
      });
 
 
 
 
 
    } else {
 
      this.storage.get("cart").then((cart) => {
 
        cart.forEach((element, index) => {
          orderItems.push({
            product_id: element.product.id,
            quantity: element.qty
          });
        });
 
        data.line_items = orderItems;
 
        let orderData: any = {};
 
        orderData.order = data;
 
        this.WooCommerce.postAsync("orders", orderData).then((data) => {
 
          let response = (JSON.parse(data.body).order);
 
          this.alertCtrl.create({
            title: "Order Placed Successfully",
            message: "Your order has been placed successfully. Your order number is " + response.order_number,
            buttons: [{
              text: "OK",
              handler: () => {
                this.navCtrl.setRoot(HomePage);
              }
            }]
          }).present();
 
        })
 
      })
 
    }
 
 
  }
 
}

1 post - 1 participant

Read full topic