@iofate/react-coinbase-commerce

React Coinbase Commerce

A totally rewritten version of https://github.com/coinbase/react-coinbase-commerce in Typescript maintained by IOfate.

A button to embed a Coinbase Commerce checkout or charge directly into your React application.

npm i -S @iofate/react-coinbase-commerce

Table of Contents

• Usage
• Getting Started
• Docs

Usage

import { CoinbaseCommerceButton } from '@iofate/react-coinbase-commerce';
import '@iofate/react-coinbase-commerce/esm/index.css';

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

Getting Started

• To start accepting digital currency payments, first register for a Coinbase Commerce account here.
• Whitelist your domain in Settings.
• Follow the API Documentation here to create a charge or checkout.
  • Alternatively, create a checkout from the merchant dashboard and copy the ID found in the checkout's details.
• Pass the ID of the charge or checkout you create to the CoinbaseCommerceButton component
• That's it! You're ready to start accepting digital currency payments with Coinbase Commerce

Docs

Props

In addition to the regular button props, this component accepts some custom props:

Prop Name	default	required	type
styled	false	no	boolean
checkoutId	null	If no chargeId, yes	string
chargeId	null	If no checkoutId, yes	string
onLoad	null	no	()=>void
onChargeSuccess	null	no	(MessageData)=>void
onChargeFailure	null	no	(MessageData)=>void
onPaymentDetected	null	no	(MessageData)=>void
onModalClosed	null	no	()=>void
disableCaching	false	no	boolean
customMetadata	null	no	string

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.