Unresponsive HTML Iframe

Hello, I have placed my html to an iframe that references a .js file from a 3rd party. However, when I click the button which should open a lightbox and calls a variable from and sends data to the 3rd party, nothing happens. Is there something im doing wrong? Thanks.

<html>
    <head>
<script src="https://ap-gateway.mastercard.com/checkout/version/57/checkout.js" data-error="errorCallback" data-cancel="cancelCallback"></script>
        <script type="text/javascript">
            function errorCallback(error) {
                  console.log(JSON.stringify(error));
            }
            function cancelCallback() {
                  console.log('Payment cancelled');
            }
            Checkout.configure({
              session: { 
            	id: '12345678'
       			},
              interaction: {
                    merchant: {
                        name: 'Your merchant name',
                        address: {
                            line1: '200 Sample St',
                            line2: '1234 Example Town'            
                        }    
                    }
               }
            });
        </script>
    </head>
    <body>
      <input type="button" value="Pay with Lightbox" onclick="Checkout.showLightbox();" />
    </body>
</html>