The Storefront's BillingAndReviewFormBean represents the forms the customer sees on the Billing and Review screen. To represent the automatic renewal option, extend the BillingAndReviewFormBean to hold an autoBill property.

1. In the <Source Code Root>/extensions/storefront/ext-storefront/src/main/java/com/extensions/, create a new package named sfweb.formbean.
2. In com.extensions.sfweb.formbean, create a new interface named ExtBillingAndReviewFormBean with the following code:

                     package com.extensions.sfweb.formbean;
   
   import com.elasticpath.sfweb.formbean.BillingAndReviewFormBean;
   
   /**
    * Extension of 'BillingAndReviewFormBean' interface.
    */
   public interface ExtBillingAndReviewFormBean extends BillingAndReviewFormBean {
   	/**
   	 * Returns whether the automatic renewal and billing option is enabled for this form.
   	 *
   	 * @return true if the option is enabled
   	 */
   	boolean isAutoBill();
   
   	/**
   	 * Sets whether the automatic renewal and billing option is enabled for this form.
   	 *
   	 * @param autoBill true to enable the option
   	 */
   	void setAutoBill(boolean autoBill);
   }
                  

3. In com.extensions.sfweb.formbean, create a new package named impl.
4. In com.extensions.sfweb.formbean.impl, create a new class named ExtBillingAndReviewFormBeanImpl and add the following code:

                     package com.extensions.sfweb.formbean.impl;
   
   import com.extensions.sfweb.formbean.ExtBillingAndReviewFormBean;
   
   import com.elasticpath.sfweb.formbean.impl.BillingAndReviewFormBeanImpl;
   
   /**
    * Implementation of 'ExtBillingAndReviewFormBean' interface.
    */
   public class ExtBillingAndReviewFormBeanImpl extends
   		BillingAndReviewFormBeanImpl implements ExtBillingAndReviewFormBean {
   
   	private static final long serialVersionUID = 1L;
   
   	private boolean autoBill;
   
   	/**
   	 * Returns whether the automatic renewal and billing option is enabled for this form.
   	 *
   	 * @return true if the option is enabled
   	 */
   	public boolean isAutoBill() {
   		return this.autoBill;
   	}
   
   	/**
   	 * Sets whether the automatic renewal and billing option is enabled for this form.
   	 *
   	 * @param autoBill true to enable the option
   	 */
   	public void setAutoBill(final boolean autoBill) {
   		this.autoBill = autoBill;
   	}
   }
                  

Next, the value of autoBill must be passed from the form bean to the order. We will do this in two steps. First, we will pass the value from the form bean to the shopping cart when the billing and review form is submitted by overriding the onSubmit method of BillingAndReviewFormController. Then, to make sure that this value gets copied from the shopping cart to the order at checkout time, we will create a custom checkout event handler.

Next, you'll extend the BillingAndReviewFormController's onSubmit method to pass the autoBill value from the BillingAndReviewFormBean to the customer's shopping cart.

1. In the ext-storefront project's com.extensions.sfweb package, create a new package named controller.impl
2. In com.extensions.sfweb.controller.impl create a new class named ExtBillingAndReviewFormControllerImpl and add the following code:

                     package com.extensions.sfweb.controller.impl;
   
   import javax.servlet.http.HttpServletRequest;
   import javax.servlet.http.HttpServletResponse;
   
   import com.extensions.domain.shoppingcart.impl.ExtShoppingCartImpl;
   import com.extensions.sfweb.formbean.ExtBillingAndReviewFormBean;
   
   import org.springframework.validation.BindException;
   import org.springframework.web.servlet.ModelAndView;
   
   import com.elasticpath.sfweb.controller.impl.BillingAndReviewFormControllerImpl;
   
   /**
    * Subclass of 'BillingAndReviewFormControllerImpl'.
    */
   public class ExtBillingAndReviewFormControllerImpl extends
   		BillingAndReviewFormControllerImpl {
   
   	/**
   	 * Handle the address-add form submit.
   	 *
   	 * @param request -the request
   	 * @param response -the response
   	 * @param command -the command object
   	 * @param errors - will be written back in case of any business error happens
   	 * @return return the view
   	 */
   	@Override
   	public ModelAndView onSubmit(final HttpServletRequest request,
   			final HttpServletResponse response, final Object command, // NOPMD
   			final BindException errors) {
   
   		final ExtShoppingCartImpl shoppingCart = (ExtShoppingCartImpl)
   				getRequestHelper().getCustomerSession(request).getShopper().getCurrentShoppingCart();
   
   		final ExtBillingAndReviewFormBean billingAndReviewFormBean = (ExtBillingAndReviewFormBean) command;
   
   		shoppingCart.setAutoBill(billingAndReviewFormBean.isAutoBill());
   		getRequestHelper().getCustomerSession(request).getShopper().setCurrentShoppingCart(shoppingCart);
   
   		return super.onSubmit(request, response, command, errors);
   	}
   }
                  

The BillingAndReviewFormBean comes with some validation out of the box. You can apply the same validation to the ExtBillingAndReviewFormBean by copying the rules from the out of the box Storefront's validation.xml to your extension project.

