Embedding as React Component

You can embed the payment button as a React component.

Step 1: Whitelist

Whitelist your website.
Create a checkout with the API.
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`

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