Skip to main content

Commerce Payment Button Callbacks

The embedded payment button exposes the following callback functions:

Initialization​

An onload query parameter specified in the script source is called by the script once it has initialized:

<script src="https://commerce.coinbase.com/v1/checkout.js?onload=SOME_CALLBACK_FUNCTION"/>

Event Callbacks​

Once the BuyWithCrypto class has been instantiated, multiple event callbacks can be registered with it:

BuyWithCrypto.registerCallback('onSuccess', function(e){
    // Charge was successfully completed
});

BuyWithCrypto.registerCallback('onFailure', function(e){
    // Charge failed
});

BuyWithCrypto.registerCallback('onPaymentDetected', function(e){
    // Payment has been detected but not yet confirmed
});

When triggered, the callbacks are called with the following event object:

{
    buttonId: "unique id for this embeddable button",
    code: CHARGE_CODE,
    event: "charge_failed" OR "charge_confirmed" OR "payment_detected"
}

The CHARGE_CODE is the code of the created charge, and can be found here.

Metadata​

Custom metadata can be passed to the associated checkout with a data-custom prop. It can be seen in use here:

<div>
  <a class="buy-with-crypto" data-custom="MY_CUSTOM_DATA" href="https://commerce.coinbase.com/checkout/6da189f179bc31">
    <span>This is a button.</span>
  </a>
  <script src="https://commerce.coinbase.com/v1/checkout.js"></script>
</div>

Caching​

By default, Coinbase Commerce caches the state of transactions in case a user accidentally navigates away from the page in the middle of their payment.

This behaviour can be disabled with a data-cache-disabled prop as seen here:

 <div>
   <a class="buy-with-crypto" data-cache-disabled="true" href="https://commerce.coinbase.com/checkout/6da189f179bc31">
     <span>This is a button.</span>
   </a>
   <script src="https://commerce.coinbase.com/v1/checkout.js"></script>
 </div>

See Also:

Was this helpful?