typescript-react-coinbase-commerce

TypeScript rewrite of react-coinbase-commerce (unmaintained as of writing). This is my first attempt at making a typescript and react component library. As such I am thankful for any contributions to this repository.

Installation

Install the component using your favorite package manager.

pnpm i typescript-react-coinbase-commerce
# OR
yarn add typescript-react-coinbase-commerce
# OR
npm i typescript-react-coinbase-commerce

Usage/Examples

import { CoinbaseCommerceButton } from "typescript-react-coinbase-commerce";

function App() {
  return (
    <CoinbaseCommerceButton
      styled
      checkoutId="checkout-id-from-coinbase-commerce-dashboard"
    />
  );
}

API Reference

CoinbaseCommerceButton

Below are additional types that are added on top of the regular <button> component.

Parameter	Type	Required	Default	Description
checkoutId	string	Yes, if no chargeId	null	Checkout ID from Coinbase Dashboard
chargeId	string	Yes, if no checkoutId	null	Charge ID generated from Coinbase API
buttonRef	React.RefObject	No	null	Ref to the underlying <button> component
frameRef	React.RefObject	No	null	Ref to the underlying <iframe> component
customMetadata	string	No	null	Additional metadata passed to checkout
onChargeSuccess	(MessageData)=>void	No	null	On payment success
onChargeFailure	(MessageData)=>void	No	null	On payment failure
onPaymentDetected	(MessageData)=>void	No	null	On payment detected
onModalClosed	()=>void	No	null	When the checkout popover is closed
disableCaching	boolean	No	false	If cache will be saved when the checkout was clicked off without cancelling

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.

License

Apache-2.0