/braintree-web-drop-in-react

React component for Braintree Web Drop-In (v3)

Primary LanguageJavaScriptMIT LicenseMIT

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.