{"id":40569459,"url":"https://github.com/marcolanaro/react-payment-request-api","last_synced_at":"2026-01-21T01:33:45.490Z","repository":{"id":57342330,"uuid":"71662365","full_name":"marcolanaro/react-payment-request-api","owner":"marcolanaro","description":"High order component to drive Payment Request widget","archived":false,"fork":false,"pushed_at":"2018-10-03T14:34:44.000Z","size":1904,"stargazers_count":58,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-04T12:45:55.598Z","etag":null,"topics":["credit-card","payment-request","react"],"latest_commit_sha":null,"homepage":"https://lanaro.net/react-payment-request-api/","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/marcolanaro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-22T19:56:25.000Z","updated_at":"2024-07-19T23:35:17.000Z","dependencies_parsed_at":"2022-09-16T02:50:27.307Z","dependency_job_id":null,"html_url":"https://github.com/marcolanaro/react-payment-request-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marcolanaro/react-payment-request-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcolanaro%2Freact-payment-request-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcolanaro%2Freact-payment-request-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcolanaro%2Freact-payment-request-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcolanaro%2Freact-payment-request-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcolanaro","download_url":"https://codeload.github.com/marcolanaro/react-payment-request-api/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcolanaro%2Freact-payment-request-api/sbom","scorecard":{"id":618123,"data":{"date":"2025-08-11","repo":{"name":"github.com/marcolanaro/react-payment-request-api","commit":"4b7c14feb9ac5b79bdd17aa38a89dce503ceac01"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"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":"Dangerous-Workflow","score":-1,"reason":"no workflows found","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":"Code-Review","score":0,"reason":"Found 1/29 approved changesets -- score normalized to 0","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":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"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":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"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":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"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":"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":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"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":"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":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for 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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 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"}}]},"last_synced_at":"2025-08-21T04:31:38.066Z","repository_id":57342330,"created_at":"2025-08-21T04:31:38.066Z","updated_at":"2025-08-21T04:31:38.066Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28621721,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T23:49:58.628Z","status":"ssl_error","status_checked_at":"2026-01-20T23:47:29.996Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["credit-card","payment-request","react"],"created_at":"2026-01-21T01:33:44.954Z","updated_at":"2026-01-21T01:33:45.476Z","avatar_url":"https://github.com/marcolanaro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/marcolanaro/react-payment-request-api/master/logo.png\" width=300\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003ca href=\"https://facebook.github.io/react/\"\u003eReact\u003c/a\u003e high order component to drive \u003ca href=\"https://www.w3.org/TR/payment-request/\"\u003epayment request\u003c/a\u003e widget on react applications 💳.\n  \u003c/strong\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://npmjs.com/package/react-payment-request-api\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-payment-request-api.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/marcolanaro/react-payment-request-api/blob/master/LICENSE.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/marcolanaro/react-payment-request-api.svg\"\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/travis/marcolanaro/react-payment-request-api.svg\"\u003e\n  \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/react-payment-request-api/dist/react-payment-request-api.min.js?compression=gzip\u0026label=gzip%20size\"\u003e\n  \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/react-payment-request-api/dist/react-payment-request-api.min.js?label=size\"\u003e\n  \u003ca href=\"https://npmjs.com/package/react-payment-request-api\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/react-payment-request-api.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n## Browser support\n\n[Payment request api](https://developers.google.com/web/fundamentals/getting-started/primers/payment-request/) is supported on Chrome for desktop v. ^61.0, Chrome for Android and Android Webview v. ^56.0, Microsoft Edge v. ^15.0.\n\n## Demo\n\nYou can find a working demo [here](https://lanaro.net/react-payment-request-api/). Be sure to use a supported browser.\n\n## NPM Install\n\n```bash\nnpm install react-payment-request-api --save\n```\n\n## Usage\n\nConsume the UI component in the hight order component `button.js`:\n\n```js\nimport React from \"react\";\nimport paymentRequest from 'react-payment-request-api';\n\nconst Button = ({ show, isSupported }) =\u003e isSupported\n    ? \u003cbutton onClick={show}\u003ePay now!\u003c/button\u003e\n    : \u003cspan\u003ePayment request not supported\u003c/span\u003e;\n\nexport default paymentRequest\u003cOwnProps\u003e()(Button);\n```\n\nPass the configuration to the high order component `smartComponent.js`:\n\n```js\nimport React from \"react\";\n\nimport Button from \"./button\";\n\nconst SmartComponent = (config) =\u003e\n  \u003cButton config={config} foo=\"bar\" /\u003e;\n\nexport default SmartComponent;\n```\n\n## FAQ\n\n#### How does it work?\n\nIt takes a configuration prop that define how the native widget should behave and any other property you want to pass to the UI component. It spread all the properties a part from the configuration to the enhanced UI component. The UI component will also receive other props that will help improving the experience allowing complete control on the renderer and on the action handler.\n\n#### Does it support Redux or any other flux implementation?\n\nYes, with version 1.0 we have changed the interface allowing the user to inject the configuration from the parent component. In this way it does not matter which flux implementation you are using. At the same time, we are preserving the high order component pattern so you have complete control on the renderer and on the action handler.\n\n#### Does it support Typescript?\n\nYes, you don't need to install any typescript dependecies because types come with the library. It export `PaymentRequestParams` (injected configuration) and `PaymentRequestInterface` (UI component extended props) typescript interfaces. All the [examples](https://github.com/marcolanaro/react-payment-request-api/tree/master/examples) are written in typescript.\n\n## API\n\nYour wrapped component will be decorated with this injected props:\n\nParameter   | Type                           | Description\n----------- | ------------------------------ | -----------\nisSupported | boolean                        | True if the payment request api is supported by the browser.\nshow        | function: () =\u003e PaymentRequest | It will begin the process when the merchant site want to create a new [PaymentRequest](https://www.w3.org/TR/payment-request/#paymentrequest-interface).\nabort       | function: () =\u003e void           | You can intentionally [abort a PaymentRequest](https://www.w3.org/TR/payment-request/#abort) by calling the abort method after show has been called.\n\nConfiguration of the high order component:\n\nParameter               | Type                                               | Description\n----------------------- | -------------------------------------------------- | -----------\nmethodData              | object                                             | Required [payment method data](https://www.w3.org/TR/payment-request/#idl-def-paymentmethoddata).\ndetails                 | object                                             | Required information about [transaction](https://www.w3.org/TR/payment-request/#dom-paymentdetails).\noptions                 | object                                             | [Optional parameter](https://www.w3.org/TR/payment-request/#dom-paymentoptions) for things like shipping, etc.\nonShowSuccess           | Promise based callback: (result, resolve, reject)  | The handler will be executed after the filling of the form is [successfull](https://www.w3.org/TR/payment-request/#dfn-complete). You should post your payment request and then resolve or reject the promise. \nonShowFail              | Promise based callback: (error)                    | The handler will be executed if the filling of the form is [not successfull](https://www.w3.org/TR/payment-request/#dom-paymentcomplete-fail) (like when the user dismiss the form).\nonShippingAddressChange | Promise based callback: (request, resolve, reject) | The handler will be executed if the [shipping address has change](https://www.w3.org/TR/payment-request/#idl-def-paymentrequestupdateevent). You can change the request and then resolve the promise.\nonShippingOptionChange  | Promise based callback: (request, resolve, reject) | The handler will be executed if the [shipping option has change](https://www.w3.org/TR/payment-request/#idl-def-paymentrequestupdateevent). You can change the request and then resolve the promise.\nonMerchantValidation    |  Promise based callback: (event)                   | Thde handler is used by Apple pay to [validate the merchant](https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/providing_merchant_validation).\n\n## License\n\nSee the [LICENSE](LICENSE.md) file for license rights and limitations (MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcolanaro%2Freact-payment-request-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcolanaro%2Freact-payment-request-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcolanaro%2Freact-payment-request-api/lists"}