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

Update your storefront assets to include the Apple Pay on the Web functionality and payment buttons where required.

Before you begin

  1. Understand the Apple Pay on the Web sequential flows to get familiar with how the Aurora starter store interacts with Apple Pay on the Web: Apple Pay on the Web sequential flows.
  2. Complete the following task: Enabling Apple Pay on the Web.
  3. Understand the Apple Pay code in the Widgets_801 folder that will be used by your store.
    The following assets contain new JSP and JavaScript files that enable the Aurora starter store to call out to Apple Pay on the Web functionality from the storefront:
    crs-web\WebContent\Widgets_801\Common\ApplePay\GetApplePayMerchantInfo.jsp
    This JSP file maps to a Struts view that calls a server-side REST service to retrieve the merchant identifier for the current store that should be used for starting the Apple Pay session. The merchant information should have been previously entered into the MERCHANT related tables.
    crs-web\WebContent\Widgets_801\Common\ApplePay\GetOrderInfoForApplePay.jsp
    This JSP file maps to a Struts view that calls several server-side REST services to construct the payment request JSON object that is required to start an Apple Pay payment sheet session. It contains information such as the order total, detailed line-item descriptions for discounts, shipping and taxes, shipping and billing address, and applicable shipping methods.
    crs-web\WebContent\Widgets_801\Common\ApplePay\GetCSRFAuthToken.jsp
    This JSP file retrieves the current shopper session's HCL Commerce authorization token. This is retrieved by using AJAX, as AJAX is required to run protected services from cached browsing pages. That is, the authorization token cannot be used in the HTML DOM on cached browsing pages.
    crs-web\WebContent\Widgets_801\Common\javascript\ApplePay.js
    This JavaScript file facilitates all the client and server-side interaction between HCL Commerce and Apple Pay. It contains all the business logic to display the Apple Pay button (if allowed), it facilitates starting the Apple Pay payment sheet session, and it implements all the required JavaScript call-back methods as instructed in the Apple Pay for the Web documentation.
    crs-web\WebContent\WEB-INF\struts-config-widgets.xml
    This Struts file was updated to have the view definition for the new JSP files added for Apple Pay.
    crs-web\WebContent\WEB-INF\spring\widgets-views.xml
    This Spring file was updated to have the view definition for the new JSP files added for Apple Pay.

About this task

Adding Apple Pay on the Web to your storefront.

You can add the Apple Pay button anywhere that you require in the store, even pages outside the scope of the Aurora sample code. This is done by calling the added functions from the Apple Pay helpers from your storefront. In the provided sample and following steps, the Apple Pay button is added the product details page, the shopping cart page, and the mini shopping cart.

The following instructions rely on sample code from the Aurora store assets.

Procedure

  1. Adding Apple Pay on the Web integration helper code to all store pages.
    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. Find the mentioned file in the Aurora store and search for the code that is tagged APPLEPAY BEGIN and APPLEPAY END. Add the same code to your store file.
    4. Save your changes to the file.
  2. Adding the official Apple Pay button styling to the store CSS.
    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. Find the mentioned file in the Aurora store and search for the code that is tagged APPLEPAY BEGIN and APPLEPAY END. Add the same code to your store file.
    4. Save your changes to the file.
  3. Adding the Apple Pay button to the shopping cart page.
    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. Find the mentioned file in the Aurora store and search for the code that is tagged APPLEPAY BEGIN and APPLEPAY END. Add the same code to your store file.
    4. Save your changes to the file.
  4. Adding the Apple Pay button to the mobile shopping cart page.
    1. Add the Apple Pay button to the mobile shopping cart page in your preferred location. For example, in the Aurora starter store, an ideal location is in the storedir\mobile30\ShoppingArea\ShopcartSection\OrderItemDisplay.jsp file.
    2. Open the JSP file for editing.
    3. Find the mentioned file in the Aurora store and search for the code that is tagged APPLEPAY BEGIN and APPLEPAY END. Add the same code to your store file.
    4. Save your changes to the file.
  5. Adding the Apple Pay button to the product details page.
    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_801\com.ibm.commerce.store.widgets.PDP_ShopperActions\ShopperActions_UI.jspf is the default file.
    2. Open the JSPF file for editing.
    3. Find the mentioned file in the Aurora store and search for the code that is tagged APPLEPAY BEGIN and APPLEPAY END. Add the same code to your store file.
    4. Save your changes to the file.
  6. Adding the Apple Pay button to the mini shopping cart widget.
    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. Find the mentioned file in the Aurora store and search for the code that is tagged APPLEPAY BEGIN and APPLEPAY END. Add the same code to your store file.
    4. Save your changes to the file.
  7. Displaying the Apple Pay button in the mini shopping cart refresh area. This step is required as the Apple Pay button must be loaded on widget refresh, instead of on page load.
    1. Open the MiniShopCartDisplay.js file for editing.
    2. Find the mentioned file in the Aurora store and search for the code that is tagged APPLEPAY BEGIN and APPLEPAY END. Add the same code to your store file.
    3. Save your changes to the file.

What to do next

Go to the storefront and ensure that Apple Pay buttons are displayed wherever you placed them.