Search code examples
javascriptpaypalbraintree

PayPal as secondary payment option in Braintree

We're currently struggling with Braintree PayPal payment in combination with regular bank transfer via IBAN. Basically, we present two subscription options to the visitor: PayPal (via Braintree) and IBAN transaction.

The PayPal method works fine but when we don't select PayPal but IBAN bank transfer, we're getting the following console error:

enter image description here

We understand that this is the correct behaviour since the PayPal fields are not filled, but how is it possible to have PayPal as an optional payment method without throwing an error when the fields are not filled?

We're using the basic js implemetion via DropUI.

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

UPDATE: Both forms are visible on the page instantly, they are not loaded afterwards via Ajax or any kind. So, the PayPal option via Braintree should only validate if for example a checkbox is set. For example, the checkbox given in the screenshot below (toggles visibility of both fieldsets).

enter image description here

UPDATE #2: For anyone interested in the final solution:

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

  • Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.

    Drop-in UI is still loaded when you select the Lastschrift payment option, which is why you're receiving the validation errors.

    One way to avoid these validation errors is to use the 'teardown' method in the 'onReady' callback in braintree.js to remove the Drop-in UI if a customer selects Lastschrift.

    Alternatively, you can separate each of these payment methods into entirely different form elements on your page.