https://github.com/nathanstitt/react-braintree-fields
React components for Braintree hosted fields
https://github.com/nathanstitt/react-braintree-fields
braintree ecommerce hacktoberfest javascript payment-gateway react
Last synced: about 2 months ago
JSON representation
React components for Braintree hosted fields
- Host: GitHub
- URL: https://github.com/nathanstitt/react-braintree-fields
- Owner: nathanstitt
- License: mit
- Created: 2017-04-06T03:04:54.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2023-04-18T09:19:00.000Z (over 2 years ago)
- Last Synced: 2024-12-11T08:51:29.892Z (10 months ago)
- Topics: braintree, ecommerce, hacktoberfest, javascript, payment-gateway, react
- Language: JavaScript
- Homepage: https://nathanstitt.github.io/react-braintree-fields/
- Size: 9.31 MB
- Stars: 39
- Watchers: 3
- Forks: 25
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React components to integrate Braintree hosted fields
A few small React components to make integrating [Braintree's Hosted Fields](https://developers.braintreepayments.com/guides/hosted-fields/) easier.
[](https://travis-ci.org/nathanstitt/react-braintree-fields)
# See also
I'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.
## Introduction
```javascript
import { Braintree, HostedField } from 'react-braintree-fields';
class MySillyCheckoutForm extends React.PureComponent {
function onSubmit() {
// could also obtain a reference to the Braintree wrapper element and call `.tokenize()`
this.getToken({ cardholderName: 'My Order Name' }).then((payload) => {
console.log("nonce=" , payload.nonce)
console.log("device_data", this.device_data)
})
}
onCardTypeChange() {
this.setState({ card: (1 === cards.length) ? cards[0].type : '' });
}
function onFocus(event) {
console.log("number is focused", event);
}
onError(err) {
console.warn(err);
this.ccNum.focus(); // focus number field
}
onAuthorizationSuccess() {
this.setState({ isBraintreeReady : true });
}
onDataCollectorInstanceReady(err, dataCollectorInstance) {
if(!err) this.device_data = dataCollectorInstance.deviceData
}
render() {
return (
(this.getToken = ref)}
styles={{
'input': {
'font-size': '14px',
'font-family': 'helvetica, tahoma, calibri, sans-serif',
'color': '#3a3a3a'
},
':focus': {
'color': 'black'
}
}}
>
(this.ccNum = ccNum)} />
Submit
);
}
}
```
See [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)
## Braintree Component
Props:
* authorization: Required, either a [tokenization key or a client token](https://developers.braintreepayments.com/guides/hosted-fields/setup-and-integration/)
* onAuthorizationSuccess: Function that is called after Braintree successfully initializes the form
* styles: Object containing [valid field styles](https://braintree.github.io/braintree-web/3.11.1/module-braintree-web_hosted-fields.html#.create)
* onError: Function that is called if an Braintree error is encountered.
* 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.
* 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
* 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).
## HostedField Component
Props:
* type: Required, one of:
- 'number', 'expirationDate', 'expirationMonth', 'expirationYear', 'cvv', 'postalCode'
* onBlur
* onFocus
* onEmpty
* onNotEmpty
* onValidityChange
* onCardTypeChange - accepted on any field, but will only be called by type="number"
* placeholder - A string to that will be displayed in the input while it's empty
* formatInput
* maxlength,
* minlength
* select
* options - an object containing any other valid Braintree options such as maskInput
* prefill
See the [Braintree api docs](https://braintree.github.io/braintree-web/3.33.0/module-braintree-web_hosted-fields.html#%7Efield) for more details
Fields also have "focus" and "clear" methods. These may be called by obtaining a reference to the field.