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:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
consumerKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
consumerSecret: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
});
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();
})
})
}
}
}