1

I am working on an integration application where I have a requirement to use VF within LWC and VF will send some data to LWC. I am using window.postMessage to send the Data to LWC but LWC is not receiving anything and no error is being thrown.

here is my VF code. I am using Stripe.js on my VF page.

<script>
    let stripe = Stripe('pk_test_XXXXXXXXXX');
    let elements = stripe.elements();
    
    window.onload = function(){
        let cardElement = elements.create('card');
        
        cardElement.mount('#card-element');

        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            stripe.createToken(cardElement).then(function(result) {
                if (result.error) {
                    
                } else {
                    
                    stripeTokenHandler(result.token);
                }
            });
        });

        function stripeTokenHandler(token) {
            window.confirm(' Sending data to LWC ');
            
            var lexOrigin = '{!lexOrigin}';
            const payload = {
                tokenInfo : token
            }
            window.parent.postMessage( payload, lexOrigin );
            window.console.log(' token ', token );

        }
    }
</script>

This console is printing in my debug log window.console.log(' token ', token );

And here is my LWC code

connectedCallback(){
    window.addEventListener("message", this.handleMessage.bind(this));
}
handleMessage(message){
    window.console.log( JSON.stringify ( message ) );
    if (message.origin === this.vfOrigin.data) {
        this.receivedMessage = message.data;
        window.console.log(' this.receivedMessage ', this.receivedMessage );
    }
}

Please help me with this. Thanks in advance.

2

1 Answer 1

1

Make sure that you are posting the PostMessage to the right domain! I would double-check the domain {!lexOrigin} to make sure it is populating the right domain as the top URL.

The right domain for the LWC from iframe vf would be below the URL obtained via the apex as shown below

public string lexOrigin {get{ return URL.getOrgDomainUrl().toExternalForm().split('\\.')[0] + '.lightning.force.com';} set;}

You can try posting to the * domain and then troubleshoot backward to make sure you have posted message to right domain

Also, one more improvement you can do is not use the bind while listening to the window message. It is an antipattern as documented here.

Change it to the below code,

connectedCallback(){
   window.addEventListener("message", this.handleMessage);
}

handleMessage = (message) => {
   if (message.origin === this.vfOrigin.data) {
      this.receivedMessage = message.data;
      window.console.log(' this.receivedMessage ', this.receivedMessage );
    }
}
3
  • Thank you for the response. I have double-checked the value for the lexOrigin variable and it's the same
    – Amit Singh
    Commented Mar 29, 2021 at 8:46
  • 2
    I was able to make it work after removing window.console.log( JSON.stringify ( message ) ); line from the handleMessage method.
    – Amit Singh
    Commented Mar 29, 2021 at 15:36
  • Why would that cause it to fail? Commented Sep 21, 2022 at 23:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .