使用Braintree-Web时出现client.getVersion is not a function错误怎么解决？

问题场景 #

渲染Braintree HostedFields时，按流程创建密钥并获取token后传入创建hostedFields的函数，触发错误client.getVersion is not a function。已确认client token正确且SDK版本匹配，但字段仍无法正常加载，代码如下：

import { 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>
       
    )
}

核心错误原因 #

createClient函数中传递给clientDidCreate的是token字符串（res._configuration.authorization），而非client.create返回的有效Braintree客户端实例res。HostedFields初始化需要接收客户端实例，传入字符串会导致内部调用client.getVersion()时失败——字符串没有该方法，从而触发报错。

修正后的代码 #

import { client, hostedFields } from 'braintree-web';
import styles from '../../styles/Booking.module.css';
import { useEffect } from 'react'; // 补全useEffect的导入

export default function PaymentForm() {

    const createClient = async () => {
        try {
            // client.create返回的结果就是初始化完成的客户端实例
            const clientInstance = await client.create({
                authorization: '<MY_SANDBOX_KEY>'
             });
             // 传入客户端实例而非token字符串
             clientDidCreate(clientInstance);
        } catch (err) {
            console.error('客户端创建失败:', err);
        }
    }

    const clientDidCreate = (clientInstance) => {
        // hostedFields.create是异步操作，建议通过then/catch处理结果
        hostedFields.create({
            client: clientInstance, // 使用正确的客户端实例
            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'
                }
            }
        })
        .then(hostedFieldsInstance => {
            console.log('HostedFields初始化成功:', hostedFieldsInstance);
            // 可在此绑定表单提交、字段状态监听等逻辑
        })
        .catch(err => {
            console.error('HostedFields创建失败:', err);
        });
    }

    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>
    )
}

额外注意事项 #

• 原代码遗漏了useEffect的导入，React组件中必须显式导入该Hook才能使用，否则会触发运行时错误。
• hostedFields.create是异步方法，务必通过.then()/.catch()或async/await处理结果，便于捕获初始化过程中的错误（比如容器DOM不存在、字段配置错误等）。
• 避免直接访问SDK的私有属性（如res._configuration.authorization），这类下划线开头的属性属于内部实现，可能随版本变更，依赖它们会导致兼容性问题。

内容的提问来源于stack exchange，提问作者Kelley Muro