Callback function with onload in src/url

This may be a really simple question but despite all my fiddling I can't get it to work and I think others might find it helpful in the future.

I'm using the embed payment button here: https://commerce.coinbase.com/docs/#payment-buttons

I have my script:

<div>
    <a class="buy-with-crypto" data-custom="MY_CUSTOM_DATA" 
       href="https://commerce.coinbase.com/checkout/e690ad8a-8bed-4d6e-a8a7- 
       b47c2efc456f">
          Register
    </a>
    <script src="https://commerce.coinbase.com/v1/checkout.js?version=201807">
        BuyWithCrypto.registerCallback("onPaymentDetected", function(e){
             alert("payment detected");
        });
     </script>
 </div>

I've tried putting the function above in separate script tags, tried amending the url with .js?onload=[untold number variables/callbacks] as it details in the docs for initialization but it's still not working.

What I want (and what I believe this is meant to do), is once a payment is detected by the script it activates the function and sends an alert (alert to eventually be replaced by what I actually want but you get the idea).