2017-10-16 86 views
1

我在我的Rails應用程序中使用braintree。整合使用寶石'braintree'。我用這是這樣實現的脫入UI:Rails braintree捕獲輸入框聚焦的錯誤

braintree.dropin.create({ 
authorization: client_token, 
container: '#bt-dropin' 
}, function (createErr, instance) { 
form.addEventListener('submit', function (event) { 
    event.preventDefault(); 
    instance.requestPaymentMethod(function (err, payload) { 
    if (err) { 
     console.log('Error', err); 
     return; 
    } 
    // Add the nonce to the form and submit 
    document.querySelector('#nonce').value = payload.nonce; 
    form.submit(); 
    }); 
}); 
}); 

這工作得很好。但是,如果光標從輸入框移出,我需要捕獲錯誤並禁用提交按鈕。有沒有解決方案? 請幫忙。

+0

你能提供你的問題多一點的背景下,例如,如果你正在尋找內投遞或表單本身,或外部的插入式捕獲錯誤。如果是這樣,我可以提供有關如何禁用提交按鈕的示例,直到可以提交嵌入式表單。 – ThinkAboutIt

+0

假設光標在輸入框(CVV)內,並與出CVV輸入任何內容,我搬到期滿date..so錯誤將在CVV來顯示(請填寫一個CVV)。所有其他輸入框類似。當光標從輸入框移出時,我必須捕捉錯誤。 –

+0

Shahana,謝謝你的澄清。 DropIn無法實現此級別的控制。我建議,以獲得最大程度的控制使用布倫特裏的託管領域。你最接近的解決方案是基於付款方式是否是請求能夠動態地啓用或禁用提交按鈕 – ThinkAboutIt

回答

1

完全披露:我在布倫特裏工作。如果您還有其他問題,請隨時聯繫 support

雖然這一解決方案,專門不能使用脫入實現,我會建議,動態地啓用或根據付款方式是否爲可請求禁用您的提交按鈕。請參閱下面的example

var submitButton = document.querySelector('#submit-button'); 

braintree.dropin.create({ 
    authorization: 'client_token', 
    container: '#bt-dropin' 
}, function (err, dropinInstance) { 
    submitButton.addEventListener('click', function() { 
    dropinInstance.requestPaymentMethod(function (err, payload) { 
     document.querySelector('#nonce').value = payload.nonce; 
    form.submit(); 
    }); 
    }); 

    if (dropinInstance.isPaymentMethodRequestable()) { 
    // This will be true if you generated the client token 
    // with a customer ID and there is a saved payment method 
    // available to tokenize with that customer. 
    submitButton.removeAttribute('disabled'); 
    } 

    dropinInstance.on('paymentMethodRequestable', function (event) { 
    console.log(event.type); // The type of Payment Method, e.g 'CreditCard', 'PayPalAccount'. 
    console.log(event.paymentMethodIsSelected); // true if a customer has selected a payment method when paymentMethodRequestable fires 

    submitButton.removeAttribute('disabled'); 
    }); 

    dropinInstance.on('noPaymentMethodRequestable', function() { 
    submitButton.setAttribute('disabled', true); 
    }); 
}); 

更多的控制,我建議您查看我們Hosted Fields解決方案。