braintree-dropin-react

React Drop-in Payment UI Component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
braintree-dropin-react
2810.1.14 years ago6 years agoMinified + gzip package size for braintree-dropin-react in KB

Readme

braintree-dropin-react
React component to integrate Braintree Drop-In UI (V3). https://developers.braintreepayments.com/guides/drop-in/javascript/v3

Features

  • Wraps the Braintree Drop-In UI V3
  • If ``authorizationToken` or `locale`` is changed the Drop-In UI will be re-initialized. This is useful if you want to support multiple merchants/locales.

Props

  • 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 - If you want the re-initialization feature when the locale is changed then don't use in the options prop see in DOC
  • options - Braintree web dropin create options 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 and text

Installation

$ npm install braintree-dropin-react

Example

see /example/clientApp.js
to run
$ yarn install
$ npm run example

Custom CSS

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

Styled Components

Compatible with styled-components.
const MyBraintreeDropin = styled(BraintreeDropin)`
  padding: 20px;
  .braintree-dropin-react-submit-btn-wrapper {
    padding: 10px;
    background-color: #eee;
  }
`;