Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-braintree-fields
Advanced tools
A few small React components to make integrating Braintree's Hosted Fields easier.
I've also written a vendor agnostic library PaymentFields 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.
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 (
<Braintree
className={ this.state.isBraintreeReady ? '' : 'disabled' }
authorization='sandbox_g42y39zw_348pk9cgf3bgyw2b'
onAuthorizationSuccess={this.onAuthorizationSuccess}
onDataCollectorInstanceReady={this.onDataCollectorInstanceReady}
onError={this.handleError}
onCardTypeChange={this.onCardTypeChange}
getTokenRef={ref => (this.getToken = ref)}
styles={{
'input': {
'font-size': '14px',
'font-family': 'helvetica, tahoma, calibri, sans-serif',
'color': '#3a3a3a'
},
':focus': {
'color': 'black'
}
}}
>
<div className="fields">
<HostedField type="number" onFocus={onFocus} ref={ccNum => (this.ccNum = ccNum)} />
<HostedField type="expirationDate" />
<HostedField type="cvv" />
</div>
<button onClick={onSubmit}>Submit</button>
</Braintree>
);
}
}
See demo site for a working example. It renders demo/demo-class.jsx There's also a functional version available that illustrates how to work around the issue of storing a function reference using setState that was discovered in issue #20
Props:
nonce
and other data from Braintree.Braintree.dataCollector.create
. This can be used in conjunction with Braintree's Advanced Fraud Tools.Props:
See the Braintree api docs for more details
Fields also have "focus" and "clear" methods. These may be called by obtaining a reference to the field.
FAQs
React component for braintree hosted fields
The npm package react-braintree-fields receives a total of 716 weekly downloads. As such, react-braintree-fields popularity was classified as not popular.
We found that react-braintree-fields demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.