Announcement: You can find the guides for Commerce 7.5 and later on the new Elastic Path Documentation site. This Developer Center contains the guides for Commerce 6.13.0 through 7.4.1.Visit new site

This version of Elastic Path Commerce is no longer supported or maintained. To upgrade to the latest version, contact your Elastic Path representative.

4 - Extending the Storefront's BillingAndReviewFormBean

4 - Extending the Storefront's BillingAndReviewFormBean

After extending the Commerce Engine core to support automatic renewal, you can extend the Storefront's form beans to enable customers to select the automatic renewal option.

Extending the BillingAndReviewFormBean

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;
    	}
    }
                   

Passing the autoBill from the form bean to Order

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);
    	}
    }
                   

Validating the ExtBillingAndReviewFormBean

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>
    
                   

Replacing Storefront Java Beans

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>
    
                    

Building the Storefront

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