Improving the Magento one-page-checkout:: Adding some useability- Masks, etc.

Question

Just developed a payment module and it works fine with my bank. It consists the regular elements like text-input for credit card number and the cvc etc.

Then decided to add some functionality and usability spice. JQuery.Payment is a simple and yet seamless extension. I have added it to head block, it's loaded successfully.

But I never succeeded on attaching it to the input.

jQuery('#pos_cc_number').payment('formatCardNumber');

With or without document.ready; no luck. Then I have pasted above JQuery statement to the Chrome Console and everything worked smoothly.

Also tested JQuery click events and those were not attached to input elements too. If I could make it work, planning to use credit-card-dimmer also.

I really searched hard but apparently missing something. Any help would be appreciated.

Thanks!

PS: Tested on Magento CE 1.7.0.2 - Classic OnePage-Checkout.

Answer 1

By default Magento uses the one page checkout. When using the one page checkout, only the first checkout step is loaded on document ready. The remainder get loaded by AJAX as you proceed through the steps, so the element you're looking for isn't there when you're looking for it.

It looks like the Payment object in opcheckout.js has a handy addAfterInitFunction method you can use to run whatever code you need after the payment step is loaded.