0

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?

enter image description here enter image description here

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);
        });

      }
  • Please don't post your code as a screenshot. This makes it impossible to copy and may hinder the ability for people to read it. – sfdcfox Jun 21 at 2:18
  • I have already made the modifications – Emmanuel Rivero Jun 21 at 2:38
  • Why do you need to rerender the button? – nchursin Jun 21 at 4:12
0

I briefly looked through the PayPal docs and see no reason why you need to re-render the button every time.

I would suggest using the first render. That is easily achievable by utilizing a boolean variable that indicates if it's the first load.

export default class MyCmp extends LightningComponent {
    isFirstRender = true;

    renderedCallback {
        if (this.isFirstRender) {
            this.isFirstRender = false
            // other logic here
        } 
    }

}

Update:

OK,, my bad, I found the reason why you want to use re-render. Take a look at this question. This looks like something that will solve your problem in combination with a first render technique.

| improve this answer | |
  • Thank you very much, your answer helped me a lot and the one you shared with me was not very clear but I will try to understand it. The idea of re-render is in case the customer changes the amount to pay. – Emmanuel Rivero Jun 21 at 5:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.