When attempting to render the hostedFields from Braintree, I encounter an issue. After creating a key and obtaining my token, I pass it to my function to create the hostedFields. However, I am faced with an error message stating
client.getVersion is not a functionimport { client, hostedFields } from 'braintree-web';
import styles from '../../styles/Booking.module.css';
export default function PaymentForm() {
const createClient = async () => {
try {
const res = await client.create({
authorization: '<MY_SANDBOX_KEY>'
});
const clientToken = res._configuration.authorization;
clientDidCreate(clientToken)
} catch (err) {
console.error(err);
}
}
const clientDidCreate = (client) => {
console.log(client);
hostedFields.create({
client: client,
styles: {
'input': {
'font-size': '16pt',
'color': '#3A3A3A'
},
'.number': {
'font-family': 'monospace'
},
'.valid': {
'color': 'green'
}
},
fields: {
number: {
container: '#card-number'
},
cvv: {
container: '#cvv',
placeholder: '***'
},
expirationDate: {
container: '#expiration-date'
}
}
})
console.log(res);
}
useEffect(() => {
createClient()
}, []);
return (
<form>
<label htmlFor="card-number">Card Number</label>
<div id="card-number"></div>
<label htmlFor="cvv">CVV</label>
<div id="cvv"></div>
<label htmlFor="expiration-date">Expiration Date</label>
<div id="expiration-date"></div>
<p>By submitting this order, I agree to the <a href="#">Treatment Program Terms</a> and <a href="#"> Privacy Notice.</a></p>
<button type="button">Submit </button>
</form>
)
}