braintree-web-react

    0.7.0 • Public • Published

    braintree-web-react Build Status npm npm version

    React component for Braintree Web Drop-In (v3) & Hosted Fields (v3)

    Inspired by Cretezy/braintree-web-drop-in-react.

    Usage

    Hosted-Fields

    import React, { Component } from 'react'
    import axios from 'axios'
    import { BraintreeHostedFields } from 'braintree-web-react'
     
    class App extends Component {
      state = {
        clientToken: null
      }
     
      instance
     
      async componentDidMount() {
        try {
          // Get client token for authorization from your server
          const response = await axios.get('http://localhost:8000/api/braintree/v1/getToken')
          const clientToken = response.data.clientToken
     
          this.setState({ clientToken })
        } catch (err) {
          console.error(err)
        }
      }
     
      async purchase() {
        try {
          // Send nonce to your server
          const { nonce } = await this.instance.tokenize()
     
          const response = await axios.post(
            'http://localhost:8000/api/braintree/v1/sandbox',
            { paymentMethodNonce: nonce }
          )
     
          console.log(response)
        } catch (err) {
          console.error(err)
        }
      }
     
      render() {
        if (!this.state.clientToken) {
          return (
            <div className="loading-container">
              <h1>Loading...</h1>
            </div>
          )
        } else {
          return (
            <div className="container">
              <BraintreeHostedFields
                className="drop-in-container"
                options={{
                  authorization: this.state.clientToken
                }}
                onInstance={(instance) => (this.instance = instance)}
              >
                <form id="cardForm">
                  <label className="hosted-fields--label">Card Number</label>
                  <div id="card-number" className="hosted-field"></div>
     
                  <label className="hosted-fields--label">Expiration Date</label>
                  <div id="expiration-date" className="hosted-field"></div>
     
                  <label className="hosted-fields--label">CVV</label>
                  <div id="cvv" className="hosted-field"></div>
     
                  <label className="hosted-fields--label">Postal Code</label>
                  <div id="postal-code" className="hosted-field"></div>
                </form>
              </BraintreeHostedFields>
              <button className="submit" onClick={this.purchase.bind(this)}>Submit</button>
            </div>
          )
        }
      }
    }

    Drop-In

    import React from "react"
    import axios from 'axios'
    import { BraintreeDropIn } from "braintree-web-react"
     
    class App extends React.Component {
      state = {
        clientToken: null
      };
     
      instance;
     
      async componentDidMount() {
        // Get client token for braintree authorization from your server
       const response = await axios.get('http://localhost:8000/api/braintree/v1/getToken')
        const clientToken = response.data.clientToken
     
        this.setState({ clientToken});
      }
     
      async purchase() {
        // Send nonce to your server
        const { nonce } = await this.instance.requestPaymentMethod();
        const response = await axios.post(
          'http://localhost:8000/api/braintree/v1/sandbox',
          { paymentMethodNonce: nonce }
        )
     
        console.log(response)
      }
     
      render() {
        if (!this.state.clientToken) {
          return (
            <div>
              <h1>Loading...</h1>
            </div>
          );
        } else {
          return (
            <div>
              <BraintreeDropIn
                options={{ authorization: this.state.clientToken }}
                onInstance={instance => (this.instance = instance)}
              />
              <button onClick={this.purchase.bind(this)}>Submit</button>
            </div>
          );
        }
      }
    }

    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.

    Useful links

    Install

    npm i braintree-web-react

    DownloadsWeekly Downloads

    100

    Version

    0.7.0

    License

    ISC

    Unpacked Size

    661 kB

    Total Files

    6

    Last publish

    Collaborators

    • macolon