Braintree Web Drop-in React

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

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.

Install

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

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.

• onNoPaymentMethodRequestable
• onPaymentMethodRequestable
• onPaymentOptionSelected

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.

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.