Программируемая отправка с помощью Braintree Custom Form

У меня есть пользовательская форма Braintree, расположенная внутри мода Bootstrap. Прямо сейчас форма Braintree отлично работает, если я помещаю кнопку отправки в форму. Когда я нажимаю кнопку отправки, Braintree перехватывает ее и запускает обработчик отправки, который получает nonce, а затем возвращает его методу onPaymentMethodReceived. Все идет нормально. Но я хотел бы использовать симпатичную кнопку «Bootstrap themed» внизу модальной формы, чтобы отправить форму, а не кнопку отправки в тег <form>.Программируемая отправка с помощью Braintree Custom Form

Однако, если я настраиваю такую кнопку и даю ей click действие $("#paymentForm").submit();, это, кажется, представляет его традиционным способом, а не стрельбу из Braintree's handler. Есть ли способ вызвать программный манипулятор Braintree?

источник

2016-07-27 Timothy R. Butler

Почему Брэйнтри не придаю обработчик кнопке? – raduation

Возможно, это было бы, но я не знаю, как это сделать. По умолчанию, по крайней мере, он только перехватывает фактическую кнопку отправки внутри формы. –

Одна вещь, которую вы можете сделать, это предоставить кнопку в самой форме, но скрыть ее. И нажмите кнопку в нижнем колонтитуле начальной загрузки, нажав на настоящую кнопку. Это позволит форме Braintree подавать угон для правильной работы.

<form id="form" method="post" action="/checkout"> 
    <div id="payment-form"></div> 
    <input type="submit" style="position:fixed; top:-200%;left:-200%;" id="real-btn"> 
</form> 
<button type="submit" id="fake-btn">Pay</button> 

<script type="text/javascript" src="https://js.braintreegateway.com/js/braintree-2.27.0.min.js"></script> 
<script type="text/javascript"> 
    var clientToken = "YOUR_TOKEN_HERE"; 
    var fakeBtn = document.getElementById('fake-btn'); 
    var realBtn = document.getElementById('real-btn'); 

    braintree.setup(clientToken, 'dropin', { 
    container: 'payment-form' 
    }); 

    fakeBtn.addEventListener('click', function (e) { 
    realBtn.click(); 
    }); 
</script>

Кроме того, здесь есть codepen using jQuery and Bootstrap для выполнения решения в модальном Bootstrap.

Демо использует Bootstrap modal example и pre-generated client token from the Braintree docs. Он использует onPaymentMethodReceived callback, чтобы проиллюстрировать, что токенизация была успешной, но не нужна для решения, если вы просто хотите отправить форму.

источник

2016-07-28 21:14:16 BladeBarringer

Это замечательно! Спасибо! –

Другим решением является нажать на кнопку программно:

<form> 
    <div id="braintree-container"></div> 
    <input type="submit" style="display: none;"> 
</form> 

<button>Pay</button> 

<script type="text/javascript"> 
    $('button').click(function() { 
     $('input[type=submit]').click(); 
    }); 
</script>

источник

2017-06-26 13:43:30 vbarbarosh

Программируемая отправка с помощью Braintree Custom Form

ответ

Смежные вопросы