I am trying to implement paypal smartbuttons with laravel 8 and livewire.
Everything works fine in a test page.
On the page with the livewire code, I have input fields with wire:model and a submit button.
If I don’t put in values to the input fields the paypal buttons work fine otherwise I get the folllowing error:
Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in response to a mutation? at removeNode (http://crep.test/vendor/livewire/livewire.js?id=25f025805c3c370f7e87:13:84216) at http://crep.test/vendor/livewire/livewire.js?id=25f025805c3c370f7e87:13:89869 at Component.value (http://crep.test/vendor/livewire/livewire.js?id=25f025805c3c370f7e87:13:117541) at Component.value (http://crep.test/vendor/livewire/livewire.js?id=25f025805c3c370f7e87:13:115510) at Component.value (http://crep.test/vendor/livewire/livewire.js?id=25f025805c3c370f7e87:13:115069) at Connection.value (http://crep.test/vendor/livewire/livewire.js?id=25f025805c3c370f7e87:13:72973) at http://crep.test/vendor/livewire/livewire.js?id=25f025805c3c370f7e87:13:73848
in the header I have:
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=CAD" data-sdk-integration-source="button-factory" data-namespace="paypal_sdk"></script>
this the code for the button container:
<div id="smart-button-container"> <div style="text-align: center;"> <div id="paypal-button-container"></div> </div> </div>
script at the end of the page:
`
$.ajaxSetup({
headers: {
‘X-CSRF-TOKEN’: $(‘meta[name=“csrf-token”]’).attr(‘content’)
}
});
function initPayPalButton() {
paypal_sdk.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"amount":{"currency_code":"CAD","value":55}}]
});
},
onApprove: function(data, actions) {
let result= {};
return actions.order.capture().then(function(details) {
result={
'firstName':details.payer.name.given_name,
'lastName':details.payer.name.surname,
'phone':details.payer.phone.phone_number.national_number,
'email':details.payer.email_address,
'amount':details.purchase_units[0].amount.value,
'status':details.status,
'purchaseDate':details.update_time
}
$.ajax({
type: "get",
url: "/sendPaymmentInfo/fr/",
data: result,
cache: false,
success: function (data) {
console.log('success')
}
})
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>`