Actualización de elementos de escaparate para Apple Pay en la web utilizando elementos de Aurora

Actualice los elementos de escaparate para incluir la funcionalidad y los botones de pago de Apple Pay en la web cuando sea necesario.

Antes de empezar

  1. Conocer los flujos secuenciales de Apple Pay en la web para familiarizarse con la forma de interactuar de la tienda de inicio Aurora con Apple Pay en la web: Flujos secuenciales de Apple Pay en la web.
  2. Realice la siguiente tarea: Habilitación de Apple Pay en la web.
  3. Comprenda el código Apple Pay en la carpeta Widgets_801 que la tienda utilizará.
    Los elementos siguientes contienen nuevos archivos JSP y JavaScript que permiten a la tienda de inicio Aurora llamar a la funcionalidad de Apple Pay en la web desde el escaparate:
    crs-web\WebContent\Widgets_801\Common\ApplePay\GetApplePayMerchantInfo.jsp
    Este archivo JSP se correlaciona con una vista de Struts que llama a un servicio REST del lado del servidor para recuperar el identificador de comerciante para la tienda actual que debe utilizarse para iniciar la sesión de Apple Pay. La información de comerciante debería haberse especificado anteriormente en las tablas MERCHANT relacionadas.
    crs-web\WebContent\Widgets_801\Common\ApplePay\GetOrderInfoForApplePay.jsp
    Este archivo JSP se correlaciona con una vista de Struts que llama a varios servicios REST del lado del servidor para construir el objeto JSON de solicitud de pago que es necesario para iniciar una sesión de hoja de pago de Apple. Contiene información como el total del pedido, las descripciones de líneas de detalle detalladas para descuentos, envío e impuestos, dirección de envío y facturación y métodos de envío aplicables.
    crs-web\WebContent\Widgets_801\Common\ApplePay\GetCSRFAuthToken.jsp
    Este archivo JSP recupera la señal de autorización de HCL Commerce de la sesión de comprador actual. Esto se recupera utilizando AJAX, ya que AJAX es necesario para ejecutar servicios protegidos desde páginas de navegación almacenadas en memoria caché. Es decir, la señal de autorización no puede utilizarse en HTML DOM de páginas de navegación almacenadas en memoria caché.
    crs-web\WebContent\Widgets_801\Common\javascript\ApplePay.js
    Este archivo JavaScript facilita toda la interacción de cliente y de lado del servidor entre HCL Commerce y Apple Pay. Contiene toda la lógica de negocio para visualizar el botón de Apple Pay (si se permite), facilita el inicio de la sesión de la hoja de pago de Apple Pay e implementa todos los métodos de devolución de llamada de JavaScript necesarios como se indica en la documentación de Apple Pay en la web.
    crs-web\WebContent\WEB-INF\struts-config-widgets.xml
    Este archivo Struts se ha actualizado para añadirle la definición de vista para los nuevos archivos JSP para Apple Pay.
    crs-web\WebContent\WEB-INF\spring\widgets-views.xml
    Este archivo Spring se ha actualizado para añadirle la definición de vista para los nuevos archivos JSP para Apple Pay.

Por qué y cuándo se efectúa esta tarea

Adición de Apple Pay en la web al escaparate.

Puede añadir el botón de Apple Pay en cualquier lugar que requiera de la tienda, incluso en las páginas fuera del ámbito de este código de ejemplo de Aurora. Esto se efectúa llamando a las funciones añadidas de los ayudantes de Apple Pay desde el escaparate. En el ejemplo proporcionado y los siguientes pasos, el botón de Apple Pay se añade a la página de detalles del producto, la página del carro de la compra y el mini carro de la compra.

Las instrucciones siguientes se basan en código de ejemplo procedente de los elementos de la tienda Aurora.

