Skip to main content

Adding a Commerce Payment Button

Adding a payment button on your website is a quick and easy way to start accepting cryptocurrency payments, whether it’s to accept donations for an open source project or to sell tickets to your event.

Whitelist your Website​

Before adding a payment button, you need to whitelist your (https) website.

  1. Go to Settings > Security
  2. Click on Whitelist a domain.
  3. Add your website domain and click Save.
Please enter the domain on which you plan to host a checkout.
info

Currently, we only allow https domains.

Create a Payment Button​

  1. Click on the Accept payments button within the dashboard.
  2. Choose between one of two payment types.
  3. Go through the flow until you reach a hosted page.
  4. Copy the code snippet to embed a payment button on your website.
Expand for images and click to enlarge
Click Accept payments
Click the blue Accept payments button.
Choose payment type
Payment type options are Sell a Product and Accept Donations.
Copy code snippet
Embed this snippet on your website to create a payment button.

Test your Payment Button​

A best practice is to test before deploying. Here’s a quick way to test your payment button before pushing it to the world.

info

This section requires some beginner level programming knowledge.

  1. Whitelist localhost or, if you’re using a service like ngrok, the forwarding URL. For example:

    a. Go to Settings > Security b. Click on Whitelist a domain. c. Add your http://localhost:8000 and click Save.

  2. Create a simple HTML file with the button code embedded so you can serve the file locally. At the command line create an empty folder along with an empty index.html file:

$ mkdir payment-button && cd payment-button && touch index.html
  1. Add the payment button code snippet to your index.html file using your preferred editor. The contents of your file should look something like this:
<div>
  <a
    class="donate-with-crypto"
    href="https://commerce.coinbase.com/checkout/6da189f179bc31"
  >
    <span>Donate with Crypto</span>
  </a>
  <script src="https://commerce.coinbase.com/v1/checkout.js"></script>
</div>
  1. From within the payment-button directory, run python’s SimpleHTTPServer (this assumes you already have python installed):
$ python -m SimpleHTTPServer
Your Donate with Crypto button renders in blue with white text.
  1. Navigate to http://localhost:8000 in your browser. You should see your payment button rendered in the browser.

Congratulations! You can now start accepting cryptocurrency on the web.

See Also:

Was this helpful?