Sample embed code
When you create a payment button, it will give you code like this example.
Any bitcoin sent using the sample button will be donated to Khan Academy.
The button generator is the easiest way to get started:
The only required paramaters are a name and price. The rest can be set when you create the button or later via the
data-* attributes in the embed HTML.
data-* attributes will override any attributes you set in the button generator.
Once a button is generated, you’ll be given a few lines of HTML code to copy and paste into your website. This will add the button to your page.
Buttons can be thought of as disposable (they are just a way to hard code a name and price into a
code attribute) so if you mess up you can always start over with a new button.
Due to current US regulations, we require you to fill out a small amount of required information to create buttons via the web or API.
A separate bitcoin address is generated for each order and user. This ensures order totals don’t build up at a single bitcoin address.
If a user is already signed in to a Coinbase account, they can complete the checkout in two clicks - this is the fastest method of payment. For users without a Coinbase account the default option is to send payment to a bitcoin address. This method supports all bitcoin clients. A QR code with an embedded bitcoin URI is included for mobile wallets. Users who are new to bitcoin can also learn how to purchase their first bitcoins from within the payment widget.
For more advanced integrations, it’s sometimes necessary to create payment buttons for different customers or orders. In these cases you’ll want to use the Checkouts API.
For example, let’s say you wanted to create a “Pay With Bitcoin” button for your e-commerce site. Each order will have a different total so you’ll need to create a new payment button for each order.
In this case you would generate a new button using the following params:
||the order total such as 178.23|
||the order currency such as
||a short description of the order such as Acme Widgets
||the order number you’ll receive in the callback to mark the order as ‘paid’, for example
The checkouts API will return a new checkout object with a
code param which you can use to generate the embed HTML (described below). For further details visit the checkouts API reference page.
The embed html consists of one script tag referencing
https://www.coinbase.com/assets/button.js and an element with class
coinbase-button that includes a
You can have one or more elements with class
coinbase-button on the page (if you’re including multiple buttons), but only one script tag is ever needed.
It’s a good idea to use an
After adding the
coinbase-button class, the only required parameter is
data-code which hard codes the name, price, and description fields (these are set at the time the button is created and cannot be changed later). The other params can be updated after the button is created by setting
data-* attributes on the element. This makes it easy to update fields without having to create a new button.
The div can have the following params:
|data-code||Required unique identifier of the button, this is used to hard code the name, price, and description and is provided for you via the button generator or API.|
|data-button-style||Optional param, one of
|data-button-text||Optional param, allows you to change the button text (only works with button-styles
|data-custom||Optional param, allows you to set any text to link the payment back to your website - usually an order, user, or product ID that you want to mark as “paid” in your database. This parameter gets included in callbacks to your website.|
|data-width||Optional param, can be used to customize the width of the button iframe. The default is 195 pixels.|
|data-height||Optional param, can be used to customize the height of the button iframe. The default is 46 pixels.|
Sample button code utilizing the above customizations:
First, by setting the
data-button-style attribute to none and using an empty div, the default Coinbase button will not be shown on the page.
Next, you’ll want to trigger a custom
Once a payment completes, a
code param referencing the same button/modal. This can be used, for example, to redirect the user to a 'confirmation’ page where you wait for the callback to reach your site.
When the user sends the wrong amount, a
coinbase_payment_mispaid event will be fired instead.
If 30 minutes has passed, the button will expire and a
coinbase_payment_expired event will be fired.
It’s important to note that the
Once you upload a logo, it will replace the default text that is normally shown in the header.