Sample embed code
When you create a payment iframe, it will give you code like this example.
<iframe id="coinbase_inline_iframe_2b30a03995ec62f15bdc54e8428caa87" src="https://www.coinbase.com/checkouts/2b30a03995ec62f15bdc54e8428caa87/inline" style="width: 460px; height: 350px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.25);" allowtransparency="true" frameborder="0"></iframe>
Any bitcoin sent using the sample iframe will be donated to the Bitcoin Foundation.
The generator is the easiest way to get started:
The only required parameters are name and price. Once a page is generated, you’ll be given a sample link to copy and paste into your website. You are of course welcome to modify the link in any way, such as changing the border color or margins.
Payment iFrames are great for when you want to collect additional information from a user during the checkout process. For example, you might have a form for collecting name and email address information which, once validated, reveals a payment iframe as the next step in the page.
Payment iFrames are very similar to payment buttons and payment pages, are represented in the same way by Coinbase.
This means you can use the checkouts API to also generate payment pages.
Once you get a
code parameter returned from the API, you can use it to construct a payment iFrame with its
src attribute set to
<!-- Replace CODE with the API returned checkout code --> <iframe id="coinbase_inline_iframe_CODE" src="https://www.coinbase.com/checkouts/CODE/inline" style="width: 460px; height: 350px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.25);" allowtransparency="true" frameborder="0" ></iframe>
By default, the inline payment iframe has a slight drop shadow to distinguish it from any surrounding page content. You can remove the drop shadow by removing or overriding the
box-shadow CSS attribute on the frame.
You can then add your own CSS styles like a
border, or simply leave a bleeding edge so that it appears as part of the natural flow of your page.
Style Note: The
height properties of the iframe are useful defaults and can be changed. We recommend a width of 460px and a height of 334px to start. If your products have large descriptions or you are collecting user information before payment, it may help to have a larger size.
postMessage function to communicate the payment to the parent window. You can listen for this message to then take some custom action.
The message data posted to the parent window will look like this:
It consists of two parts:
In the case of a mispayment, the first part will be
coinbase_payment_mispaid instead. If 30 minutes has passed, the order will expire and a
coinbase_payment_expired message will be posted.
Here’s some example code which would go in the parent window. When the payment success message is posted, a simple confirmation box would be displayed:
Please note that listening for this message is optional, and the user will be presented with a success message directly inside the payment iFrame regardless of whether you implement a custom action as a result of listening for the event.