Procedimiento

  1. Adición del código de ayuda de la integración de Apple Pay en la web a todas las páginas de la tienda.
    1. Busque un archivo JSP en la tienda que se incluye en cada página. Por ejemplo, en la tienda de inicio Aurora, storedir\Common\CommonJSToInclude.jspf está incluida en cada página de forma predeterminada.
    2. Abra el archivo JSP para editarlo.
    3. Busque el archivo mencionado en la tienda Aurora y busque el código con la etiqueta APPLEPAY BEGIN y APPLEPAY END. Añada el mismo código al archivo de su tienda.
    4. Guarde los cambios efectuados en el archivo.
  2. Adición del estilo de botón de Apple Pay oficial a la CSS de la tienda.
    1. Edite el archivo CSS de la tienda de modo que incluya un nuevo botón de estilo que utilice la CSS recomendada por Apple. Por ejemplo, en la tienda de inicio Aurora, storedir\css\styles.css es el archivo CSS predeterminado.
    2. Abra el archivo CSS para editarlo.
    3. Busque el archivo mencionado en la tienda Aurora y busque el código con la etiqueta APPLEPAY BEGIN y APPLEPAY END. Añada el mismo código al archivo de su tienda.
    4. Guarde los cambios efectuados en el archivo.
  3. Adición del botón de Apple Pay a la página del carro de la compra.
    1. Añada el botón de Apple Pay a la página del carro de la compra en su ubicación preferida. Por ejemplo, en la tienda de inicio Aurora, hay una ubicación ideal en el archivo storedir\ShoppingArea\CheckoutSection\SingleShipment\SingleShipmentOrderTotalsSummary.jsp.
    2. Abra el archivo JSP para editarlo.
    3. Busque el archivo mencionado en la tienda Aurora y busque el código con la etiqueta APPLEPAY BEGIN y APPLEPAY END. Añada el mismo código al archivo de su tienda.
    4. Guarde los cambios efectuados en el archivo.
  4. Adición del botón de Apple Pay a la página del carro de la compra del dispositivo móvil.
    1. Añada el botón de Apple Pay a la página del carro de la compra móvil en su ubicación preferida. Por ejemplo, en la tienda de inicio Aurora, hay una ubicación ideal en el archivo storedir\mobile30\ShoppingArea\ShopcartSection\OrderItemDisplay.jsp.
    2. Abra el archivo JSP para editarlo.
    3. Busque el archivo mencionado en la tienda Aurora y busque el código con la etiqueta APPLEPAY BEGIN y APPLEPAY END. Añada el mismo código al archivo de su tienda.
    4. Guarde los cambios efectuados en el archivo.
  5. Adición del botón de Apple Pay a la página de detalles del producto.
    1. Añada el botón de Apple Pay a la página de detalles del producto cerca de la sección que contiene el botón Añadir al carro. Por ejemplo, en la tienda de inicio Aurora, Widgets_801\com.ibm.commerce.store.widgets.PDP_ShopperActions\ShopperActions_UI.jspf es el archivo CSS predeterminado.
    2. Abra el archivo JSPF para editarlo.
    3. Busque el archivo mencionado en la tienda Aurora y busque el código con la etiqueta APPLEPAY BEGIN y APPLEPAY END. Añada el mismo código al archivo de su tienda.
    4. Guarde los cambios efectuados en el archivo.
  6. Adición del botón de Apple Pay al widget mini carro de la compra.
    1. Añada el botón de Apple Pay en el widget mini carro de la compra antes del botón Ir al carro de la compra. Por ejemplo, en la tienda de inicio Aurora, storedir\Widgets\MiniShopCartDisplay\MiniShopCartContents_UI.jspf es el archivo predeterminado.
    2. Abra el archivo JSPF para editarlo.
    3. Busque el archivo mencionado en la tienda Aurora y busque el código con la etiqueta APPLEPAY BEGIN y APPLEPAY END. Añada el mismo código al archivo de su tienda.
    4. Guarde los cambios efectuados en el archivo.
  7. Visualización del botón de Apple Pay en el área de renovación del mini carro de la compra. Este paso es necesario porque el botón de Apple Pay debe cargarse en la renovación del widget, en lugar de al cargar la página.
    1. Abra el archivo MiniShopCartDisplay.js para editarlo.
    2. Busque el archivo mencionado en la tienda Aurora y busque el código con la etiqueta APPLEPAY BEGIN y APPLEPAY END. Añada el mismo código al archivo de su tienda.
    3. Guarde los cambios efectuados en el archivo.

Qué hacer a continuación

Vaya al escaparate y asegúrese de que los botones de Apple Pay se visualizan dondequiera que los coloque.