Sending Currency & Amount Together to HTML Component

Ask the community
,
1

#paypal api #html

Hey guys,

I have an HTML Component on my page which is processing payments with PayPal.

Until now I have been successful in using .postmessage to send the Amount to the HTML component.

Does anyone know how to send the currency too along with the amount ?

HTML Component:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>

<body>
    <div id="paypal-button-container"></div>

    <script type="text/javascript">
    
		let AMOUNT = 0;
		window.onmessage = (event) => {
        	if (event.data > 0) {
			AMOUNT = event.data; //wanna receive currency too
        	}
      	}

        paypal.Button.render({

            env: 'production',
            
style: {
            label: 'checkout',
            size:  'medium', 
            shape: 'rect',   
            color: 'blue',   
            tagline: 'false'
        },

           
            client: {
                production: 'secret_key_here'
            },

             
            commit: true,

             
            payment: function(data, actions) {

                 
                return actions.payment.create({
                    payment: {
                        transactions: [
                            {
 amount: { total: `${AMOUNT}`, currency: 'USD' } // see here, I want to send the currency too
                            }
                        ],
                        
                        redirect_urls: {
          return_url: 'https://www.xxx.com',
          cancel_url: 'https://www.xxx.com/cancel'
        }
                        
                    }
                });
            },

             
            onAuthorize: function(data, actions) {

                 
                return actions.payment.execute().then(function() {
                   actions.redirect();
      }
    );
  },

  onCancel: function(data, actions) {
    actions.redirect();
    }

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

    </script>
</body>

Page:


$w("html1").postmessage($w("#input1#).value);

Is it possible to send AMOUNT & CURRENCY both to the HTML Component ?

2

Hey,
You can send an object to HTML component using the post message.
For example:

let obj = {amount: $w('#input1').value, currency: $w('#input2').value};
$w('#html1').postMessage(obj);

Click here to learn more about Messaging.

Best,
Tal.

3

Thank Tal

Can you tell me how can I retrieve 2 different values from the event inside the HTML

  let AMOUNT = 0;
   	  window.onmessage = (event) => { if (event.data > 0) { 
          AMOUNT = event.data; //wanna receive currency too 
        } 
   }