贝宝作为 Braintree 中的辅助支付选项答案

【问题标题】：PayPal as secondary payment option in Braintree贝宝作为 Braintree 中的辅助支付选项
【发布时间】：2017-09-06 22:23:52
【问题描述】：

我们目前正在努力将 Braintree PayPal 付款与通过 IBAN 进行的常规银行转账相结合。基本上，我们向访问者提供两种订阅选项：PayPal（通过 Braintree）和 IBAN 交易。

PayPal 方法可以正常工作，但是当我们不选择 PayPal 而是选择 IBAN 银行转帐时，我们会收到以下控制台错误：

我们知道这是正确的行为，因为 PayPal 字段未填写，但是如何将 PayPal 作为可选付款方式而不在未填写字段时引发错误？

我们通过 DropUI 使用基本的 js 实现。

<div class="bt-drop-in-wrapper" id="showpaypalfields">
    <div id="bt-dropin" class="paypaldiv"></div>
</div>

<script src="https://js.braintreegateway.com/js/braintree-2.27.0.min.js"></script>
<script>
    var client_token = "123TOKEN";
    braintree.setup(client_token, "dropin", {
        container: "bt-dropin"
    });
</script>

更新： 这两种表单都可以立即在页面上看到，之后不会通过 Ajax 或任何类型加载它们。因此，通过 Braintree 的 PayPal 选项应该只验证是否设置了复选框。例如，下面屏幕截图中给出的复选框（切换两个字段集的可见性）。

更新 #2： 对于任何对最终解决方案感兴趣的人：

var btInstance;

$('input#paymentmethod-1').change(function(){
    if ( $(this).is(':checked') == true ) {
        teardown();
    }
});

$('input#paymentmethod-2').change(function(){
    if ( $(this).is(':checked') == true ) {
        setup();
    }
});

function setup() {
    if (btInstance) {
        return;
    } else {
        var client_token = "<ps:braintreetoken />";
        braintree.setup(client_token, "dropin", {
            container: "bt-dropin",
            onReady: function (bt) {
                btInstance = bt;
            }
        });
    }
}

function teardown() {
    if (!btInstance) {
        return;
    }
    btInstance.teardown(function () {
        btInstance = null;
    });
}

【问题讨论】：

我们需要有关您的 UX 工作流程的更多信息，两种付款方式是否同时可见？它们是否通过事件处理程序可见？ Braintree's developer docs 显示错误消息是 standard response，当他们的 Drop-in UI 表单提交时没有卡号、cvv、到期或邮政编码信息。如果您可以分享显示两种付款方式的 html，这将有助于我们解决问题。
@Shea 我更新了我的问题。但是，是的，它们同时出现在页面上。

标签： javascript paypal braintree

【解决方案1】：

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

当您选择 Lastschrift 付款选项时仍会加载 Drop-in UI，这就是您收到验证错误的原因。

避免这些验证错误的一种方法是在客户选择 Lastschrift 时使用 Braintree.js 中的 'teardown' method in the 'onReady' callback 删除 Drop-in UI。

或者，您可以将这些付款方式中的每一种分离到页面上完全不同的表单元素中。

【讨论】：

谢谢，帮了大忙。 :)