For the customer to see and select the automatic renewal option, you'll add a checkbox and description for the automatic renewal option to the order form page.

1. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/checkout/billingAndReview.vm, locate the following block of code:

       <form action="billing-and-review.ep" method="post" name="billingAndReviewFormBean">
   	#if($sesShoppingCart.getTotal().floatValue() > 0 || $sesShoppingCart.hasRecurringPricedShoppingItems())
               <div id="checkout-review-payment">
                   <fieldset>
                   <legend>#springMessage("billingandreview.paymenttitle")</legend>
   

2. Insert the following Velocity code after the above code:

   <div style="border: 1px solid gray; padding: 5px; margin-bottom: 10px;">
   #springFormCheckboxes("billingAndReviewFormBean.autoBill" $unlabeledTrueCheckboxItem "" "")
   #springMessage("billingandreview.autoBillLabel") 
   </div>
   

3. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/checkout/billingAndReview.properties, add the following property:

   billingandreview.autoBillLabel=Renew my subscription automatically and bill me
   

   This property stores the automatic renewal option's description.

After a customer places an order, they see the order summary page. For the customer to see if they have selected the automatic renewal option, you'll add a message to the order summary page.

1. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/checkout/checkoutMacros.vm, locate the following block of code:

   ## Review order billing
   <div id="checkout-review-order-details-billing">
     <fieldset>
       #set ($billingAddress = $order.getBillingAddress())
       <legend>#springMessage("receipt.billingAddress")</legend>
       
       #if ($order.orderPayment.paymentMethod == "PAYPAL_EXPRESS")
       <div style="margin-bottom: 1.5em;">PayPal Account: $order.orderPayment.email</div>
       <div class="via">
         <strong>#springMessage("receipt.paymentMethod")</strong>
       </div>
       <div style="line-height: 2em;">
         PayPal &#xa0;<img style="vertical-align: middle;" src="https://www.paypal.com/en_US/i/logo/PayPal_mark_37x23.gif"/commerce-legacy/>
       </div>
       #else
       <div>$!billingAddress.firstName $!billingAddress.lastName<br />
         $!billingAddress.street1<br />
         #if ($billingAddress.street2 && $billingAddress.street2.length() > 0)
           $!billingAddress.street2<br />
         #end
         $!billingAddress.city
         #if($billingAddress.subCountry)$!billingAddress.subCountry,#end $!billingAddress.zipOrPostalCode<br />
         $ctxCountries.getCountryDisplayName($!billingAddress.country, ${sesShoppingCart.locale})<br />
         $!billingAddress.phoneNumber<br></div>
       #if($order.orderPayment)
       <div class="via">
         <strong>#springMessage("receipt.paymentMethod")</strong>
       </div>
       <div>#springMessage($order.orderPayment.paymentMethod.propertyKey)<br />
         #if ($order.orderPayment.paymentMethod == "CREDITCARD")
           $order.orderPayment.cardType: $order.orderPayment.maskedCardNumber #springMessage("orderDetails.expiry") $order.orderPayment.expiryMonth/$order.orderPayment.expiryYear.substring(2,4)
         #end
       </div>
       #end
       #end
   

2. Insert the following Velocity code after the above code:

   <div>
       <strong>#springMessage("receipt.autoBill")</strong>
   </div>
   <div>
       $order.autoBill
   </div>
   

3. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/checkout/receipt.properties, add the following property:

   receipt.autoBill=Bill me automatically?
   

   This property stores the message the order summary page displays.

After a customer places an order, Elastic Path sends them a confirmation email with the order's details. For customers to see if they have selected the automatic renewal option in the confirmation email, you'll need to modify the confirmation email's Velocity template:

1. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/email/orderConf.html.vm, locate the following block of code:

   ##empty lines
   <tr align="right"><td></td><td></td></tr>
   <tr align="right"><td></td><td></td></tr>
   <tr align="right"><td></td><td></td></tr>
   ##
   <tr align="right">
   <td><strong>#emailMessage("email.orderConf.grandtotal"):</strong></td>
   <td class="total"><strong>#displayPriceForLocale($order.getTotalMoney(), $order.locale)</strong></td>
   </tr>
   

2. Insert the following Velocity code after the above code:

   <tr align="right">
       <td>#emailMessage("email.orderConf.autoBill"):</td>
       <td>$order.autoBill</td>
   </tr>
   

   Note:

   Each HTML email template has a corresponding text email template. For this tutorial, we'll skip that step, but on a production system, you should update orderConf.txt.vm with the appropriate changes as well.

3. In <Source Code Root>/platform/stores/snapitup-assets/src/main/assets/themes/electronics/default/templates/velocity/email/email.properties, add the following property:

   email.orderConf.autoBill=When your subscription expires, we will renew it and bill you automatically.