npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

braintree-web-drop-in-react-updated

v1.0.3

Published

React component for Braintree Web Drop-In Updated 2024 (v3)

Downloads

271

Readme

Braintree Web Drop-in React Build Status npm version

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-updated
# or
npm install braintree-web-drop-in-react-updated

Drop-In

Complete example

import React from "react";
import DropIn from "braintree-web-drop-in-react-updated";

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, optional)

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.

onError (function: error, optional)

Called when creating the instance throws an error.

Note: This doesn't propage up to React's error bounderies. If this is the desired behavior, rethrow the error inside your onError handler

onNoPaymentMethodRequestable, onPaymentMethodRequestable, onPaymentOptionSelected (function: void/payload, optional)

Ran for events.

preselectVaultedPaymentMethod (boolean, default: true)

Whether to initialize with a vaulted payment method pre-selected. Only applicable when using a client token with a customer with saved payment methods.

Note: This prop is deprecated and will be removed in v2. Simply place this prop inside your options instead.

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.