Updating storefront assets for Apple Pay on the Web using the Accelerator assets

Apple mandates that any page that contains the Apple Pay button must be served as a secure page (HTTPS). The following options are available to make a page secure:

1. Find a JSP file in the store that is included in every page. For example, in the Aurora starter store, storedir/Common/CommonJSToInclude.jspf is included in every page by default.
2. Open the JSP file for editing.
3. Add the following code to the end of the file:

   
   <%-- APPLEPAY BEGIN --%>
   <link rel="apple-touch-icon" size="120x120" href="images/touch-icon-120x120.png">
   <link rel="apple-touch-icon" size="152x152" href="images/touch-icon-152x152.png">
   <link rel="apple-touch-icon" size="180x180" href="images/touch-icon-180x180.png">
   <script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/ApplePay.js"/>"></script>
   <%-- APPLEPAY END --%>
   

4. Save your changes to the file.

1. Edit your store CSS file to include a new button style that uses the official Apple recommended CSS. For example, in the Aurora starter store, storedir/css/styles.css is the default CSS file.
2. Open the CSS file for editing.
3. Add the following code to the end of the file:

   
   /* -----------------------------------------------------------------------------*/
   /* APPLEPAY BEGIN
   /* -----------------------------------------------------------------------------*/	
   	#applePayShopcartButton {
   		padding-right: 5px;
   	}
   	
   	.apple-pay-button {
   		display: none;		
   		background-color: white;
   		background-image: -webkit-named-image(apple-pay-logo-black);
   		background-position: 50% 50%;
   		background-repeat: no-repeat;
   		background-size: 100% calc(60% + 2px);
   		border: 1px solid black;
   		box-sizing: border-box;
   		height: 30px;
   		margin: 5px auto;
   		min-height: 30px;
   		min-width: 50px;
   		padding: 0px;
   		transition: background-color .15s;
   		width: 100%;
   		border-radius: 5px;
   		/*max-width: 200px;*/
   		cursor: pointer;
   	}
   	
   	.apple-pay-button.visible {
   		display: block;
   	}
   	.apple-pay-button-clear-float {
   		clear: both;
   	}
   	
   	.apple-pay-button:active {
   		background-color: rgb(152, 152, 152);
   	}
   	.apple-pay-checkout {
   		max-width: 120px;
   	}
   	.apple-pay-pdp {
   		max-width: 270px;
   	}
   /* -----------------------------------------------------------------------------*/
   /* APPLEPAY END
   /* -----------------------------------------------------------------------------*/
   

4. Save your changes to the file.

1. Add the Apple Pay button to the shopping cart page in your preferred location. For example, in the Aurora starter store, an ideal location is in the storedir/ShoppingArea/CheckoutSection/SingleShipment/SingleShipmentOrderTotalsSummary.jsp file.
2. Open the JSP file for editing.
3. Add the following code near the end of the file after the final <div>:

   <%-- APPLEPAY BEGIN --%>
   <c:if test="${param.fromPage == 'shoppingCartDisplay'}">
   <div class="apple-pay-button left apple-pay-checkout" id="applePayButtonDiv" onclick="javascript: applePayButtonClicked();"></div>
   <div class="apple-pay-button-clear-float"></div>
   </c:if>
   <%-- APPLEPAY END --%>
   

4. Save your changes to the file.

1. Open the storedir/mobile30/ShoppingArea/ShopcartSection/OrderItemDisplay.jsp file for editing.
2. Locate the following line of code: <%@ include file="../../include/CommonAssetsForHeader.jspf" %>
3. Add the following code before it:

   
   <%-- APPLEPAY BEGIN --%>
   <link rel="apple-touch-icon" size="120x120" href="images/touch-icon-120x120.png">
   <link rel="apple-touch-icon" size="152x152" href="images/touch-icon-152x152.png">
   <link rel="apple-touch-icon" size="180x180" href="images/touch-icon-180x180.png">
   
   <script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/ApplePay.js"/>"></script>
   <%-- APPLEPAY END --%>
   

