在一步结帐中,我有多种付款方式供客户选择,例如 Braintree、银行转账等。为了让客户从多种方式中进行选择,我必须仅在选择 Braintree 作为付款方式时才强制要求 Braintree 字段。有什么办法可以使信用卡、cvv 等 braintree 字段成为非强制性字段吗? 如果有任何帮助,我将不胜感激。
最佳答案
我想我误解了你最初的问题。如果用户选择银行转账,您似乎希望能够绕过 Drop-ins 表单劫持。我整理了一个小演示来说明我将如何去做:
<!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);
}
});
})();
关于php - Braintree 放置在 UI 字段验证中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30303112/