Payment iFrames

Accept bitcoin without a popup or page redirect

Sample iFrame

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.

Features

  • Allow payments from right in your web page, without a popup or redirect.
  • Set custom branding around the payment iframe to fit your site.
  • Prices can be shown in bitcoin or your local currency.
  • Notifications can be sent to your website when an order completes.
  • Bitcoins can be automatically cashed out daily to any bank account.
  • Create iframes dynamically via the Coinbase API.

How to Create a Payment iFrame

Payment iframes can be generated via our iframe generator (shown below) or the button API.

The generator is the easiest way to get started:

Merchant Tools

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.

Advanced Options

Generating Payment iFrames from the API

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>

Styling the 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 width and 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.

Javascript Callback to Parent Window

You may want your application to take additional action once the user’s payment is processed, like display a message or redirect the page. When a user makes a successful payment to you via the payment iframe, we’ll notify your parent window by using JavaScript’s 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:

coinbase_payment_complete|4d4b84bbad4508b64b61d372ea394dad

It consists of two parts:

  • the type of event being posted to the parent window
  • the iFrame code for this type of payment, split by a vertical bar

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:

<script type="text/javascript">
  // Add an event listener for messages posted to this window
  window.addEventListener('message', receiveMessage, false);

  // Define the message handler function
  function receiveMessage(event) {

    // Make sure the message posted to this window is from Coinbase
    if (event.origin == 'https://www.coinbase.com') {
      var event_type = event.data.split('|')[0];     // "coinbase_payment_complete"
      var event_id   = event.data.split('|')[1];     // ID for this payment type

      if (event_type == 'coinbase_payment_complete') {
        alert('Payment completed for iFrame ' + event_id);
      }
      else if (event_type == 'coinbase_payment_mispaid') {
        alert('Payment mispaid for iFrame ' + event_id);
      }
      else if (event_type == 'coinbase_payment_expired') {
        alert('Payment expired for iFrame ' + event_id);
      }
      else {
        // Do something else, or ignore
      }
    }
  }
</script>

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.