Skip to main content

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?