React Component to handle Hosted Fields and Paypal like Braintree DropIn does
npm install 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 (
styles={styles}
ns="custom_namespace"
>
{({ getPayload, paypalPayload, reset, ready }) => (
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