braintree-web-drop-in-react-updated
v1.0.3
Published
React component for Braintree Web Drop-In Updated 2024 (v3)
Downloads
125
Maintainers
Readme
Braintree Web Drop-in React
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
.
Install
yarn add braintree-web-drop-in-react-updated
# or
npm install braintree-web-drop-in-react-updated
Drop-In
Complete example
import React from "react";
import DropIn from "braintree-web-drop-in-react-updated";
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>
);
}
}
}
Basic example
See example
.
Props
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.
Package size
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.