{"id":18910104,"url":"https://github.com/cretezy/braintree-web-drop-in-react","last_synced_at":"2025-04-09T23:15:49.944Z","repository":{"id":28189369,"uuid":"116635548","full_name":"Cretezy/braintree-web-drop-in-react","owner":"Cretezy","description":"React component for Braintree Web Drop-In (v3)","archived":false,"fork":false,"pushed_at":"2023-01-06T01:45:39.000Z","size":2009,"stargazers_count":71,"open_issues_count":46,"forks_count":23,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T23:15:41.171Z","etag":null,"topics":["braintree","braintree-dropin","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cretezy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"Cretezy"}},"created_at":"2018-01-08T05:50:56.000Z","updated_at":"2024-01-15T13:53:50.000Z","dependencies_parsed_at":"2022-08-25T11:00:21.311Z","dependency_job_id":null,"html_url":"https://github.com/Cretezy/braintree-web-drop-in-react","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cretezy%2Fbraintree-web-drop-in-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cretezy%2Fbraintree-web-drop-in-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cretezy%2Fbraintree-web-drop-in-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cretezy%2Fbraintree-web-drop-in-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cretezy","download_url":"https://codeload.github.com/Cretezy/braintree-web-drop-in-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125592,"owners_count":21051770,"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":["braintree","braintree-dropin","react"],"created_at":"2024-11-08T09:41:11.237Z","updated_at":"2025-04-09T23:15:49.922Z","avatar_url":"https://github.com/Cretezy.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Cretezy"],"categories":[],"sub_categories":[],"readme":"# Braintree Web Drop-in React [![Build Status](https://travis-ci.org/Cretezy/braintree-web-drop-in-react.svg?branch=master)](https://travis-ci.org/Cretezy/braintree-web-drop-in-react) [![npm version](http://img.shields.io/npm/v/braintree-web-drop-in-react.svg?style=flat)](https://www.npmjs.org/package/braintree-web-drop-in-react)\n\n\u003cp align=\"center\"\u003e\n    This is a React component that wraps \u003ccode\u003ebraintree-web-drop-in\u003c/code\u003e (v3).\n    \u003cimg \n        alt=\"braintree-web-drop-in-react example\"\n        src=\"https://raw.githubusercontent.com/Cretezy/braintree-web-drop-in-react/master/example/index.png\" \n        width=\"417\"\n    /\u003e\n\u003c/p\u003e\n\n\u003e Disclaimer: this is not an official Braintree module.\n\n\u003e For issues and information concerning `braintree-web-drop-in` or `braintree-web` in general, please see [`braintree/braintree-web-drop-in`](https://github.com/braintree/braintree-web-drop-in) and [`braintree/braintree-web`](https://github.com/braintree/braintree-web).\n\n## Install\n\n```bash\nyarn add braintree-web-drop-in-react\n# or\nnpm install braintree-web-drop-in-react\n```\n\n## Drop-In\n\n### Complete example\n\n```js\nimport React from \"react\";\nimport DropIn from \"braintree-web-drop-in-react\";\n\nclass Store extends React.Component {\n  instance;\n\n  state = {\n    clientToken: null,\n  };\n\n  async componentDidMount() {\n    // Get a client token for authorization from your server\n    const response = await fetch(\"server.test/client_token\");\n    const clientToken = await response.json(); // If returned as JSON string\n\n    this.setState({\n      clientToken,\n    });\n  }\n\n  async buy() {\n    // Send the nonce to your server\n    const { nonce } = await this.instance.requestPaymentMethod();\n    await fetch(`server.test/purchase/${nonce}`);\n  }\n\n  render() {\n    if (!this.state.clientToken) {\n      return (\n        \u003cdiv\u003e\n          \u003ch1\u003eLoading...\u003c/h1\u003e\n        \u003c/div\u003e\n      );\n    } else {\n      return (\n        \u003cdiv\u003e\n          \u003cDropIn\n            options={{ authorization: this.state.clientToken }}\n            onInstance={(instance) =\u003e (this.instance = instance)}\n          /\u003e\n          \u003cbutton onClick={this.buy.bind(this)}\u003eBuy\u003c/button\u003e\n        \u003c/div\u003e\n      );\n    }\n  }\n}\n```\n\n### Basic example\n\nSee [`example`](example/README.md).\n\n## Props\n\n### `options` (`object`, required)\n\nOptions to setup Braintree.\nSee [Drop-In options](https://braintree.github.io/braintree-web-drop-in/docs/current/module-braintree-web-drop-in.html#.create).\n\n### `onInstance` (`function: instance`, optional)\n\nCalled with the Braintree Drop-In instance when done initializing.\nYou can call all regular [Drop-In methods](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html)\n\nThe `on` events are already listened to using `onNoPaymentMethodRequestable`,\n`onPaymentMethodRequestable`, `onPaymentOptionSelected`. See below.\n\n#### [`instance.requestPaymentMethod([callback])`: `[Promise]`](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#requestPaymentMethod)\n\nRequests a payment method object which includes the payment method nonce used by by the Braintree Server SDKs.\nThe structure of this payment method object varies by type: a [cardPaymentMethodPayload](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#~cardPaymentMethodPayload)\nis returned when the payment method is a card, a [paypalPaymentMethodPayload](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#~paypalPaymentMethodPayload)\nis returned when the payment method is a PayPal account.\n\nIf a payment method is not available, an error will appear in the UI. When a callback is used, an error will be passed to it. If no callback is used, the returned Promise will be rejected with an error.\n\nReturns a Promise if no callback is provided.\n\n#### [`instance.clearSelectedPaymentMethod()`](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#clearSelectedPaymentMethod): `void`\n\nRemoves the currently selected payment method and returns the customer to the payment options view. Does not remove vaulted payment methods.\n\n#### [`instance.isPaymentMethodRequestable()`](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#isPaymentMethodRequestable): `boolean`\n\nReturns a boolean indicating if a payment method is available through requestPaymentMethod.\nParticularly useful for detecting if using a client token with a customer ID to show vaulted payment methods.\n\n#### [`instance.updateConfiguration(property, key, value)`](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#updateConfiguration): `void`\n\nModify your configuration initially set in `options`. Can be used for any paypal or paypalCredit property.\n\nIf updateConfiguration is called after a user completes the PayPal authorization flow, any PayPal accounts not stored in the Vault record will be removed.\n\n### `onError` (`function: error`, optional)\n\nCalled when creating the instance throws an error.\n\n\u003e Note: This doesn't propage up to React's error bounderies. If this is the desired behavior, rethrow the error inside your `onError` handler\n\n### `onNoPaymentMethodRequestable`, `onPaymentMethodRequestable`, `onPaymentOptionSelected` (`function: void/payload`, optional)\n\nRan for [events](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#on).\n\n- [`onNoPaymentMethodRequestable`](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#event:paymentMethodRequestable)\n- [`onPaymentMethodRequestable`](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#event:noPaymentMethodRequestable)\n- [`onPaymentOptionSelected`](https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#event:paymentOptionSelected)\n\n### `preselectVaultedPaymentMethod` (`boolean`, default: `true`)\n\nWhether to initialize with a vaulted payment method pre-selected.\nOnly applicable when using a client token with a customer with saved payment methods.\n\n\u003e Note: This prop is deprecated and will be removed in v2. Simply place this prop inside your `options` instead.\n\n## Package size\n\nSince this depends on `braintree-web-drop-in`, this can be a [quite large package](https://bundlephobia.com/result?p=braintree-web-drop-in-react) (324.5 kB minified). This package alone is only ~3 kB.\n\nTo avoid loading all this code when not used, it is **strongly recommended** to dynamically import it using `import()`. Using [`@loadable/component`](https://www.npmjs.com/package/@loadable/component) or [`react-loadable`](https://www.npmjs.com/package/react-loadable) can make this quite simple.\n\n\u003e This is an maintainted and updated rewrite of [jeffcarp/braintree-react](https://github.com/jeffcarp/braintree-react).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcretezy%2Fbraintree-web-drop-in-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcretezy%2Fbraintree-web-drop-in-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcretezy%2Fbraintree-web-drop-in-react/lists"}