PayPal HTML button post callback not working

Ask the community
,
1

Hi,

I implemented a PayPal button using a button in a HTML element.
I am trying to run some code after the payment.

my web page need to get a message from the HTML element (when the payment is complete).
The HTML element does this :

window.parent.postMessage("Payment complete", "*");

and the page has this code to catch that message:

 $w.onReady(function () {
	$w("#htmlPayPal").onMessage( (event) => {
    //TODO: My code
  } );
});

For some reason the PayPal call back functions do not get called at the end of the payment (but the payment does go through in production mode)

Am I using the callback funtions wrong?
How can I get the callback to work?

TIA,

my HTML PayPal code:
(I have approved and Authorized since I tried both but neither work)

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
  <script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>

<body>

<div id="paypal-button-container"></div>
<script>
paypal.Button.render({
  env: 'sandbox', // sandbox | production
  client: {
    sandbox:    '<sandbox client-ID>',
    production: '<production client-ID>'
  },
  commit: true, // Optional: show a 'Pay Now' button in the checkout flow
  payment: function (data, actions) {
    return actions.payment.create({
      payment: {
        transactions: [
          {
            amount: {
              total: '1.00',
              currency: 'USD'
            }
          }
        ]
      }
    });
  },
  onAuthorize: function (data, actions) {
    // Get the payment details
		 return actions.payment.execute()
		  .then(function () {
			// Show a success page to the buyer
				alert('Transaction completed by ' + details.payer.name.given_name);
				window.parent.postMessage("Payment Authorized", "https://wpcjerusalem.wixsite.com/wpcjerusalem/register-for-rental");
      });
  },
  onApprove: function (data, actions) {
    // Get the payment details
		 return actions.order.capture()
		  .then(function (details) {
			// Show a success page to the buyer
				alert('Transaction completed by ' + details.payer.name.given_name);
				window.parent.postMessage("Payment Approved", "https://wpcjerusalem.wixsite.com/wpcjerusalem/register-for-rental");
      });
  },
  onCancel: function(data, actions) {
    // Show a cancel page, or return to cart
   },
   // --------- onError ---
   onError: function(err) {
    // Show an error page
    alert('PayPal: An error has occurred! ');
   }
}, '#paypal-button-container');
</script>
</body>
2

So I got it to work. It turns out I was getting a Javascript error (some helped me see it) on the ‘alert’ function. Removed those lines and all worked great