I am working with the paypal sdk and I have had several problems, since the paypal smart button works with the light dom and the lwc works with the shadow dom. I think it is not possible to fully implement the button to lwc. The detail now is that in a form I am filling in the necessary fields for the paypal button to work. The problem is that I am working with the "renderedCallback ()" and when I write in my form the button is duplicated depending on how many fields it has or changes it makes. How could I get only the last render?
The code: renderedCallback() {
//codigo nuevo del boton de paypal
const te = this.template.querySelector('.paypalbutton');
te.innerHTML = `
<style>
.paypal-button{
text-align:center !important;
margin-top: -78px !important;
margin-bottom: 20px !important;
}
</style>
<div class="paypal-button" ></div>`;
Promise.all([
loadScript(this, checkout) //checkout means the static resource
])
.then(() => {
this.paypal();
})
.catch(error => {
alert('NO LOAD THE SCRIPT');
alert(error.body.message);
});
}