Sample ButtonPay With Bitcoin
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 the Bitcoin Foundation.
- Payment buttons allow you to accept bitcoin on your website.
- Great for personal payments, shopping cart integration, or donations.
- Users never need to leave your site - the payment flow happens in an embedded window.
- Prices can be shown in bitcoin or your local currency.
- Callbacks can be sent to your website when an order completes.
- Bitcoins can be automatically cashed out daily to any bank account.
- Allows first time users to purchase bitcoin if they don't own any.
- Create buttons dynamically via the Coinbase API.
How to Create a Payment Button
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.
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 many buttons with different prices. In these cases you'll want to use the buttons 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
- the order currency such as
- a short description of the order such as
Acme Widgets Order #ABC123
- the order number you'll receive in the callback to mark the order as 'paid', for example
The button API will return a
code param which you can use to generate the embed HTML (described below). For further details visit the button API reference page.
It's worth noting that generating multiple buttons this way is only necessary if you want to set prices dynamically. If you only have a few items with the same price you can generate buttons manually and modify the
data-custom attribute to change which value is returned in the callback.
The embed html consists of one script tag referencing
https://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:
- 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.
- Optional param, one of
none. These different button styles can be previewed in the button generator and the default is
- Optional param, allows you to change the button text (only works with button-styles
- 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.
- Optional param, can be used to customize the width of the button iframe. The default is 195 pixels.
- 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
code string to be passed in to determine which modal to show (you can have multiple buttons/modals on a page).
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.
It's important to note that the
- Payment Pages - Redirect users to a payment page hosted on coinbase.com.