Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
braintree-web-drop-in-react
Advanced tools
This is a React component that wraps braintree-web-drop-in
(v3).
Disclaimer: this is not an official Braintree module.
For issues and information concerning
braintree-web-drop-in
orbraintree-web
in general, please seebraintree/braintree-web-drop-in
andbraintree/braintree-web
.
yarn add braintree-web-drop-in-react
# or
npm install braintree-web-drop-in-react
import React from "react";
import DropIn from "braintree-web-drop-in-react";
class Store extends React.Component {
instance;
state = {
clientToken: null,
};
async componentDidMount() {
// Get a client token for authorization from your server
const response = await fetch("server.test/client_token");
const clientToken = await response.json(); // If returned as JSON string
this.setState({
clientToken,
});
}
async buy() {
// Send the nonce to your server
const { nonce } = await this.instance.requestPaymentMethod();
await fetch(`server.test/purchase/${nonce}`);
}
render() {
if (!this.state.clientToken) {
return (
<div>
<h1>Loading...</h1>
</div>
);
} else {
return (
<div>
<DropIn
options={{ authorization: this.state.clientToken }}
onInstance={(instance) => (this.instance = instance)}
/>
<button onClick={this.buy.bind(this)}>Buy</button>
</div>
);
}
}
}
See example
.
options
(object
, required)Options to setup Braintree. See Drop-In options.
onInstance
(function: instance
, optional)Called with the Braintree Drop-In instance when done initializing. You can call all regular Drop-In methods
The on
events are already listened to using onNoPaymentMethodRequestable
,
onPaymentMethodRequestable
, onPaymentOptionSelected
. See below.
instance.requestPaymentMethod([callback])
: [Promise]
Requests a payment method object which includes the payment method nonce used by by the Braintree Server SDKs. The structure of this payment method object varies by type: a cardPaymentMethodPayload is returned when the payment method is a card, a paypalPaymentMethodPayload is returned when the payment method is a PayPal account.
If a payment method is not available, an error will appear in the UI. When a callback is used, an error will be passed to it. If no callback is used, the returned Promise will be rejected with an error.
Returns a Promise if no callback is provided.
instance.clearSelectedPaymentMethod()
: void
Removes the currently selected payment method and returns the customer to the payment options view. Does not remove vaulted payment methods.
instance.isPaymentMethodRequestable()
: boolean
Returns a boolean indicating if a payment method is available through requestPaymentMethod. Particularly useful for detecting if using a client token with a customer ID to show vaulted payment methods.
instance.updateConfiguration(property, key, value)
: void
Modify your configuration initially set in options
. Can be used for any paypal or paypalCredit property.
If updateConfiguration is called after a user completes the PayPal authorization flow, any PayPal accounts not stored in the Vault record will be removed.
onError
(function: error
, optional)Called when creating the instance throws an error.
Note: This doesn't propage up to React's error bounderies. If this is the desired behavior, rethrow the error inside your
onError
handler
onNoPaymentMethodRequestable
, onPaymentMethodRequestable
, onPaymentOptionSelected
(function: void/payload
, optional)Ran for events.
preselectVaultedPaymentMethod
(boolean
, default: true
)Whether to initialize with a vaulted payment method pre-selected. Only applicable when using a client token with a customer with saved payment methods.
Note: This prop is deprecated and will be removed in v2. Simply place this prop inside your
options
instead.
Since this depends on braintree-web-drop-in
, this can be a quite large package (324.5 kB minified). This package alone is only ~3 kB.
To avoid loading all this code when not used, it is strongly recommended to dynamically import it using import()
. Using @loadable/component
or react-loadable
can make this quite simple.
This is an maintainted and updated rewrite of jeffcarp/braintree-react.
v1.2.1 (2020-09-26)
FAQs
React component for Braintree Web Drop-In (v3)
The npm package braintree-web-drop-in-react receives a total of 3,028 weekly downloads. As such, braintree-web-drop-in-react popularity was classified as popular.
We found that braintree-web-drop-in-react 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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.