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

Question

我在按照此处找到的自定义字段集成教程进行操作时收到 instance.requestpaymentmethod is not a function：

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

当我点击 "Pay" 按钮时发生错误。

有人解决过这个问题吗？我的假设是代码未更新或脚本源有所更改。如果布伦特里的任何人能真正提供帮助，那就太好了。

谢谢！

Answer 1

_{完全披露：我在 Braintree 工作。如果您有任何其他问题，请随时联系 support。}

我查看了 the guide you shared and I was able to find the culprit. First off, the error you're getting is expected as the requestPaymentMethod method actually belongs to our Drop-In UI solution 中的示例代码片段，Hosted Fields JS 库没有这样的模块。我通知我们的文档团队更新该代码示例。

也就是说，您可以在 hostedFieldsInstance 的 Hosted Fields guide. If you check the function (hostedFieldsErr, hostedFieldsInstance) callback function, you'll see that the payment nonce is created by the tokenize 函数中找到一个工作示例。

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 不是函数”

Getting an ' instance.requestPaymentMethod is not a function' in Braintree's sample

paypal

braintree