I have done a similar thing, not exactly sure where you need help from your question but this is my code. I use "RealCardNumber" as a text field and "CardNumber" as a hidden field that gets populated with the encrypted data and sent to the server (same for card code).
$.getScript("https://secure.ewaypayments.com/scripts/eCrypt.min.js")
.done(function (script, textStatus) {
if (eCrypt !== undefined) {
$('#card-details').show(); // Form details initially hidden
$('#card-loading').hide(); // Placeholder div shown while loading the eWay script (which should happen pretty quick)
// Setup the hooks to encrypt the card number once it is submitted
$(".payment-info-next-step-button")[0].onclick = null; // This is the payment button in my scenario
$(".payment-info-next-step-button").click(function () {
var eWayKey = "<Key goes here>"; // Get from Settings ....
try {
$('#CardNumber').val(eCrypt.encryptValue($('#RealCardNumber').val(), eWayKey));
$('#CardCode').val(eCrypt.encryptValue($('#RealCardCode').val(), eWayKey));
// Ready to go .... hook in your normal submit here
} catch (e) {
alert('Sorry there was a problem with submitting the card details securely');
console.log(e);
}
});
} else {
$('#card-loading').hide();
alert('eWay not available - please select a different payment method if available');
}
})
.fail(function (jqxhr, settings, exception) {
$('#card-loading').hide();
alert('eWay not available - please select a different payment method if available');
});