{"id":18542734,"url":"https://github.com/coinbase/react-coinbase-commerce","last_synced_at":"2025-03-30T01:09:54.268Z","repository":{"id":38239659,"uuid":"142071588","full_name":"coinbase/react-coinbase-commerce","owner":"coinbase","description":"Coinbase Commerce React","archived":false,"fork":false,"pushed_at":"2023-10-03T22:10:29.000Z","size":850,"stargazers_count":96,"open_issues_count":37,"forks_count":57,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-23T00:05:38.667Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coinbase.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-23T21:31:11.000Z","updated_at":"2025-02-24T23:29:52.000Z","dependencies_parsed_at":"2024-06-18T18:32:26.003Z","dependency_job_id":"54acfcb3-f772-4891-a201-ec51cd8a29b2","html_url":"https://github.com/coinbase/react-coinbase-commerce","commit_stats":{"total_commits":66,"total_committers":14,"mean_commits":4.714285714285714,"dds":0.6818181818181819,"last_synced_commit":"1f8b313eab096dc846ef465d957f836f222c452c"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coinbase%2Freact-coinbase-commerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coinbase%2Freact-coinbase-commerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coinbase%2Freact-coinbase-commerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coinbase%2Freact-coinbase-commerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coinbase","download_url":"https://codeload.github.com/coinbase/react-coinbase-commerce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246262616,"owners_count":20749175,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T20:10:14.764Z","updated_at":"2025-03-30T01:09:54.248Z","avatar_url":"https://github.com/coinbase.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"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)\n[![npm version](https://badge.fury.io/js/react-coinbase-commerce.svg)](https://badge.fury.io/js/react-coinbase-commerce)\n\n\n# Coinbase Commerce React Button \n**Note**: This repository is not actively maintained.\n\nA button to embed a Coinbase Commerce checkout or charge directly into your React application.\n\n```\nnpm i -S react-coinbase-commerce \n```\n\n## Features\n- Connect your Coinbase Commerce account to easily accept cryptocurrencies from within your application.\n- Support for embedding individual charges or entire checkouts\n- Callback APIs for successful and failed payments.\n- No API key required\n\n### Table of Contents\n- [Usage](#usage)\n- [Getting Started](#getting-started)\n- [Docs](#docs)\n\n## Usage\n```jsx\nimport CoinbaseCommerceButton from 'react-coinbase-commerce';\nimport 'react-coinbase-commerce/dist/coinbase-commerce-button.css';\n\nconst App = () =\u003e {\n  return (\n    \u003cCoinbaseCommerceButton checkoutId={'My checkout ID'}/\u003e\n  )\n};\n```\n\n## Getting Started\n1. To start accepting digital currency payments, first register for a Coinbase Commerce\naccount [here](https://commerce.coinbase.com).\n1. Whitelist your domain in Settings.\n1. Follow the API Documentation [here](https://commerce.coinbase.com/docs/api/) to create a charge or checkout.\n    - Alternatively, create a checkout from the merchant dashboard and copy the ID found in the checkout's details. \n1. Pass the ID of the charge or checkout you create to the `CoinbaseCommerceButton` component\n1. That's it! You're ready to start accepting digital currency payments with Coinbase Commerce\n\n## Docs\n\n### Props\nIn addition to the regular `button` props, this component accepts some custom props:\n\n| Prop Name       | default | required              | type                  |\n|-----------------|---------|-----------------------|-----------------------|\n| `styled`        | false   | no                    | ``boolean``               |\n| `checkoutId`      | nil     | If no chargeId, yes   | ``string``                |\n| `chargeId`        | nil     | If no checkoutId, yes | ``string``                |\n| `onLoad`          | nil     | no                    | `()=\u003evoid`            |\n| `onChargeSuccess` | nil     | no                    | `(MessageData)=\u003evoid` |\n| `onChargeFailure` | nil     | no                    | `(MessageData)=\u003evoid` |\n| `onPaymentDetected` | nil     | no                    | `(MessageData)=\u003evoid` |\n| `onModalClosed`   | nil     | no                    | `()=\u003evoid`            |\n| `disableCaching`   | false     | no                    | `boolean`            |\n| `customMetadata`   | nil     | no                    | `string`              |\n\n**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. \n\n### Data Types\n```typescript\ntype MessageData = {\n  event: 'charge_confirmed' | 'charge_failed' 'payment_detected',\n  code: \u003cCHARGE_CODE\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoinbase%2Freact-coinbase-commerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoinbase%2Freact-coinbase-commerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoinbase%2Freact-coinbase-commerce/lists"}