{"id":20290604,"url":"https://github.com/gocardless/react-dropin","last_synced_at":"2025-04-11T11:00:25.234Z","repository":{"id":39663170,"uuid":"388761890","full_name":"gocardless/react-dropin","owner":"gocardless","description":"React bindings for the GoCardless Dropin checkout flow","archived":false,"fork":false,"pushed_at":"2023-11-06T11:37:12.000Z","size":5878,"stargazers_count":6,"open_issues_count":20,"forks_count":5,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-04-06T10:03:25.090Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/gocardless.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-23T10:20:09.000Z","updated_at":"2024-03-07T16:38:04.000Z","dependencies_parsed_at":"2022-08-09T15:23:33.062Z","dependency_job_id":null,"html_url":"https://github.com/gocardless/react-dropin","commit_stats":null,"previous_names":["gocardless/react-gocardless-dropin"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocardless%2Freact-dropin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocardless%2Freact-dropin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocardless%2Freact-dropin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocardless%2Freact-dropin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gocardless","download_url":"https://codeload.github.com/gocardless/react-dropin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248381716,"owners_count":21094525,"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-14T15:08:26.677Z","updated_at":"2025-04-11T11:00:25.198Z","avatar_url":"https://github.com/gocardless.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GoCardless React Dropin\n\n[![npm version](https://badge.fury.io/js/%40gocardless%2Freact-dropin.svg)](https://badge.fury.io/js/%40gocardless%2Freact-dropin)\n\nReact bindings for the GoCardless Dropin checkout flow.\n\n## Installation\n\nWith npm:\n\n```console\nnpm install --save @gocardless/react-dropin\n```\n\nWith yarn:\n\n```console\nyarn add @gocardless/react-dropin\n```\n\n## Examples\n\nThis library exports React hook functions that you can use to trigger a\nGoCardless Dropin instance.\n\nHere is a simple example of an `App` that wants to create a Billing Request Flow\nID via its backend API, then provide a `DropinButton` that the payer can click\nto trigger the Dropin.\n\n\u003e See this in action at the [GoCardlessDropinButton\n\u003e story](https://gocardless.github.io/react-dropin/?path=/story/dropin-gocardlessdropinbutton--base)\n\n```typescript\nimport React, { useCallback, useState } from \"react\";\nimport {\n  useGoCardlessDropin,\n  GoCardlessDropinOptions,\n  GoCardlessDropinOnSuccess,\n} from \"@gocardless/react-dropin\";\n\n// Display a button that opens the Dropin on click, starting a checkout\n// flow for the specified Billing Request Flow.\nconst DropinButton = (options: GoCardlessDropinOptions) =\u003e {\n  const { open } = useGoCardlessDropin({ ...options });\n\n  return (\n    \u003cbutton type=\"button\" onClick={() =\u003e open()}\u003e\n      Start Dropin for \u003ccode\u003e{options.billingRequestFlowID}\u003c/code\u003e in{\" \"}\n      \u003ccode\u003e{options.environment}\u003c/code\u003e\n    \u003c/button\u003e\n  );\n};\n\n// Example checkout flow, where we create a Billing Request Flow ID by talking\n// with our backend API.\nconst App: FunctionComponent = () =\u003e {\n  const [flowID, setFlowID] = useState\u003cstring | null\u003e(null);\n\n  // Build your backend with an API endpoint that:\n  //\n  //   1. Creates a Billing Request for the resources you wish to create\n  //   2. Create a Billing Request Flow against (1)\n  //   3. Return the ID from (2)\n  //\n  // See an example of this at Taking an Instant Bank Payment:\n  // https://developer.gocardless.com/getting-started/billing-requests/taking-an-instant-bank-payment/\n  React.useEffect(() =\u003e {\n    async function createFlow() {\n      // Expecting a JSON body like:\n      // {\n      //   \"flow_id\": \"BRF123456\"\n      // }\n      let response = await fetch(\"/api/flows\", {\n        method: \"POST\",\n      });\n      const { flow_id } = await response.json();\n      setFlowID(flow_id);\n    }\n    createFlow();\n  }, []);\n\n  // Only show the button once we have a Billing Request Flow ID\n  return flowID === null ? (\n    \u003cdiv className=\"loader\"\u003e\u003c/div\u003e\n  ) : (\n    \u003cDropinButton billingRequestFlowID={flowID} environment={\"live\"} /\u003e\n  );\n};\n```\n\n## Storybook\n\nCheckout the Storybook flow to see the `\u003cGoCardlessDropinButton /\u003e` in action.\nYou can use the Storybook knobs to configure the Billing Request Flow ID, from\nwhich you can create your Dropin instance.\n\nStories are deployed to the `gh-pages` branch of this repo, and hosted at\n[https://gocardless.github.io/react-dropin/](https://gocardless.github.io/react-dropin/).\n\n## Publishing\n\nCircleCI is configured to publish changes for us, via a build pipeline.\n\nTo trigger a new package version:\n\n[release]: https://github.com/gocardless/react-dropin/releases/new\n\n1. Update `package.json` with the new version number (ie, v1.0.0)\n2. Push this commit to `master`, then [cut a new release][release] in GitHub\n   with a tag name that matches the release (ie, v1.0.0)\n\nThis should trigger the CI pipeline, and the new package version will appear on\nnpm shortly.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgocardless%2Freact-dropin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgocardless%2Freact-dropin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgocardless%2Freact-dropin/lists"}