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

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


Before beginning

  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: Enable Apple Pay on the Web.

  3. Understand the Apple Pay code in the Widgets_801 folder that will be used by the 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 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 WebSphere 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 WebSphere 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.


Task info

Adding Apple Pay on the Web to the storefront.

We 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 the 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 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 the store file.

    4. Save our changes to the file.

  2. Adding the official Apple Pay button styling to the store CSS.

    1. Edit the 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 the store file.

    4. Save our 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 the store file.

    4. Save our 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 the store file.

    4. Save our 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 containing 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 the store file.

    4. Save our 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 the store file.

    4. Save our 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 the store file.

    3. Save our changes to the file.


What to do next

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