title: Access Script Tag Callback from React - AmazonPay
body: <p>I am in the process of integrating AmazonPay into a React SPA. The classic integration relies on script tags and callbacks (<a href="https://pay.amazon.com/us/developer/documentation/lpwa/201952050" rel="nofollow noreferrer">docs</a>). </p>
  
  <p>Here is one example from the button widget:</p>
  
  <pre><code>&lt;head&gt;
    &lt;script type='text/javascript'&gt;
      window.onAmazonLoginReady = function() {
        amazon.Login.setClientId('CLIENT-ID');
      };
      window.onAmazonPaymentsReady = function() {
                  showButton();
      };
    &lt;/script&gt;
      &lt;script async="async" src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'&gt;
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  . . .
   &lt;div id="AmazonPayButton"&gt;
   &lt;/div&gt;
    ...
   &lt;script type="text/javascript"&gt;
      function showButton(){
        var authRequest; 
        OffAmazonPayments.Button("AmazonPayButton", "SELLER-ID", { 
          type:  "TYPE", 
          color: "COLOR", 
          size:  "SIZE", 
  
          authorization: function() { 
          loginOptions = {scope: "SCOPES", 
            popup: "POPUP-PARAMETER"}; 
          authRequest = amazon.Login.authorize (loginOptions, 
            "REDIRECT-URL"); 
          }, 
  
          onError: function(error) { 
            // your error handling code.
            // alert("The following error occurred: " 
            //        + error.getErrorCode() 
            //        + ' - ' + error.getErrorMessage());
          } 
       });
      }; 
     &lt;/script&gt;
     . . .
     &lt;script type="text/javascript"&gt;
       document.getElementById('Logout').onclick = function() {
         amazon.Login.logout();
       };
     &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>When using React, the <code>div</code> with <code>id="AmazonPayButton"</code> isn't on the page until React mounts the <code>div</code>, causing the <code>window.showButton()</code> function to fail.</p>
  
  <p>To circumvent this issue, I've wrapped the <code>function showButton()</code> definition inside <code>window.showButton()</code>:</p>
  
  <pre><code>    window.onAmazonPaymentsReady = function() {
  
          window.showButton = function () {
  
              var authRequest;
  
              // eslint-disable-next-line no-undef
              OffAmazonPayments.Button("AmazonPayButton", "%REACT_APP_AMAZON_SELLER_ID_SANDBOX%", {
                  type: "PwA",
                  color: "Gold",
                  size: "medium",
                  authorization: function () {
                      loginOptions = {
                          scope: "profile postal_code payments:widget payments:shipping_address",
                          popup: true
                      };
                      authRequest = amazon.Login.authorize(loginOptions, "%PUBLIC_URL%/pay-with-amazon");
                  },
                  onError: function (error) {
                      console.log(error.toString())
                  }
              });
          };
      };
  </code></pre>
  
  <p>The component which contains the AmazonPay <code>div</code> can now be called on <code>componentDidMount</code>:</p>
  
  <pre><code>import React, {Component} from 'react'
  
  class AmazonMethod extends Component {
  
      componentDidMount () {
          window.showButton()
      }
  
      render() { return &lt;div id="AmazonPayButton"&gt;&lt;/div&gt;}
  }
  
  export default AmazonMethod
  </code></pre>
  
  <p>I am confused how to access the <code>onError</code> callback from inside my React component. How do I listen for the callback and respond appropriately?</p>
  
  <p>This question applies to AddressWidget and WalletWidget as well; they all rely on script tag callbacks.</p>
  
  <p><strong>Update</strong>:
  I've written a <a href="https://medium.com/@avremelk/amazonpay-react-js-f2c84931f82b" rel="nofollow noreferrer">post</a> which summarizes how to integrate AmazonPay with client side React.</p>