GuidesAPI Reference
DocumentationLog In

Using React

The embeddable button is also available as a React component.

Usage and Installation

First, whitelist your website and create a checkout with the API.
Once your checkout has been created, keep track of the ID that was returned.

The component can be installed using Yarn or NPM:

npm i -S react-coinbase-commerce
# OR
yarn add react-coinbase-commerce

Next, import the component and its corresponding CSS. Finally, add your checkout ID:

import CoinbaseCommerceButton from 'react-coinbase-commerce';
import 'react-coinbase-commerce/dist/coinbase-commerce-button.css';

const App = () => {
  return (
    <CoinbaseCommerceButton checkoutId={'My checkout ID'}/>
  )
};

Props

The CoinbaseCommerceButton component passes any extra props to its underlying button component, but also accepts a few custom props:

Prop Namedefaultrequiredtype
styledfalsenoboolean
checkoutIdnilIf no chargeId, yesstring
chargeIdnilIf no checkoutId, yesstring
onLoadnilno()=>void
onChargeSuccessnilno(MessageData)=>void
onChargeFailurenilno(MessageData)=>void
onPaymentDetectednilno(MessageData)=>void
onModalClosednilno()=>void
disableCachingfalsenoboolean
customMetadatanilnostring

Warning: If disableCaching is set to true, users that accidentally close their payment windows will be unable to see their transaction's status upon reopening.

Message Data

type MessageData = {
  event: 'charge_confirmed' | 'charge_failed' | 'payment_detected',
  code: <CHARGE_CODE>
}