Why on earth this code works only for numeric values?

Ask the community
,
1

Hey there. I’m trying to parse a string value to a variable, from a page code to an html component. While this works if I use numeric values, as soon as I use a non numeric, it blows apart? It’s driving me nuts, and no combination of var and/or let has made it right.
Is there any out there who can take a look? Thanks in advance.

PAGE CODE that works:
$w.onReady( function () {
// when a message is received from the HTML Component
$w(“#html1”).postMessage(‘0.44’);
PAGE CODE that doesn’t work
$w.onReady( function () {
// when a message is received from the HTML Component
$w(“#html1”).postMessage(‘this should be a string value’);

HTML Component Code:

<script type="text/javascript"> 

AMOUNT = 0; 
window.onmessage = (event) => { 
    	if (event.data > 0) {                 // here I also tried  if (event.data > '')   
	       AMOUNT = 0.2; 
                   CUSTOMVAR = event.data; 
    	} 
  	} 

    paypal.Button.render({ 

        env: 'sandbox', // sandbox | production 

        // PayPal Client IDs - replace with your own 
        // Create a PayPal app: https://developer.paypal.com/developer/applications/create 
        client: { 
            sandbox:    'AVAsdrgkjshrgkjhdfgdgaUY0m9TuJKBB27u1dosborN7A2X5AwLYYl1GhRoUQo2naGFUKRGVM84p23BjMV', 
            production: '<insert production client id>' 
        }, 

        // Show the buyer a 'Pay Now' button in the checkout flow 
        commit: true, 

        // payment() is called when the button is clicked 
        payment: function(data, actions) { 

            // Make a call to the REST api to create the payment 
            return actions.payment.create({ 
                payment: { 
                    transactions: [ 
                        { 
                            amount: { total: `${AMOUNT}`, currency: 'USD' }, 
			                custom: `${CUSTOMVAR}` 
                        } 
                    ] 
                } 
            }); 
        }, 

        // onAuthorize() is called when the buyer approves the payment 
        onAuthorize: function(data, actions) { 

            // Make a call to the REST api to execute the payment 
            return actions.payment.execute().then(function() { 
                window.alert('Payment Complete!'); 
                window.alert(`${CUSTOMVAR}`); 
            }); 
        } 

    }, '#paypal-button-container'); 

</script>
2

Hello Agustin,

Instead of checking to see if event.data > 0, try if event.data.length > 0.

What happens is its comparing a string value to see if it is bigger then 0 which is not logical. If we get the length we can confirm it exists by comparing if it is larger then 0 (somethings there).

Hope this helps,
Majd

3

Hey Majd, thanks for your interest! As per your proposed solution, you may be on to something. It didn’t work BUT I discovered the following:
if I use

if ( event.data > 0) and send $w(" #html1 ").postMessage(‘0.44’); it works like a charm

if I use
if ( event.data > 0) and send $w(" #html1 ").postMessage(‘A STRING HERE’); it doesn’t work anymore . A console.log in the code shows me that the value is indeed ‘A STRING HERE’ previous to the {if …} sentence. (see more below)

if I use
if (event.data > ‘’) and send either ‘0.44’ or ‘A STRING HERE’ it doesn’t work (strange, uh?)

if I use
if (event.data ) and send either ‘0.44’ or ‘A STRING HERE’ it doesn’t work (strange, uh?)

if I use
if (event.data.length > 0) and send either ‘0.44’ or ‘A STRING HERE’ it doesn’t work

IN EVERY CASE THAT IT DOESN’T WORK, event.data is repeatedly loaded (and console.log displayed several times in a row) with something like:

[Log] { (get_draft, line 20)
“postRobot”: {
“type”: “postrobot_message_request”,
“hash”: “postrobot_method_af32a7acc8”,
“name”: “postrobot_method”,
“data”: {
“id”: “6b92213035”,
“name”: “onClick”,
“args”: [
{
“fundingSource”: “paypal”
}
]
},
“domain”: “https://b09d7c14-984b-4930-989e-5be55b91a64c.htmlcomponentservice.com”,
“sourceDomain”: “https://www.sandbox.paypal.com”,
“id”: “4a86851d45”,
“windowType”: “iframe”
}
}

thus generating an error response from paypal, since the length of the string is greater than 256, the maximum allowed for the “custom” variable.

In a few words: the code only will only work if I compare event.data > 0 and send a message with a value that is numeric-like. As soon as I add a character to the message, something blows up.
It looks like that when executing the “if” sentence with other than comparing a numeric-like value with 0, it triggers an error.

And here, I’m lost… It must be something really simple, like a definition in the page code, a variable declaration here or there, something like that.
Any ideas?

4

Before you check to see event.data > 0 try console.log(event) to see what event is, also console.log(typeof event) to see what type of variable is being checked (integer, string). based on this we can find the correct way to evaluate whether event.data is present. If everything turns out fine then it leads me to assume the problem is not in that part of the code but in another section.

I would recommend console.logging the appropriate variables and data to see what is going on in each line of code until you find where the problem lies. syntax wise everything looks good.

Let me know if you find anything!

Majd

5

Majd, I did a few tests as you suggested. I was trying to implement some kind of handshake for the page code and the html but couldn’t make it work yet. I’ll face one problem at a time.

So, with the code used below, I get the following console messages:

>initial message for the console
>string
>4
>0.61

page code using a “numeric value”

$w.onReady( function () {
console.log(‘initial message for the console’);
// when a message is received from the HTML Component
$w(“#html1”).postMessage(‘0.61’);
});

but if I use a “string value” like
$w.onReady( function () {
console.log(‘initial message for the console’);
// when a message is received from the HTML Component
$w(“#html1”).postMessage(‘zero sixty two 0.62’);
});

CHECK THIS: the process will run (it wasn’t) but:
it’ll display ONLY THIS TWO console messages:
>initial message for the console
>string

and the final value of custom (displayed on screen at the end of the cycle) will be “0.61”
see? it ignores the new string value of “zero sixty two 0.62” and still use the value “0.61” of the previous run! what???

the html element code is:

<script type="text/javascript"> 
    AMOUNT = 0;  
    window.onmessage = (event) => { 
        console.log(typeof(event.data)); 
        if (event.data > 0) { 
        console.log(`${event.data.length}`); 
        AMOUNT = 0.2; 
        CUSTOMVAR = 'flixerterumipshhh'; 
        CUSTOMVAR = event.data; 
        console.log(`${CUSTOMVAR}`); 
    	} 
  	} 

    paypal.Button.render({ 

        env: 'sandbox', // sandbox | production 

        // PayPal Client IDs - replace with your own 
        // Create a PayPal app: https://developer.paypal.com/developer/applications/create 
        client: { 
            sandbox:    'AVAoj3Of9svY0m9TuJKBB27u1dosborN7A2X5AwLYYl1GhRoUQo2naGFUKRGVM84p23BjMV', 
            production: '<insert production client id>' 
        }, 

        // Show the buyer a 'Pay Now' button in the checkout flow 
        commit: true, 

        // payment() is called when the button is clicked 
        payment: function(data, actions) { 

            // Make a call to the REST api to create the payment 
            return actions.payment.create({ 
                payment: { 
                    transactions: [ 
                        { 
                            amount: { total: `${AMOUNT}`, currency: 'USD' }, 
			                custom: `${CUSTOMVAR}` 
                        } 
                    ] 
                } 
            }); 
        }, 

        // onAuthorize() is called when the buyer approves the payment 
        onAuthorize: function(data, actions) { 

            // Make a call to the REST api to execute the payment 
            return actions.payment.execute().then(function() { 
                window.alert('Payment Complete!'); 
                window.alert(`${CUSTOMVAR}`); 
            }); 
        } 

    }, '#paypal-button-container'); 

</script>

Thanks for your help Majd. I’ve been dealing with this for days and now I’m kind of frustrated.

6

Majd, another interesting thing: if I use
" if (event.data) {… "
and
$w(“#html1”).postMessage(’ zero sixty two 0.62 ');
console output will be:
>initial message for the console
>string
>4
>zero sixty two 0.62

and when I click on the pay pal button,

string
// and a series of messages like:
488 // (it will change)
{ (get_draft, line 21)
“postRobot”: {
“type”: “postrobot_message_request”,
“hash”: “postrobot_method_754f3d0145”,
“name”: “postrobot_method”,
“data”: {
“id”: “c8f4e6b1aa”,
“name”: “onClick”,
“args”: [
{
“fundingSource”: “paypal”
}
]
},
“domain”: “https://b09d7c14-984b-4930-989e-fbe55b91a64c.htmlcomponentservice.com”,
“sourceDomain”: “https://www.sandbox.paypal.com”,
“id”: “47077bba86”,
“windowType”: “iframe”
}
}

which I believe to be that “event” is now loaded with the returning error from Paypal while trying to assign a value whose length is greater than 256