React component for Braintree Web Drop-In (v3)
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example fix READMEs Feb 15, 2018
src Fix Babel runtime Aug 13, 2018
.gitignore v0.2.8 Feb 14, 2018
.travis.yml v0.2.9: travis npm deploy fix Feb 14, 2018
CHANGELOG.md Fix Babel runtime Aug 13, 2018
LICENSE Add code Jan 8, 2018
README.md Change indentation (format) on example in README Oct 31, 2018
package.json fix: switch build ‘target’ from ‘web’ to ‘node’, fixes #15 Oct 18, 2018
yarn.lock Fix Babel runtime Aug 13, 2018

README.md

Braintree Web Drop-in React Build Status npm version

This is a React component that wraps braintree-web-drop-in (v3). braintree-web-drop-in-react example

Disclaimer: this is not an official Braintree module.

For issues and information concerning braintree-web-drop-in or braintree-web in general, please see braintree/braintree-web-drop-in and braintree/braintree-web.

This is an maintainted and updated rewrite of jeffcarp/braintree-react.

Install

yarn add braintree-web-drop-in-react
# or
npm install braintree-web-drop-in-react

Requires Node.js v8+.

Drop-In

Complete example

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>
      );
    }
  }
}

Basic example

See example.

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.