Currently in the process of integrating Paypal into my Vue project, following the official documentation and copying the necessary code from here. Successfully rendered the Paypal button, completed the transaction, and obtained an orderID. However, encountering an issue when trying to send the orderID to my server due to the error message: 'this.$store is undefined'. Interestingly, I was able to reference this.$store in other components without any trouble. Here is the snippet of my code:
Update: Attempted to console.log(this) within the onApprove method which returned undefined. Could this be the root of the problem?
Update: Changed the OnApprove method and capture() method to arrow functions, resulting in a new error message of 'this.$store.dispatch(...).then(...).err' not being recognized as a function.
Update: Resolved the previous error by switching .err() to .catch().
Update: Encountered another issue where clicking on the Paypal button sometimes causes the external Paypal window to close abruptly. Have to click multiple times to prevent this unexpected behavior. Upon inspecting the console log, came across the error message depicted in the screenshot below.
https://i.sstatic.net/AIBc0.png
<template>
<div>
<div id="paypal-button-container"></div>
</div>
</template>
<script>
import { PRODUCT_PAYPAL } from "@/store/actions/products";
export default {
mounted() {
paypal
.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [
{
amount: {
value: "0.01"
}
}
]
});
},
onApprove: (data, actions) => {
return actions.order.capture().then(details => {
alert("Transaction completed by " + details.payer.name.given_name);
console.log("orderID is ");
console.log(data.orderID);
// Call your server to save the transaction
return this.$store
.dispatch(PRODUCT_PAYPAL, data.orderID)
.then(() => {
alert("success");
})
.catch(() => {
alert("error");
});
});
}
})
.render("#paypal-button-container");
}
};
</script>
<style>
</style>
Successfully received the orderID indicating a successful transaction, but dealing with the undefined this.$store obstacle preventing the order ID from reaching the server.