1.6.0 • Published 3 years ago

react-coinbase-commerce v1.6.0

Weekly downloads
685
License
Apache 2.0
Repository
-
Last release
3 years ago

CircleCI npm version

Coinbase Commerce React Button

Note: This repository is not actively maintained.

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

npm i -S react-coinbase-commerce 

Features

  • Connect your Coinbase Commerce account to easily accept cryptocurrencies from within your application.
  • Support for embedding individual charges or entire checkouts
  • Callback APIs for successful and failed payments.
  • No API key required

Table of Contents

Usage

import CoinbaseCommerceButton from 'react-coinbase-commerce';
import 'react-coinbase-commerce/dist/coinbase-commerce-button.css';

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

Getting Started

  1. To start accepting digital currency payments, first register for a Coinbase Commerce account here.
  2. Whitelist your domain in Settings.
  3. 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.
  4. Pass the ID of the charge or checkout you create to the CoinbaseCommerceButton component
  5. 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 Namedefaultrequiredtype
styledfalsenoboolean
checkoutIdnilIf no chargeId, yesstring
chargeIdnilIf no checkoutId, yesstring
onLoadnilno()=>void
onChargeSuccessnilno(MessageData)=>void
onChargeFailurenilno(MessageData)=>void
onPaymentDetectednilno(MessageData)=>void
onModalClosednilno()=>void
disableCachingfalsenoboolean
customMetadatanilnostring

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.

Data Types

type MessageData = {
  event: 'charge_confirmed' | 'charge_failed' 'payment_detected',
  code: <CHARGE_CODE>
}
1.6.0

3 years ago

1.5.2

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

1.4.4

4 years ago

1.4.3

4 years ago

1.4.2

4 years ago

1.4.1

4 years ago

1.4.0

5 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.2.0

6 years ago

1.1.0

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago