GuidesAPI Reference
DocumentationLog In

Embedding as React Component

You can embed the payment button as a React component.

Step 1: Whitelist

  1. Whitelist your website.
  2. Create a checkout with the API.
  3. Once your checkout is created, keep track of the ID that was returned.

Step 2: Install

Install the component with yarn or npm:

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

Step 3: Import and Add

Import the component and its corresponding CSS, and 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 ones:

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

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

Message Data

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

See Also: