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 Name	default	required	type
styled	false	no	boolean
checkoutId	nil	If no chargeId, yes	string
chargeId	nil	If no checkoutId, yes	string
onLoad	nil	no	()=>void
onChargeSuccess	nil	no	(MessageData)=>void
onChargeFailure	nil	no	(MessageData)=>void
onPaymentDetected	nil	no	(MessageData)=>void
onModalClosed	nil	no	()=>void
disableCaching	false	no	boolean
customMetadata	nil	no	string

danger

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:

• Adding a Payment Button
• Payment Button Callbacks
• Integrating with Shopify