Customizing the store pages

Edit the sample files provided to customize the store pages for the Boleto payment method.

About this task

The sample code does not support reprinting a Boleto from a customer's order history. Customers need to place their order again if they do not print the Boleto or if they lose their Boleto.

Procedure

Download the jsp file used to get the parameters from merchant configuration and the payment protocol data, ConfigureBoletoInterface.jspf .
Download to the following location:
- WC_eardir/Stores.war/yourstore/Snippets/EDP/PaymentMethods
- workspace_dir/wc/Stores.war/WebContent/yourstore/Snippets/EDP/PaymentMethods
Customize the OrderShippingBillingConfirmationPage.jsp file located in the following path:
- WC_eardir/Stores.war/yourstore/ShoppingArea/CheckoutSection
- workspace_dir/wc/Stores.war/WebContent/yourstore/Snippets/ShoppingArea/CheckoutSection
Find the following code snippet:
```
<c:set var="hidePayInStoreEmailAddress" value="true"/>
```
and append the following:
```
<c:set var="isOrderConfirmationPage" value="true" />
```

Customize the CheckoutPaymentAndBillingAddressSummary.jspf file to add the Boleto Print button.

Open the CheckoutPaymentAndBillingAddressSummary.jspf file in the following path:
- WC_eardir/Stores.war/yourstore/ShoppingArea/CheckoutSection
- workspace_dir/wc/Stores.war/WebContent/yourstore/Snippets/ShoppingArea/CheckoutSection

Find the following code snippet:

<c:if test="${paymentInstance.paymentMethod.paymentMethodName == 'PayInStore'}">
      <c:set var="isPayInStore" value="true"/>
</c:if>

and append the following:

<c:if test="${paymentInstance.paymentMethod.paymentMethodName == 'BoletoBancario'}">
       <c:set var="isBoletoBancario" value="true"/>
       <c:set var="boleto_number" value="${paymentInstance.uniqueID}"/>
</c:if>

Find the following code snippet:

<c:choose>
   <c:when test = "${paymentInstance.amount.value == null}">
      <fmt:message key="MO_NOT_AVAILABLE" bundle="${storeText}"/>
   </c:when>
   <c:otherwise>
      <fmt:formatNumber value="${paymentInstance.amount.value}" type="currency" maxFractionDigits="${currencyDecimal}" currencySymbol="${CurrencySymbolToFormat}"/>
      <c:out value="${CurrencySymbol}"/>
   </c:otherwise>
</c:choose>
</p>

and append the following:

<c:if test="${isOrderConfirmationPage && isBoletoBancario}" > <!--isOrderConfirmationPage && isBoletoBancario-->
<!-- if payment method is Boleto bancario then Configure the Boleto Inetrface for Generating the Boleto Form -->
<%@ include file="../../Snippets/EDP/PaymentMethods/ConfigureBoletoInterface.jspf"%>
<!-- display print boleto button -->
<span class="primary_button button_fit" >
    <span class="button_container">
        <span class="button_bg">
            <span class="button_top">
                <span class="button_bottom">
                    <p>
                         <a href="javascript:print_boleto('${storeId}','${drawee_name}','${drawee_address}','${CPFNumber}','${drawee_state}','${drawee_city}','${drawee_cep}','${due_amount}','${order_number}','${boleto_number}','${dueDate}','${date_boleto_generation}','${date_boleto_processing}');" id="WC_OrderShippingBillingConfirmationPage_Print_Boleto_Link" >
<font color="white"><fmt:message key="PRINT_BOLETO" bundle="${storeText}"/></font>
                         </a>
                    </p>
                </span>
            </span>
        </span>
    </span>
</span>
</c:if>

Find the following code snippet:

<c:forEach items="${personAddresses.contact}" var="contact">
<c:if test="${contact.contactInfoIdentifier.uniqueID eq billingAddressId}" >

and append the following:

<c:if test="${isBoletoBancario}" >
<!-- if payment method is Boleto bancario then Configure the Boleto Inetrface for Generating the Boleto Form -->
<%@ include file="../../Snippets/EDP/PaymentMethods/ConfigureBoletoInterface.jspf"%>
</c:if>

Write the Java script used by the code in step 2:
Create the file PrintBoleto.js in the following path:
- WC_eardir/Stores.war/yourstore/javascript/CheckoutArea
- workspace_dir/wc/Stores.war/WebContent/yourstore/javascript/CheckoutArea
Implement print_boleto method used in step 2.
Save the BoletoBancarioFormDisplay.jsp file, which is used to generate the Boleto form, to the following path:
- WC_eardir/Stores.war/yourstore/Snippets/EDP/PaymentMethods
- workspace_dir/wc/Stores.war/WebContent/yourstore/Snippets/EDP/PaymentMethods

Configure BoletoBancarioFormDisplay.jsp to the struts-config-ext.xml of the store.

Open the struts-config-ext.xml in the following path:
- WC_eardir/Stores.war/WEB-INF
- workspace_dir/wc/Stores.war/WebContent/WEB-INF

Find the following code snippet:

<action path="/StandardVisa" type="com.ibm.commerce.struts.BaseAction"/>

and append the following:

<action path="/BoletoBancarioFormDisplayView" type="com.ibm.commerce.struts.BaseAction"> 
     <set-property property="https" value="storeId:1"/> 
</action>

where the storeId is the ID of the store in which the Boleto payment method will be used.

Find the following code snippet:

<forward className="com.ibm.commerce.struts.ECActionForward" name="StandardVisa/storeId" path="/Snippets/EDP/PaymentMethods/StandardVisa.jsp"/>

and append the following:

<forward className="com.ibm.commerce.struts.ECActionForward" name="BoletoBancarioFormDisplayView/storeId" path="/Snippets/EDP/PaymentMethods/BoletoBancarioFormDisplay.jsp"/>

where the storeId is the ID of the store in which the Boleto payment will be used.

Copy the graphics files from the jBoleto.jar file you downloaded when you customized the payment method.
These graphics files are used when rendering the Boleto form.
The graphics files are located in the jBoleto.jar\img directory.
1. Copy templateHTML.gif to the following path:
  - WC_eardir/Stores/WebContent/img
  - workspace_dir/wc/Stores.war/WebContent/img
2. Copy 341.gif to the following path:
  - WC_eardir/Stores/WebContent/img_jboleto
  - workspace_dir/wc/Stores.war/WebContent/img_jboleto

Add the multiple language messages to the properties file of the store.

Open the storetext_en_US.properties and storetext.properties in the following path:

WC_eardir/Stores.war/WEB-INF/classes/yourstore
workspace_dir/wc/Stores.war/WebContent/WEB-INF/classes/yourstore

where yourstore is the name of the store you want to use the Boleto payment method with.

Add the following:

#Boleto Payment
PRINT_BOLETO=Print Boleto
BOLETO_BANCARIO_PAYMENT_METHOD_DESCRIPTION=Boleto Bancario is a leading payment choice in Brazil.  Customers simply need to visit one of the convenient Boleto Bancario locations in their area, and pay with cash or any other accepted method.  The order is processed quickly and efficiently within 5 days.

Open the storetext_pt_BR.properties in the same path and add the following:

#Boleto Payment
    PRINT_BOLETO=Imprimir Boleto
    BOLETO_BANCARIO_PAYMENT_METHOD_DESCRIPTION=O Boleto Bancário é uma  opção de pagamento importante no Brasil.  Basta que os clientes visitem um dos locais que aceitam pagamento de Boleto Bancário nas suas proximidades, e paguem em dinheiro ou qualquer outra forma aceitável.  O pedido é processado de maneira rápida e eficaz dentro de 5 dias.