Order of asynchronous Widgetss.js loading

gistfile1.txt

<style type="text/css">
			
			#addressBookWidgetDiv{
				width: 400px; 
				height: 228px;
			}
	
</style>

<!-- first place the diff wherever the widget should appear -->
<div id="addressBookWidgetDiv"></div>

<script type='text/javascript'>
   // this callback is essential and needs to be in place beofre the Widgets.js file gets loaded
   // it is called as soon as the login SDK is fully loaded
		  window.onAmazonLoginReady = function(){
			  amazon.Login.setClientId('<?php echo $clientId; ?>');
		  };
		  
		  // this callback is called once the paymeent part is completely loaded
		  // you can use it to e.g. create the widgets
		  window.onAmazonPaymentsReady = function(){
		  
		  var oro = '';
  		new OffAmazonPayments.Widgets.AddressBook({
  		  sellerId: '<?php echo $sellerId; ?>',
  		  onOrderReferenceCreate: function(orderReference) {
  				   oro = orderReference.getAmazonOrderReferenceId();
  		  },
  		  onAddressSelect: function(orderReference) {
  			console.log("onAddressSelected");
  		  },
  		  design: {
  			 designMode: 'responsive'
  		  },
  		  onError: function(error) {
  		   // your error handling code
  		  }
  		}).bind("addressBookWidgetDiv");
			
		  }
		  
		</script>
		
		<!--load the Widgets.js after the callbacks are defined (aasync)  -->
		<script async="async" src='https://static-eu.payments-amazon.com/OffAmazonPayments/uk/sandbox/lpa/js/Widgets.js'></script>