react-braintree-custom-dropin

``js import React, { useState } from 'react' import { DropIn, HostedField, PaypalButton, } from 'react-braintree-custom-dropin'

function Payment() { const [paypalReady, setPayPalReady] = useState(false) const [focused, setFocused] = useState(false) const [fieldsEmpty, setFieldsEmpty] = useState({}) const onSubmit => () => {} return ( authorization="sandbox_xxxxxxxx_xxxxxxxxxxxxxxxx " styles={styles} ns="custom_namespace" > {({ getPayload, paypalPayload, reset, ready }) => (


          {paypalPayload ? (
            
              PayPal already set 
            
          ) : (
            <>
              
                                  style={{
                    label: 'paypal',
                    size: 'medium',
                    shape: 'rect',
                    color: 'black',
                    tagline: false,
                  }}
                  onCancel={onCancel}
                  onError={onError}
                  onEnter={() => setPayPalReady(true)}
                />
              
              
              

                                  type="number"
                  onFocus={({ emittedBy }) => setFocused(emittedBy)}
                  onBlur={({ emittedBy, fields }) => {
                    setFieldsEmpty(prevStatus => ({
                      ...prevStatus,
                      [emittedBy]: fields[emittedBy].isEmpty,
                    }))
                  }}
                  className="field"
                >
                  {id => (
                                          className={cn('label', {
                        focused: focused === 'number' || !fieldsEmpty['number'],
                      })}
                      htmlFor={id}
                    >
                      Card Number
                    
                  )}
                
              
                              type="cvv"
                placeholder="123"
                onFocus={({ emittedBy }) => setFocused(emittedBy)}
              />
              
            
          )}
          {ready && }


      )}
    
  )
}
const onCancel = data => {
  console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2))
}
const onError = err => {
  console.error('checkout.js error', err)
}

export default Payment``

$3

- https://developer.paypal.com/docs/checkout/best-practices/#performance-and-analytics

react-braintree-custom-dropin

js
import React, { useState } from 'react'
import {
  DropIn,
  HostedField,
  PaypalButton,
} from 'react-braintree-custom-dropin'

function Payment() {
  const [paypalReady, setPayPalReady] = useState(false)
  const [focused, setFocused] = useState(false)
  const [fieldsEmpty, setFieldsEmpty] = useState({})
  const onSubmit => () => {}
  return (
          authorization="sandbox_xxxxxxxx_xxxxxxxxxxxxxxxx  "
      styles={styles}
      ns="custom_namespace"
    >
      {({ getPayload, paypalPayload, reset, ready }) => (


          {paypalPayload ? (
            
              PayPal already set 
            
          ) : (
            <>
              
                                  style={{
                    label: 'paypal',
                    size: 'medium',
                    shape: 'rect',
                    color: 'black',
                    tagline: false,
                  }}
                  onCancel={onCancel}
                  onError={onError}
                  onEnter={() => setPayPalReady(true)}
                />
              
              
              

                                  type="number"
                  onFocus={({ emittedBy }) => setFocused(emittedBy)}
                  onBlur={({ emittedBy, fields }) => {
                    setFieldsEmpty(prevStatus => ({
                      ...prevStatus,
                      [emittedBy]: fields[emittedBy].isEmpty,
                    }))
                  }}
                  className="field"
                >
                  {id => (
                                          className={cn('label', {
                        focused: focused === 'number' || !fieldsEmpty['number'],
                      })}
                      htmlFor={id}
                    >
                      Card Number
                    
                  )}
                
              
                              type="cvv"
                placeholder="123"
                onFocus={({ emittedBy }) => setFocused(emittedBy)}
              />
              
            
          )}
          {ready && }

)}

)
}

const onCancel = data => {
console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2))
}
const onError = err => {
console.error('checkout.js error', err)
}

export default Payment

- https://developer.paypal.com/docs/checkout/best-practices/#performance-and-analytics