4. Add the following code before the check out button:

   
   <%-- APPLEPAY BEGIN --%>
   <div class="apple-pay-button left" id="applePayButtonDiv" onclick="javascript: applePayButtonClicked();"></div>
   <%-- APPLEPAY END --%>
   

5. Save your changes to the file.

1. Add the Apple Pay button to the product details page near the section that contains the Add to Cart button. For example, in the Aurora starter store, Widgets_701/com.ibm.commerce.store.widgets.PDP_ShopperActions/ShopperActions_UI.jspf is the default file.
2. Open the JSPF file for editing.
3. Add the following code:
   For a product:

   <%-- APPLEPAY BEGIN --%>
   <div class="clear_float"></div>
   <div class="item_spacer_10px"></div>
   <div class="apple-pay-button left apple-pay-pdp" id="applePayButtonDiv" onclick="javascript: applePayButtonClicked('entitledItem_<c:out value='${catalogEntryID}'/>', 					document.getElementById('quantity_<c:out value='${catalogEntryID}'/>').value);"></div>
   <div class="apple-pay-button-clear-float"></div>
   <%-- APPLEPAY END --%>
   

   For a package:

   <%-- APPLEPAY BEGIN --%>
   <div class="clear_float"></div>
   <div class="item_spacer_10px"></div>
   <div class="apple-pay-button button left apple-pay-pdp" id="applePayButtonDiv" onclick="javascript: applePayButtonClicked(null, document.getElementById('packageQty').value, 				'${catalogEntryID}');"></div>
   <div class="apple-pay-button-clear-float"></div>
   <%-- APPLEPAY END --%>
   

4. Save your changes to the file.

1. Add the Apple Pay button to the mini shopping cart widget before the Go to Cart button. For example, in the Aurora starter store, storedir/Widgets/MiniShopCartDisplay/MiniShopCartContents_UI.jspf is the default file.
2. Open the JSPF file for editing.
3. Add the following code:

   <%-- APPLEPAY BEGIN --%>
   <div class="apple-pay-button left" id="applePayButtonDiv_minishopcart" onclick="javascript: applePayButtonClicked();"></div>
   <%-- APPLEPAY END --%>
   

4. Save your changes to the file.

1. Open the MiniShopCartDisplay.js file for editing.
2. Add the following code in the positionMiniShopCartDropDown method after the wc.widgetWCDialog is created:

   
   /* APPLEPAY BEGIN */
   if (typeof(showApplePayButtons) == "function") {
   showApplePayButtons();
   }
   /* APPLEPAY END */ 
   

3. Save your changes to the file.

<c:set var="knownProtocolData" value="account,expire_month,expire_year,cc_cvc,check_routing_number,installmentOption,CPFNumber" />

<c:set var="knownProtocolData" value="account,expire_month,expire_year,cc_cvc,check_routing_number,installmentOption,CPFNumber,paymentMethod_displayName" />

<c:if test="${paymentInstance.payMethodId !='LineOfCredit'}">
	<c:choose>
		<c:when test="${isBrazilStore and knowProtocolDataItem eq 'installmentOption'}">
			<p><fmt:message bundle="${storeText}" key="${knowProtocolDataItem}"/></p>
			<p><c:out value="${protocolDataMap[knowProtocolDataItem]}"/></p>
		</c:when>
		<c:when test="${isBrazilStore and knowProtocolDataItem eq 'CPFNumber'}">
			<%--set this value for the Boleto form and don't display the CPF since its sensitive info  --%>
			<c:set var="CPFNumber" value="${protocolDataMap[knowProtocolDataItem]}"/>
		</c:when>
		<c:when test="${knowProtocolDataItem eq 'paymentMethod_displayName'}">
			<p><fmt:message bundle="${storeText}" key="PAYMENT_NUMBER_OF_METHODS"/></p>
			<p><c:out value="${protocolDataMap[knowProtocolDataItem]}"/></p>
		</c:when>
		<c:otherwise> <%-- Output AuroraESite store text  --%>
			<p><fmt:message bundle="${storeText}" key="${knowProtocolDataItem}"/></p>
			<p><c:out value="${protocolDataMap[knowProtocolDataItem]}"/></p>
		</c:otherwise>
	</c:choose>
</c:if>