braintree-web-react
React component for Braintree Web Drop-In (v3) & Hosted Fields (v3)
Inspired by Cretezy/braintree-web-drop-in-react.
Usage
Hosted-Fields
state = clientToken: null instance async { try // Get client token for authorization from your server const response = await axios const clientToken = responsedataclientToken this catch err console } async { try // Send nonce to your server const nonce = await thisinstance const response = await axios console catch err console } { if !thisstateclientToken return <div className="loading-container"> <h1>Loading...</h1> </div> else return <div className="container"> <BraintreeHostedFields className="drop-in-container" options= authorization: thisstateclientToken onInstance= thisinstance = instance > <form id="cardForm"> <label className="hosted-fields--label">Card Number</label> <div id="card-number" className="hosted-field"></div> <label className="hosted-fields--label">Expiration Date</label> <div id="expiration-date" className="hosted-field"></div> <label className="hosted-fields--label">CVV</label> <div id="cvv" className="hosted-field"></div> <label className="hosted-fields--label">Postal Code</label> <div id="postal-code" className="hosted-field"></div> </form> </BraintreeHostedFields> <button className="submit" onClick=thispurchase>Submit</button> </div> }
Drop-In
Component state = clientToken: null ; instance; async { // Get client token for braintree authorization from your server const response = await axios const clientToken = responsedataclientToken this; } async { // Send nonce to your server const nonce = await thisinstance; const response = await axios console } { if !thisstateclientToken return <div> <h1>Loading...</h1> </div> ; else return <div> <BraintreeDropIn options= authorization: thisstateclientToken onInstance= thisinstance = instance /> <button onClick=thispurchase>Submit</button> </div> ; }
Props
options
(object
, required)
Options to setup Braintree. See Drop-In options.
onInstance
(function: instance
)
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.
onNoPaymentMethodRequestable
, onPaymentMethodRequestable
, onPaymentOptionSelected
(function: event
)
Ran for events.
preselectVaultedPaymentMethod
(boolean
, default: true
)
Whether or not to initialize with a vaulted payment method pre-selected. Only applicable when using a client token with a customer with saved payment methods.
Useful links
-
For information regarding
braintree-web-drop-in
orbraintree-web
please seebraintree/braintree-web-drop-in
andbraintree/braintree-web
.