React component to integrate Braintree Drop-In UI (V3). https://developers.braintreepayments.com/guides/drop-in/javascript/v3
- Wraps the Braintree Drop-In UI V3
- If
authorizationToken
is changed the Drop-In UI will be re-initialized. This is useful if you want to support multiple merchants.
- braintree - Required, this is braintree-web-drop-in
- authorizationToken - Required, authorization for Drop-In see in DOC
- handlePaymentMethod - Required, to retrieve the payment method object
- onCreate - triggered when Drop-In UI is visible
- onError - triggered when error occured
- onDestroyStart - triggered before teardown
- onDestroyEnd - triggered after success teardown
- locale - see in DOC
- paypal - see in DOC
- paypalCredit - see in DOC
- paymentOptionPriority - see in DOC
- submitButtonText - Text of the submit button
- className - CSS class for the outer container (defaults to
braintree-dropin-react
) - renderSubmitButton - Use a custom component for the submit button. Takes props
onClick
,isDisabled
andtext
$ npm install braintree-dropin-react
see /example/clientApp.js
to run
$ yarn install
$ npm run example
payment form - see in DOC
component - write your own custom css
div.braintree-dropin-react
div.braintree-dropin-react-form
div.braintree-dropin-react-submit-btn-wrapper
button
Compatible with styled-components.
const MyBraintreeDropin = styled(BraintreeDropin)`
padding: 20px;
.braintree-dropin-react-submit-btn-wrapper {
padding: 10px;
background-color: #eee;
}
`;