PayPal как дополнительный способ оплаты в Braintree

В настоящее время у нас возникают проблемы с оплатой через Braintree PayPal в сочетании с обычным банковским переводом через IBAN. По сути, мы представляем посетителю два варианта подписки: PayPal (через Braintree) и транзакция IBAN.

Метод PayPal работает нормально, но когда мы выбираем не PayPal, а банковский перевод IBAN, мы получаем следующую консольную ошибку:

введите описание изображения здесь

Мы понимаем, что это правильное поведение, поскольку поля PayPal не заполняются, но как можно использовать PayPal в качестве дополнительного метода оплаты без выдачи ошибки, если поля не заполнены?

Мы используем базовую реализацию js через 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>

ОБНОВЛЕНИЕ: Обе формы видны на странице мгновенно, они не загружаются впоследствии через Ajax или какой-либо другой. Таким образом, опция PayPal через Braintree должна проверяться, только если, например, установлен флажок. Например, флажок на скриншоте ниже (переключает видимость обоих наборов полей).

введите описание изображения здесь


ОБНОВЛЕНИЕ №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;
    });
}

person Andreas    schedule 11.04.2017    source источник
comment
Нам нужна дополнительная информация о вашем рабочем процессе UX, отображаются ли обе формы оплаты одновременно? Делаются ли они видимыми с помощью обработчика событий? Документы разработчика Braintree показывают, что сообщение об ошибке - href = "https://developers.braintreepayments.com/guides/drop-in/javascript/#error-field-objects" rel = "nofollow noreferrer"> стандартный ответ при отправке их формы Drop-in UI без номера карты, CVV, истечения срока действия или почтового индекса. Если вы можете поделиться своим html, в котором показаны обе формы оплаты, это поможет нам решить проблемы.   -  person Shea    schedule 11.04.2017
comment
@Shea Я обновил свой вопрос. Но да, они находятся на странице одновременно.   -  person Andreas    schedule 12.04.2017


Ответы (1)


Полное раскрытие информации: я работаю в Braintree. Если у вас есть дополнительные вопросы, обращайтесь в службу поддержки.

Drop-in UI по-прежнему загружается, когда вы выбираете вариант оплаты Lastschrift, поэтому вы получаете ошибки проверки.

Один из способов избежать этих ошибок проверки - использовать метод teardown в обратном вызове onReady в braintree.js, чтобы удалить Drop-in UI, если клиент выбирает Lastschrift.

Кроме того, вы можете разделить каждый из этих способов оплаты на совершенно разные элементы формы на своей странице.

person hollabaq    schedule 12.04.2017
comment
Спасибо, это очень помогло. :) - person Andreas; 13.04.2017