Typescript-react-coinbase-commerce NPM

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.