{"id":13632656,"url":"https://github.com/stripe/react-stripe-js","last_synced_at":"2026-01-28T22:00:56.968Z","repository":{"id":36468353,"uuid":"221280225","full_name":"stripe/react-stripe-js","owner":"stripe","description":"React components for Stripe.js and Stripe Elements","archived":false,"fork":false,"pushed_at":"2026-01-26T18:25:46.000Z","size":3230,"stargazers_count":1995,"open_issues_count":9,"forks_count":319,"subscribers_count":43,"default_branch":"master","last_synced_at":"2026-01-27T06:21:18.010Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stripe.com/docs/stripe-js/react","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/stripe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-11-12T18:03:34.000Z","updated_at":"2026-01-26T18:25:51.000Z","dependencies_parsed_at":"2023-02-10T18:46:15.806Z","dependency_job_id":"379adfd2-9abf-44fd-b32e-9df8327cd727","html_url":"https://github.com/stripe/react-stripe-js","commit_stats":{"total_commits":259,"total_committers":59,"mean_commits":4.389830508474576,"dds":0.803088803088803,"last_synced_commit":"d4db90d245430653a8b4698a1a6940df3fe3e184"},"previous_names":["stripe/react-stripe"],"tags_count":90,"template":false,"template_full_name":null,"purl":"pkg:github/stripe/react-stripe-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe%2Freact-stripe-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe%2Freact-stripe-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe%2Freact-stripe-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe%2Freact-stripe-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stripe","download_url":"https://codeload.github.com/stripe/react-stripe-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe%2Freact-stripe-js/sbom","scorecard":{"id":406477,"data":{"date":"2025-08-11","repo":{"name":"github.com/stripe/react-stripe-js","commit":"8a80b008bf0338342c354ca5204faad2aba80b4d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":5,"checks":[{"name":"Code-Review","score":6,"reason":"Found 17/28 approved changesets -- score normalized to 6","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":8,"reason":"10 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 8","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/stripe/react-stripe-js/build.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/stripe/react-stripe-js/build.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/stripe/react-stripe-js/stale.yml/master?enable=pin","Info:   0 out of   3 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/build.yml:1","Warn: no topLevel permission defined: .github/workflows/stale.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":6,"reason":"branch protection is not maximal on development and all release branches","details":["Info: 'allow deletion' disabled on branch 'master'","Info: 'force pushes' disabled on branch 'master'","Info: 'branch protection settings apply to administrators' is required to merge on branch 'master'","Warn: required approving review count is 1 on branch 'master'","Warn: codeowners review is not required on branch 'master'","Warn: no status checks found to merge onto branch 'master'","Info: PRs are required in order to make changes on branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":10,"reason":"security policy file detected","details":["Info: security policy file detected: github.com/stripe/.github/SECURITY.md:1","Info: Found linked content: github.com/stripe/.github/SECURITY.md:1","Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/stripe/.github/SECURITY.md:1","Info: Found text in security policy: github.com/stripe/.github/SECURITY.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 19 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"38 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T21:24:34.710Z","repository_id":36468353,"created_at":"2025-08-18T21:24:34.710Z","updated_at":"2025-08-18T21:24:34.710Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28853194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-08-01T22:03:10.126Z","updated_at":"2026-01-28T22:00:56.955Z","avatar_url":"https://github.com/stripe.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","UI Components"],"sub_categories":["Third-Party Integrations"],"readme":"# React Stripe.js\n\nReact components for\n[Stripe.js and Elements](https://stripe.com/docs/stripe-js).\n\n[![npm version](https://img.shields.io/npm/v/@stripe/react-stripe-js.svg?style=flat-square)](https://www.npmjs.com/package/@stripe/react-stripe-js)\n\n## Requirements\n\nThe minimum supported version of React is v16.8. If you use an older version,\nupgrade React to use this library. If you prefer not to upgrade your React\nversion, we recommend using legacy\n[`react-stripe-elements`](https://github.com/stripe/react-stripe-elements).\n\n## Getting started\n\n- [Learn how to accept a payment](https://stripe.com/docs/payments/accept-a-payment?platform=web\u0026ui=elements)\n- [Add React Stripe.js to your React app](https://stripe.com/docs/stripe-js/react#setup)\n- [Try it out using CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Documentation\n\n- [React Stripe.js reference](https://stripe.com/docs/stripe-js/react)\n- [Migrate from `react-stripe-elements`](docs/migrating.md)\n- [Legacy `react-stripe-elements` docs](https://github.com/stripe/react-stripe-elements/#react-stripe-elements)\n- [Examples](examples)\n\n### Minimal example\n\nFirst, install React Stripe.js and\n[Stripe.js](https://github.com/stripe/stripe-js).\n\n```sh\nnpm install @stripe/react-stripe-js @stripe/stripe-js\n```\n\n#### Using hooks\n\n```jsx\nimport React, {useState} from 'react';\nimport ReactDOM from 'react-dom';\nimport {loadStripe} from '@stripe/stripe-js';\nimport {\n  PaymentElement,\n  Elements,\n  useStripe,\n  useElements,\n} from '@stripe/react-stripe-js';\n\nconst CheckoutForm = () =\u003e {\n  const stripe = useStripe();\n  const elements = useElements();\n\n  const [errorMessage, setErrorMessage] = useState(null);\n\n  const handleSubmit = async (event) =\u003e {\n    event.preventDefault();\n\n    if (elements == null) {\n      return;\n    }\n\n    // Trigger form validation and wallet collection\n    const {error: submitError} = await elements.submit();\n    if (submitError) {\n      // Show error to your customer\n      setErrorMessage(submitError.message);\n      return;\n    }\n\n    // Create the PaymentIntent and obtain clientSecret from your server endpoint\n    const res = await fetch('/create-intent', {\n      method: 'POST',\n    });\n\n    const {client_secret: clientSecret} = await res.json();\n\n    const {error} = await stripe.confirmPayment({\n      //`Elements` instance that was used to create the Payment Element\n      elements,\n      clientSecret,\n      confirmParams: {\n        return_url: 'https://example.com/order/123/complete',\n      },\n    });\n\n    if (error) {\n      // This point will only be reached if there is an immediate error when\n      // confirming the payment. Show error to your customer (for example, payment\n      // details incomplete)\n      setErrorMessage(error.message);\n    } else {\n      // Your customer will be redirected to your `return_url`. For some payment\n      // methods like iDEAL, your customer will be redirected to an intermediate\n      // site first to authorize the payment, then redirected to the `return_url`.\n    }\n  };\n\n  return (\n    \u003cform onSubmit={handleSubmit}\u003e\n      \u003cPaymentElement /\u003e\n      \u003cbutton type=\"submit\" disabled={!stripe || !elements}\u003e\n        Pay\n      \u003c/button\u003e\n      {/* Show error message to your customers */}\n      {errorMessage \u0026\u0026 \u003cdiv\u003e{errorMessage}\u003c/div\u003e}\n    \u003c/form\u003e\n  );\n};\n\nconst stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');\n\nconst options = {\n  mode: 'payment',\n  amount: 1099,\n  currency: 'usd',\n  // Fully customizable with appearance API.\n  appearance: {\n    /*...*/\n  },\n};\n\nconst App = () =\u003e (\n  \u003cElements stripe={stripePromise} options={options}\u003e\n    \u003cCheckoutForm /\u003e\n  \u003c/Elements\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.body);\n```\n\n#### Using class components\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {loadStripe} from '@stripe/stripe-js';\nimport {\n  PaymentElement,\n  Elements,\n  ElementsConsumer,\n} from '@stripe/react-stripe-js';\n\nclass CheckoutForm extends React.Component {\n  handleSubmit = async (event) =\u003e {\n    event.preventDefault();\n    const {stripe, elements} = this.props;\n\n    if (elements == null) {\n      return;\n    }\n\n    // Trigger form validation and wallet collection\n    const {error: submitError} = await elements.submit();\n    if (submitError) {\n      // Show error to your customer\n      return;\n    }\n\n    // Create the PaymentIntent and obtain clientSecret\n    const res = await fetch('/create-intent', {\n      method: 'POST',\n    });\n\n    const {client_secret: clientSecret} = await res.json();\n\n    const {error} = await stripe.confirmPayment({\n      //`Elements` instance that was used to create the Payment Element\n      elements,\n      clientSecret,\n      confirmParams: {\n        return_url: 'https://example.com/order/123/complete',\n      },\n    });\n\n    if (error) {\n      // This point will only be reached if there is an immediate error when\n      // confirming the payment. Show error to your customer (for example, payment\n      // details incomplete)\n    } else {\n      // Your customer will be redirected to your `return_url`. For some payment\n      // methods like iDEAL, your customer will be redirected to an intermediate\n      // site first to authorize the payment, then redirected to the `return_url`.\n    }\n  };\n\n  render() {\n    const {stripe} = this.props;\n    return (\n      \u003cform onSubmit={this.handleSubmit}\u003e\n        \u003cPaymentElement /\u003e\n        \u003cbutton type=\"submit\" disabled={!stripe}\u003e\n          Pay\n        \u003c/button\u003e\n      \u003c/form\u003e\n    );\n  }\n}\n\nconst InjectedCheckoutForm = () =\u003e (\n  \u003cElementsConsumer\u003e\n    {({stripe, elements}) =\u003e (\n      \u003cCheckoutForm stripe={stripe} elements={elements} /\u003e\n    )}\n  \u003c/ElementsConsumer\u003e\n);\n\nconst stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');\n\nconst options = {\n  mode: 'payment',\n  amount: 1099,\n  currency: 'usd',\n  // Fully customizable with appearance API.\n  appearance: {\n    /*...*/\n  },\n};\n\nconst App = () =\u003e (\n  \u003cElements stripe={stripePromise} options={options}\u003e\n    \u003cInjectedCheckoutForm /\u003e\n  \u003c/Elements\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.body);\n```\n\n### TypeScript support\n\nReact Stripe.js is packaged with TypeScript declarations. Some types are pulled\nfrom [`@stripe/stripe-js`](https://github.com/stripe/stripe-js)—be sure to add\n`@stripe/stripe-js` as a dependency to your project for full TypeScript support.\n\nTypings in React Stripe.js follow the same\n[versioning policy](https://github.com/stripe/stripe-js#typescript-support) as\n`@stripe/stripe-js`.\n\n### Contributing\n\nIf you would like to contribute to React Stripe.js, please make sure to read our\n[contributor guidelines](CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstripe%2Freact-stripe-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstripe%2Freact-stripe-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstripe%2Freact-stripe-js/lists"}