{"id":18998878,"url":"https://github.com/nathanstitt/react-braintree-fields","last_synced_at":"2025-08-19T21:31:33.830Z","repository":{"id":19656616,"uuid":"87380513","full_name":"nathanstitt/react-braintree-fields","owner":"nathanstitt","description":"React components for Braintree hosted fields","archived":false,"fork":false,"pushed_at":"2023-04-18T09:19:00.000Z","size":9764,"stargazers_count":39,"open_issues_count":4,"forks_count":25,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-11T08:51:29.892Z","etag":null,"topics":["braintree","ecommerce","hacktoberfest","javascript","payment-gateway","react"],"latest_commit_sha":null,"homepage":"https://nathanstitt.github.io/react-braintree-fields/","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/nathanstitt.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-06T03:04:54.000Z","updated_at":"2024-02-25T07:38:33.000Z","dependencies_parsed_at":"2024-06-18T17:07:52.381Z","dependency_job_id":"f8f4c216-af52-4678-be7d-00b50ebd0b10","html_url":"https://github.com/nathanstitt/react-braintree-fields","commit_stats":{"total_commits":182,"total_committers":14,"mean_commits":13.0,"dds":0.2857142857142857,"last_synced_commit":"bd36d503a00ab1356a4c4eb535d12ed75d754ce7"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Freact-braintree-fields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Freact-braintree-fields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Freact-braintree-fields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanstitt%2Freact-braintree-fields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathanstitt","download_url":"https://codeload.github.com/nathanstitt/react-braintree-fields/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229964395,"owners_count":18152031,"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","ecommerce","hacktoberfest","javascript","payment-gateway","react"],"created_at":"2024-11-08T17:48:14.592Z","updated_at":"2024-12-19T03:09:13.023Z","avatar_url":"https://github.com/nathanstitt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React components to integrate Braintree hosted fields\n\nA few small React components to make integrating [Braintree's Hosted Fields](https://developers.braintreepayments.com/guides/hosted-fields/) easier.\n\n[![Build Status](https://travis-ci.org/nathanstitt/react-braintree-fields.svg?branch=master)](https://travis-ci.org/nathanstitt/react-braintree-fields)\n\n# See also\n\nI've also written a vendor agnostic library [PaymentFields](https://github.com/nathanstitt/payment-fields)  It's an extension of this library to also support Square and Stripe.  You might check that out if you ever think you'll need to support additional processors.\n\n## Introduction\n\n```javascript\nimport { Braintree, HostedField } from 'react-braintree-fields';\nclass MySillyCheckoutForm extends React.PureComponent {\n\n    function onSubmit() {\n        // could also obtain a reference to the Braintree wrapper element and call `.tokenize()`\n       this.getToken({ cardholderName: 'My Order Name' }).then((payload) =\u003e {\n         console.log(\"nonce=\" , payload.nonce)\n         console.log(\"device_data\", this.device_data)\n       })\n    }\n\n    onCardTypeChange() {\n        this.setState({ card: (1 === cards.length) ? cards[0].type : '' });\n    }\n\n    function onFocus(event) {\n        console.log(\"number is focused\", event);\n    }\n\n    onError(err) {\n       console.warn(err);\n       this.ccNum.focus(); // focus number field\n    }\n\n    onAuthorizationSuccess() {\n      this.setState({ isBraintreeReady : true });\n    }\n\n    onDataCollectorInstanceReady(err, dataCollectorInstance) {\n      if(!err) this.device_data = dataCollectorInstance.deviceData\n    }\n\n    render() {\n        return (\n            \u003cBraintree\n                className={ this.state.isBraintreeReady ? '' : 'disabled' }\n                authorization='sandbox_g42y39zw_348pk9cgf3bgyw2b'\n                onAuthorizationSuccess={this.onAuthorizationSuccess}\n                onDataCollectorInstanceReady={this.onDataCollectorInstanceReady}\n                onError={this.handleError}\n                onCardTypeChange={this.onCardTypeChange}\n                getTokenRef={ref =\u003e (this.getToken = ref)}\n                styles={{\n                    'input': {\n                        'font-size': '14px',\n                        'font-family': 'helvetica, tahoma, calibri, sans-serif',\n                        'color': '#3a3a3a'\n                    },\n                    ':focus': {\n                        'color': 'black'\n                    }\n                }}\n            \u003e\n                \u003cdiv className=\"fields\"\u003e\n                    \u003cHostedField type=\"number\" onFocus={onFocus} ref={ccNum =\u003e (this.ccNum = ccNum)} /\u003e\n                    \u003cHostedField type=\"expirationDate\" /\u003e\n                    \u003cHostedField type=\"cvv\" /\u003e\n                \u003c/div\u003e\n                \u003cbutton onClick={onSubmit}\u003eSubmit\u003c/button\u003e\n            \u003c/Braintree\u003e\n        );\n    }\n}\n```\n\nSee [demo site](https://nathanstitt.github.io/react-braintree-fields/) for a working example. It renders [demo/demo-class.jsx](demo/demo-class.jsx)  There is also a [functional version](demo/demo-functional.jsx) available that illustrates how to work around the issue of storing a function reference using setState that was discovered in [issue #20](https://github.com/nathanstitt/react-braintree-fields/issues/20)\n\n## Braintree Component\n\nProps:\n * authorization: Required, either a [tokenization key or a client token](https://developers.braintreepayments.com/guides/hosted-fields/setup-and-integration/)\n * onAuthorizationSuccess: Function that is called after Braintree successfully initializes the form\n * styles: Object containing [valid field styles](https://braintree.github.io/braintree-web/3.11.1/module-braintree-web_hosted-fields.html#.create)\n * onError: Function that is called if an Braintree error is encountered.\n * getTokenRef: A function that will be called once Braintree the API is initialized.  It will be called with a function that can be used to initiate tokenization.\n   * The tokenization function will return a Promise which will be either resolved or rejected.  If resolved, the promise payload will contain an object with the `nonce` and other data from Braintree. If rejected it will return the error notice from Braintree\n * onDataCollectorInstanceReady: A function that will be called with the results of `Braintree.dataCollector.create`. This can be used in conjunction with [Braintree's Advanced Fraud Tools](https://developers.braintreepayments.com/guides/advanced-fraud-tools/client-side/javascript/v3).\n\n## HostedField Component\n\nProps:\n  * type: Required, one of:\n    - 'number', 'expirationDate', 'expirationMonth', 'expirationYear', 'cvv', 'postalCode'\n  * onBlur\n  * onFocus\n  * onEmpty\n  * onNotEmpty\n  * onValidityChange\n  * onCardTypeChange - accepted on any field, but will only be called by type=\"number\"\n  * placeholder - A string to that will be displayed in the input while it's empty\n  * formatInput\n  * maxlength,\n  * minlength\n  * select\n  * options - an object containing any other valid Braintree options such as maskInput\n  * prefill\n\nSee the [Braintree api docs](https://braintree.github.io/braintree-web/3.33.0/module-braintree-web_hosted-fields.html#%7Efield) for more details\n\nFields also have \"focus\" and \"clear\" methods.  These may be called by obtaining a reference to the field.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanstitt%2Freact-braintree-fields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathanstitt%2Freact-braintree-fields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanstitt%2Freact-braintree-fields/lists"}