Recently, I created a component called PaypalButton.vue. I followed the instructions provided here to implement the button: https://developer.paypal.com/docs/checkout/integrate/#
<template>
<div>
<div id="paypal-button-container"></div>
</div>
</template>
<script src="https://www.paypal.com/sdk/js?client-id=AZy2xQtNMcibA3BneS56WHoq1oqLhWdM7nsP3pwS02lr_1TOpC9Lnpp-IGbZQDS8K_xvMH5ssRmNPoDT" >
// Required. Replace SB_CLIENT_ID with your sandbox client ID.
</script>
<script>
import JQuery from 'jquery'
let $ = JQuery
var checkExist = setInterval(function() {
if ($('#paypal-button-container').length) {
console.log("Exists!");
paypal
.Buttons({
createOrder: function(data, actions) {
// This function sets up the details of the transaction, including the amount and line item details.
return actions.order.create({
purchase_units: [
{
amount: {
value: "0.01"
}
}
]
});
},
onApprove: function(data, actions) {
// This function captures the funds from the transaction.
return actions.order.capture().then(function(details) {
// This function shows a transaction success message to your buyer.
alert("Transaction completed by " + details.payer.name.given_name);
});
}
})
.render("#paypal-button-container");
//This function displays Smart Payment Buttons on your web page.
clearInterval(checkExist);
}
}, 100); // check every 100ms
export default {
data: () => ({
//
})
};
</script>
However, I encountered an error. Does anyone have an idea about what could be causing this issue? I even tried importing the Paypal script in index.html but still faced the same problem.