Braintree Drop In UI Проверка поля

Question

Braintree Drop In UI Проверка поля

В одном шаге оформления заказа у меня есть несколько способов оплаты для клиентов, таких как Braintree, Банковский перевод и т. Д. Чтобы позволить клиентам выбирать из нескольких методов, я должен сделать поля Braintree обязательными только в том случае, если Braintree выбран в качестве метода оплаты. Есть ли способ, с помощью которого я могу сделать поля Braintree, такие как кредитная карта, CVV и т. Д., Не обязательными?
Один шаг Оформить заказ
Буду признателен за любую помощь.

1

braintree paypal php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="myform" action="/" method="get">
<label for="pay-with">Pay with card</label>
<input id="pay-with-cc" type="radio" name="pay-with" value="cc">

<div id="container" style="display: none;"></div>

<label for="bank-transfer">Pay with Bank Transfer</label>
<input id="pay-with-bank-transfer" type="radio" name="pay-with" value="bank-transfer">

<input type="submit" value="Pay">
</form>
<!-- Include your JS here -->
</body>
</html>

И затем ваш файл JavaScript, вы можете сделать что-то вроде этого:

(function () {
var dropinHasRendered = false;
var form = document.forms[0];
var dropinContainer = form.querySelector('#container');
var payWithCCRadio = form.querySelector('input#pay-with-cc');
var payWithBankTransferRadio = form.querySelector('input#pay-with-bank-transfer');

function renderBraintreeDropIn() {
dropinHasRendered = true;

// Make sure to use your client token here
braintree.setup(YOUR_TOKEN, 'dropin', {container: 'container'});
}

function showBraintree() {
dropinContainer.style.display = 'block';

if (!dropinHasRendered) {
renderBraintreeDropIn();
}
}

function hideBraintree() {
dropinContainer.style.display = 'none';
}

payWithBankTransferRadio.addEventListener('change', hideBraintree);
payWithCCRadio.addEventListener('change', showBraintree);

form.addEventListener('submit', function (event) {
if (form['pay-with'].value === 'bank-transfer') {
event.preventDefault();

// This allows your to bypass Drop-in
HTMLFormElement.prototype.submit.call(form);
}
});
})();

2