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