Question

当我按照以下教程进行自定义字段集成时，得到instance.requestpaymentmethod is not a function：

https://developers.braintreepayments.com/start/tutorial-hosted-fields-node

当我点击“付款”按钮时，就会发生错误。

有人解决了这个问题吗？我的假设是代码未更新或脚本源有所更改。如果Braintree的任何人都可以帮助您，那就太好了。

谢谢！

Answer 1

_{全部披露：我在Braintree工作。如果您还有其他疑问，请随时与support联系。}

我查看了the guide you shared中的示例代码片段，终于找到了罪魁祸首。首先，由于public class Application { // This is the main entry point of the application. static void Main(string[] args) { // if you want to use a different Application Delegate class from "AppDelegate //you can specify it here. UIApplication.Main(args, null, "AppDelegate"); } }方法实际上属于我们的Drop-In UI solution，并且Hosted Fields JS库没有这样的模块，所以您会遇到错误。我通知我们的文档团队更新该代码示例。

话虽如此，您可以在我们的Hosted Fields guide中找到一个有效的示例。如果您检查requestPaymentMethod回调函数，则会看到付款随机数是由function (hostedFieldsErr, hostedFieldsInstance)的{{3}}函数创建的。

Answer 2

我今天也遇到了这个问题。在<script>标记中使用以下代码。它将为您工作。

var form = document.querySelector('#hosted-fields-form');
var submit = document.querySelector('input[type="submit"]');

braintree.client.create({
    authorization: '<YOUR_TOKENIZATION_KEY>'
}, function (clientErr, clientInstance) {
    if (clientErr) {
        console.error(clientErr);
        return;
    }

    braintree.hostedFields.create({
        client: clientInstance,
        styles: {
            'input': {
                'font-size': '14px'
            },
            'input.invalid': {
                'color': 'red'
            },
            'input.valid': {
                'color': 'green'
            }
        },
        fields: {
            number: {
                selector: '#card-number',
                placeholder: '4111 1111 1111 1111'
            },
            cvv: {
                selector: '#cvv',
                placeholder: '123'
            },
            expirationDate: {
                selector: '#expiration-date',
                placeholder: '10/2019'
            }
        }
    }, function (hostedFieldsErr, hostedFieldsInstance) {
        if (hostedFieldsErr) {
            console.error(hostedFieldsErr);
            return;
        }

        form.addEventListener('submit', function (event) {
            event.preventDefault();

            hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
                if (tokenizeErr) {
                    console.error(tokenizeErr);
                    return;
                }
                console.log('Got a nonce: ' + payload.nonce);

                $.ajax({
                    type: 'POST',
                    url: '<YOUR_API_URL>',
                    data: { 'paymentMethodNonce': payload.nonce }
                }).done(function (result) {
                    hostedFieldsInstance.teardown(function (teardownErr) {
                        if (teardownErr) {
                            console.error('Could not tear down Drop-in UI!');
                        } else {
                            console.info('Drop-in UI has been torn down!');
                            $('#submit-button').remove();
                        }
                    });

                    if (result.success) {
                        $('#checkout-message').html('<h1>Success</h1><p>Your Drop-in UI is working! Check your <a href="https://sandbox.braintreegateway.com/login">sandbox Control Panel</a> for your test transactions.</p><p>Refresh to try another transaction.</p>');
                    } else {
                        console.log(result);
                        $('#checkout-message').html('<h1>Error</h1><p>Check your console.</p>');
                    }
                });
            });
        }, false);
    });
});

在Braintree的示例中获取“ instance.requestPaymentMethod不是函数”

2 个答案: