# react-coinbase-commerce-modal

> A react component to easily embed a Coinbase Commerce Checkout within your application... but just the modal

Latest version **1.3.2** (published 2019-01-22) · Apache 2.0 license · 0 weekly downloads

## Install

```sh
npm install react-coinbase-commerce-modal
pnpm add react-coinbase-commerce-modal
yarn add react-coinbase-commerce-modal
bun add react-coinbase-commerce-modal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2019-01-22 |
| First published | 2019-01-22 |
| Weekly downloads | 0 |
| License | Apache 2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tyson Battistella. Will Dembinski, forked it. Made the 'modal only' thing. |
| Maintainers | wiski |
| Keywords | react, cryptocurrency, coinbase, commerce, bitcoin, litecoin, ethereum |

## Links

- npm: https://www.npmjs.com/package/react-coinbase-commerce-modal
- Homepage: https://github.com/wi-ski/react-coinbase-commerce-modal
- npm.io page: https://npm.io/package/react-coinbase-commerce-modal

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.2 (latest) — 2019-01-22
- 1.3.1 — 2019-01-22

## README

[![CircleCI](https://circleci.com/gh/coinbase/react-coinbase-commerce/tree/master.svg?style=svg)](https://circleci.com/gh/coinbase/react-coinbase-commerce/tree/master)
[![npm version](https://badge.fury.io/js/react-coinbase-commerce.svg)](https://badge.fury.io/js/react-coinbase-commerce)


# Coinbase Commerce React Modal 
A modal to embed a Coinbase Commerce checkout or charge directly into your React application.

```
npm i -S react-coinbase-commerce-modal
```

## 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](#usage)
- [Getting Started](#getting-started)
- [Docs](#docs)

## Usage
```ecmascript 6
import CoinbaseCommerceModal from 'react-coinbase-commerce-modal';

const App = () => {
  return (
    <CoinbaseCommerceModal checkoutId={'My checkout ID'} showModal={!!showMyModal}/>
  )
};
```

## Getting Started
1. To start accepting digital currency payments, first register for a Coinbase Commerce
account [here](https://commerce.coinbase.com).
1. Whitelist your domain in Settings.
1. Follow the API Documentation [here](https://commerce.coinbase.com/docs/api/) to create a charge or checkout.
    - Alternatively, create a checkout from the merchant dashboard and copy the ID found in the checkout's details. 
1. Pass the ID of the charge or checkout you create to the `CoinbaseCommerceModal` component
1. That's it! You're ready to start accepting digital currency payments with Coinbase Commerce

## Docs

### Props

| Prop Name       | default | required              | type                  |
|-----------------|---------|-----------------------|-----------------------|
| `showModal`        | false   | no                    | ``boolean``               |
| `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`              |

**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>
}
```

---
_Source: https://npm.io/package/react-coinbase-commerce-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._