GuidesAPI Reference
DocumentationLog In

Adding a 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.Please enter the domain on which you plan to host a checkout.

📘

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.Click the blue Accept payments button.
Choose payment type
Payment type options are Sell a Product and Accept Donations.Payment type options are Sell a Product and Accept Donations.
Copy code snippet
Embed this snippet on your website to create a payment button.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.

📘

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.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: