Programmatically: How to create custom Magento checkout fields

Create a new module: Create a new directory for your module in app/code/local and create a etc/module.xml file with the following content:

	<config>
    <modules>
        <YourModule_Name>
            <version>1.0.0</version>
        </YourModule_Name>
    </modules>
	</config>
	

Replace YourModule_Name with your actual module name.

Create a custom form element: In your module, create a new directory etc/elements and create a PHP file CustomField.php with the following content:

	class YourModule_Name_Model_Form_Element_CustomField extends Mage_Core_Model_Form_Element_Abstract
	{
    public function __construct($attributes = array())
    {
        parent::__construct($attributes);
        $this->setType('text');
        $this->setFormCode('custom_field');
        $this->setLabel('Custom Field');
    }
	}
	

This code creates a new form element called custom_field with the type text and label Custom Field.

Register the custom form element: In your etc/modules/YourModule_Name.xml file, add the following code:

	<config>
    <modules>
        <YourModule_Name>
            <global>
                <models>
                    <form_element>
                        <yourmodule_name_custom_field translate="label" module="yourmodule_name">
                            <class>yourmodule_name/Form_Element_CustomField</class>
                        </yourmodule_name_custom_field>
                    </form_element>
                </models>
            </global>
        </YourModule_Name>
    </modules>
	</config>
	

This code registers the custom form element in Magento's configuration.

Add the custom field to the checkout form: In your etc/config.xml file, add the following code:

	<config>
    <modules>
        <YourModule_Name>
            <global>
                <fieldsset>
                    <checkout_payment_info>
                        <field name="custom_field" formElement="yourmodule_name/custom_field"/>
                    </checkout_payment_info>
                </fieldsset>
            </global>
        </YourModule_Name>
    </modules>
	</config>
	

This code adds the custom field to the checkout_payment_info fieldset.

Display the custom field in the checkout: In your theme's app/design/frontend/yourtheme/template/checkout/form/checkout.phtml file, add the following code:

	echo $this->escapeHtml($this->getLayout()->createBlock('checkout/form_renderer')->setTemplate('yourmodule_name/checkout/form/custom_field.phtml')->toHtml());
	

Create a new file

app/design/frontend/yourtheme/template/yourmodule_name/checkout/form/custom_field.phtml and add the following code:

	echo $this->getForm()->getElement('custom_field')->getHtml();
	

This code displays the custom field in the checkout form.

That's it! You have now created a custom checkout field programmatically in Magento.

Here is the complete code:

app/code/local/YourModule_Name/etc/module.xml

	<config>
    <modules>
        <YourModule_Name>
            <version>1.0.0</version>
        </YourModule_Name>
    </modules>
	</config>
	

app/code/local/YourModule_Name/Model/Form/Element/CustomField.php

	class YourModule_Name_Model_Form_Element_CustomField extends Mage_Core_Model_Form_Element_Abstract
    {
    public function __construct($attributes = array())
    {
        parent::__construct($attributes);
        $this->setType('text');
        $this->setFormCode('custom_field');
        $this->setLabel('Custom Field');
    }
	}
	

app/code/local/YourModule_Name/etc/modules/YourModule_Name.xml

	<config>
    <modules>
        <YourModule_Name>
            <global>
                <models>
                    <form_element>
                        <yourmodule_name_custom_field translate="label" module="yourmodule_name">
                            <class>yourmodule_name/Form_Element_CustomField</class>
                        </yourmodule_name_custom_field>
                    </form_element>
                </models>
            </global>
        </YourModule_Name>
    </modules>
	</config>
	

app/code/local/YourModule_Name/etc/config.xml

	<config>
    <modules>
        <YourModule_Name>
            <global>
                <fieldsset>
                    <checkout_payment_info>
                        <field name="custom_field" formElement="yourmodule_name/custom_field"/>
                    </checkout_payment_info>
                </fieldsset>
            </global>
        </YourModule_Name>
    </modules>
	</config>
	

app/design/frontend/yourtheme/template/checkout/form/custom_field.phtml

	echo $this->getForm()->getElement('custom_field')->getHtml()
	

Remember to replace yourtheme with your actual theme name and yourmodule_name with your actual module name.