1. In the ext-storefront project's src/main/resources directory, create a new misc/validation subdirectory.
2. In ext-storefront/src/main/resources/misc/validation, create a new XML file named extensions.xml and add the following XML:

                     <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE form-validation PUBLIC
   		"-//Apache Software Foundation//DTD Commons Validator Rules Configuration 1.1//EN"
   		"http://jakarta.apache.org/commons/dtds/validator_1_1.dtd">
   
   <form-validation>
   	<formset>
   		<form name="extBillingAndReviewFormBeanImpl">
   			<field property="orderPaymentFormBean.cardHolderName"
   					depends="securityCheck,requiredWhen,noLeadingTrailingWhiteSpaces,maxlength">
   				<arg0 key="billingandreview.cardholdername"/commerce-legacy/>
   				<var>
   					<var-name>requiredWhen</var-name>
   					<var-value>selectedPaymentOption == NewCreditCard</var-value>
   				</var>
   				<arg1 name="maxlength" key="${var:maxlength}" resource="false"/commerce-legacy/>
   				<var>
   					<var-name>maxlength</var-name>
   					<var-value>100</var-value>
   				</var>
   			</field>
   			<field property="orderPaymentFormBean.unencryptedCardNumber"
   					depends="securityCheck,requiredWhen,creditCard,noLeadingTrailingWhiteSpaces,maxlength">
   				<arg0 key="billingandreview.cardnumber"/commerce-legacy/>
   				<var>
   					<var-name>requiredWhen</var-name>
   					<var-value>selectedPaymentOption == NewCreditCard</var-value>
   				</var>
   				<arg1 name="maxlength" key="${var:maxlength}" resource="false"/commerce-legacy/>
   				<var>
   					<var-name>maxlength</var-name>
   					<var-value>50</var-value>
   				</var>
   			</field>
   			<field property="orderPaymentFormBean.cvv2Code"
   					depends="securityCheck,requiredWhen,noLeadingTrailingWhiteSpaces,maxlength,integer">
   				<arg0 key="billingandreview.securitycode"/commerce-legacy/>
   				<var>
   					<var-name>requiredWhen</var-name>
   					<var-value>selectedPaymentOption == NewCreditCard</var-value>
   				</var>
   				<arg1 name="maxlength" key="${var:maxlength}" resource="false"/commerce-legacy/>
   				<var>
   					<var-name>maxlength</var-name>
   					<var-value>4</var-value>
   				</var>
   			</field>
   
   			<field property="securityCode" indexedListProperty="existingCreditCards"
   					depends="securityCheck,requiredExistingCardSecurityCode">
   				<arg0 key="billingandreview.securitycode"/commerce-legacy/>
   				<arg1 name="minlength" key="${var:minlength}" resource="false"/commerce-legacy/>
   				<var>
   					<var-name>minlength</var-name>
   					<var-value>3</var-value>
   				</var>
   			</field>
   		</form>
   	</formset>
   </form-validation>
   
                  

Before the Storefront uses your extension classes, you need to overwrite some Java Bean definitions:

• In ext-storefront/src/main/resources/META-INF/conf/ep-storefront-plugin.xml, insert the following beans under the <beans> tag:

                    	<bean id="billingAndReviewFormController"
  			class="com.extensions.sfweb.controller.impl.ExtBillingAndReviewFormControllerImpl"
  			parent="abstractEpFormController">
  		<property name="commandName" value="billingAndReviewFormBean"/commerce-legacy/>
  		<property name="commandClass"
  			value="com.extensions.sfweb.formbean.impl.ExtBillingAndReviewFormBeanImpl"/commerce-legacy/>
  		<property name="sessionForm" value="true"/commerce-legacy/>
  		<property name="validator" ref="defaultBeanValidator"/commerce-legacy/>
  		<property name="checkoutService" ref="checkoutService"/commerce-legacy/>
  		<property name="shoppingCartEventListeners">
  			<list>
  				<bean class="com.elasticpath.sfweb.listeners.SuccessfulCheckoutTagger"/commerce-legacy/>
  			</list>
  		</property>
  		<property name="shoppingItemAssembler" ref="shoppingItemAssembler"/commerce-legacy/>
  		<property name="productInventoryShoppingService" ref="productInventoryShoppingService"/commerce-legacy/>
  		<property name="productSkuLookup" ref="productSkuLookup"/commerce-legacy/>
  		<property name="returnURL" value="paypal-express-checkout.ep"/commerce-legacy/>
  		<property name="termURL" value="payer-authentication-return.ep"/commerce-legacy/>
  		<property name="enrollmentURL" value="payer-authentication-enrollment.ep"/commerce-legacy/>
  		<property name="formView" value="checkout/billingAndReview"/commerce-legacy/>
  		<property name="successView" value="redirect:/receipt.ep"/commerce-legacy/>
  		<property name="continueShoppingPage" value="redirect:/shop.ep"/commerce-legacy/>
  		<property name="settingsReader" ref="settingsService"/commerce-legacy/>
  		<property name="billingAndReviewFormBeanFactory" ref="billingAndReviewFormBeanFactory"/commerce-legacy/>
  	</bean>
  
  	<bean id="billingAndReviewFormBean"
  			class="com.extensions.sfweb.formbean.impl.ExtBillingAndReviewFormBeanImpl"
  			scope="prototype">
  		<property name="orderPaymentFormBean" ref="orderPaymentFormBean"/commerce-legacy/>
  	</bean>
  
  	<bean id="validatorFactory" class="org.springmodules.validation.commons.DefaultValidatorFactory">
  		<property name="validationConfigLocations">
  			<list>
  				<value>classpath:misc/validation/validation.xml</value>
  				<value>classpath:misc/validation/validator-rules.xml</value>
  				<value>classpath*:misc/validation/extensions.xml</value>
  			</list>
  		</property>
  	</bean>
  
                  

Once you have overwritten the Storefront's Java Beans to use your extension classes, you are ready to build your Storefront:

1. With the command prompt, navigate to the ext-storefront project directory and run:

   mvn clean install

2. Navigate to the ext-storefront-webapp project directory and run:

   mvn clean install