Adding a 'Pay with Crypto' Payment Button

A "Pay with Crypto" payment button on your website lets you easily start accepting cryptocurrency payments.

There are two ways to add a payment button: with a payment link, or programmatically with the API.

Add with Payment Link

Payment link buttons let you accept crypto payments on your website with minimal functionality.

You can create a link for each of your products, and have the button redirect to a static checkout URL for the given product.

info

You cannot change your prices at checkout with payment link buttons. For more flexibility, use the API.

1. Create Payment Link

1. In the merchant portal, navigate to the Checkouts tab.
2. Select Create new checkout.
3. Set a price for your charge.
4. Optionally, select which customer details to ask for.

2. Create Payment Button

1. Copy the checkout link.

2. Paste it into the following code block:

   <a href="https://commerce.coinbase.com/checkout/[fillintheblank]">
     <span>Pay with crypto</span>
   </a>

3. Place the button on your website.

Add Programmatically

To integrate a "Pay with Crypto" button in a JavaScript/React application:

1. Create Charge

Implement the function createCharge to send a POST request to the Coinbase Commerce API.

The request includes fixed pricing details, optional redirect URL, and metadata for the transaction. The response contains a hosted_url, used later for the payment button.

Expand for code sample

//chargeGenerator.js

const url = 'https://api.commerce.coinbase.com/charges';

const requestBody = {
   local_price: {
     amount: '1.50', //price of charge
     currency: 'USD', //currency
  },
  pricing_type: 'fixed_price',
 
 name: 'Name of the charge',
  description: 'Small description',
  redirect_url: 'https:/google.com', //optional redirect URL

   metadata: { //optional charge metadata
     id: 'Customer id,
     email: 'bobby@axecapital.com',
     address: '123 Satoshi Lane',
   },
};

const payload = {
  method: 'POST',
  mode: 'cors',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-CC-Api-Key': process.env.COMMERCE_API_KEY,//API key from Commerce
  },
  body: JSON.stringify(requestBody),
};

async function createCharge() {
  try {
    const response = await fetch(url, payload);
    if (!response.ok) {
      throw new Error(`HTTP error Status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error("Error creating charge:", error);
  }
}

export { createCharge };

2. Generate Payment Button

Use React to create a dynamic button.

The createCharge function is called within a useEffect hook to retrieve the charge data, including the hosted_url. This URL is then used to redirect the user upon button click.

Expand for code sample

ent Button
import React, { useState, useEffect } from "react";
import { Button } from "@nextui-org/react";
import { createCharge } from './chargeGenerator'; 

export default function App() {
  const [hostedUrl, setHostedUrl] = useState('');

  useEffect(() => {
    const fetchChargeData = async () => {
      const chargeData = await createCharge();
      if (chargeData && chargeData.data && chargeData.data.hosted_url) {
        setHostedUrl(chargeData.data.hosted_url);
      }
    };

    fetchChargeData();
  }, []);

  const handleClick = () => {
    if (hostedUrl) {
      window.location.href = hostedUrl;
    }
  };

  return (
    <Button color="primary" onClick={handleClick} disabled={!hostedUrl}>
      Pay with Crypto
    </Button>
  );
}

3. Integrate at Checkout

The payment button should be placed at the final stage of the shopping cart checkout, enabling the user to complete their purchase with crypto.