Mise à jour des ressources de vitrine pour Apple Pay sur le Web à l'aide des ressources Aurora

Mettez à jour vos ressources de vitrine pour y inclure la fonctionnalité Apple Pay sur le Web et les boutons de paiement si nécessaire.

Avant de commencer

  1. Comprendre les flux séquentiels d'Apple Pay sur le Web pour vous familiariser avec la façon dont le magasin type Aurora interagit avec Apple Pay sur le Web : Flux séquentiels Apple Pay sur le Web.
  2. Effectuez la tâche suivante : Activation d'Apple Pay sur le Web.
  3. Prenez connaissance du code Apple Pay dans le dossier Widgets_801 qui sera utilisé par votre magasin.
    Les ressources suivantes contiennent les nouveaux fichiers JSP et JavaScript qui permettent au magasin type Aurora d'appeler la fonctionnalité Apple Pay sur le Web à partir de la vitrine :
    crs-web\WebContent\Widgets_801\Common\ApplePay\GetApplePayMerchantInfo.jsp
    Ce fichier JSP mappe vers une vue Struts qui appelle un service REST côté serveur pour récupérer l'identificateur du commerçant pour le magasin en cours à utiliser pour démarrer la session Apple Pay. Les informations sur le commerçant doivent avoir été préalablement saisies dans les tables MERCHANT associées.
    crs-web\WebContent\Widgets_801\Common\ApplePay\GetOrderInfoForApplePay.jsp
    Ce fichier JSP mappe vers une vue Struts qui appelle plusieurs services REST côté serveur pour construire l'objet JSON de demande de paiement nécessaire pour démarrer une session de feuille de paiement Apple Pay. Il contient des informations telles que le total des commandes, les descriptions détaillées des articles pour les remises, les frais d'expédition et les taxes, les adresses d'expédition et de facturation ainsi que les méthodes d'expédition applicables.
    crs-web\WebContent\Widgets_801\Common\ApplePay\GetCSRFAuthToken.jsp
    Ce fichier JSP récupère le jeton d'autorisation HCL Commerce de la session du client en cours. Il est récupéré à l'aide d'AJAX, car AJAX est requis pour exécuter des services protégés à partir de pages de navigation en cache. Autrement dit, le jeton d'autorisation ne peut pas être utilisé dans le DOM HTML sur des pages de navigation en cache.
    crs-web\WebContent\Widgets_801\Common\javascript\ApplePay.js
    Ce fichier JavaScript facilite l'interaction client-serveur entre HCL Commerce et Apple Pay. Il contient toute la logique métier pour afficher le bouton Apple Pay (si autorisé), il facilite le démarrage de la session de feuille de paiement Apple Pay et applique toutes les méthodes de rappel JavaScript requises, comme indiqué dans la documentation d'Apple Pay pour le Web.
    crs-web\WebContent\WEB-INF\struts-config-widgets.xml
    Ce fichier Struts a été mis à jour pour obtenir la définition de la vue pour les nouveaux fichiers JSP ajoutés pour Apple Pay.
    crs-web\WebContent\WEB-INF\spring\widgets-views.xml
    Ce fichier Spring a été mis à jour pour obtenir la définition de la vue pour les nouveaux fichiers JSP ajoutés pour Apple Pay.

Pourquoi et quand exécuter cette tâche

Ajout d'Apple Pay sur le Web à votre vitrine.

Vous pouvez ajouter le bouton Apple Pay n'importe où dans le magasin, y compris dans les pages hors de la portée de ce code exemple Aurora. Cette opération s'effectue en appelant les fonctions ajoutées à partir de l'aide programmable Apple Pay dans votre vitrine. Dans l'exemple fourni et les étapes suivantes, le bouton Apple Pay est ajouté à la page des détails du produit, à la page du panier et au mini-panier.

Les instructions suivantes reposent sur un code exemple issu des ressources de magasin Aurora.

Procédure

  1. Ajout du code d'aide programmable d'intégration d'Apple Pay sur le Web à toutes les pages du magasin.
    1. Recherchez dans le magasin un fichier JSP qui est inclus dans chaque page. Par exemple, dans le magasin type Aurora, storedir\Common\CommonJSToInclude.jspf est inclus dans chaque page par défaut.
    2. Ouvrez le fichier JSP pour l'édition.
    3. Localisez le fichier mentionné dans le magasin Aurora et recherchez le code balisé avec APPLEPAY BEGIN et APPLEPAY END. Ajoutez le même code dans le fichier de votre magasin.
    4. Enregistrez le fichier avec vos modifications.
  2. Ajout du style de bouton Apple Pay officiel au fichier CSS du magasin.
    1. Modifiez votre fichier CSS de magasin pour inclure un nouveau style de bouton qui utilise le CSS officiel recommandé par Apple. Par exemple, dans le magasin type Aurora, storedir\css\styles.css est le fichier CSS par défaut.
    2. Ouvrez le fichier CSS en vue de son édition.
    3. Localisez le fichier mentionné dans le magasin Aurora et recherchez le code balisé avec APPLEPAY BEGIN et APPLEPAY END. Ajoutez le même code dans le fichier de votre magasin.
    4. Enregistrez le fichier avec vos modifications.
  3. Ajout du bouton Apple Pay à la page du panier.
    1. Ajoutez le bouton Apple Pay à la page du panier d'achat dans l'emplacement de votre choix. Par exemple, dans le magasin de démarrage Aurora, un emplacement idéal se trouve dans le fichier storedir\ShoppingArea\CheckoutSection\SingleShipment\SingleShipmentOrderTotalsSummary.jsp.
    2. Ouvrez le fichier JSP pour l'édition.
    3. Localisez le fichier mentionné dans le magasin Aurora et recherchez le code balisé avec APPLEPAY BEGIN et APPLEPAY END. Ajoutez le même code dans le fichier de votre magasin.
    4. Enregistrez le fichier avec vos modifications.
  4. Ajout du bouton Apple Pay à la page du panier mobile.
    1. Ajoutez le bouton Apple Pay à la page du panier mobile dans l'emplacement de votre choix. Par exemple, dans le magasin de démarrage Aurora, un emplacement idéal se trouve dans le fichier storedir\mobile30\ShoppingArea\ShopcartSection\OrderItemDisplay.jsp.
    2. Ouvrez le fichier JSP pour l'édition.
    3. Localisez le fichier mentionné dans le magasin Aurora et recherchez le code balisé avec APPLEPAY BEGIN et APPLEPAY END. Ajoutez le même code dans le fichier de votre magasin.
    4. Enregistrez le fichier avec vos modifications.
  5. Ajout du bouton Apple Pay à la page de détails du produit.
    1. Ajoutez le bouton Apple Pay à la page des détails du produit près de la section contenant le bouton Ajouter au panier. Par exemple, dans le magasin type Aurora, Widgets_801\com.ibm.commerce.store.widgets.PDP_ShopperActions\ShopperActions_UI.jspf est le fichier par défaut.
    2. Ouvrez le fichier JSPF en vue de son édition.
    3. Localisez le fichier mentionné dans le magasin Aurora et recherchez le code balisé avec APPLEPAY BEGIN et APPLEPAY END. Ajoutez le même code dans le fichier de votre magasin.
    4. Enregistrez le fichier avec vos modifications.
  6. Ajout du bouton Apple Pay au widget de mini panier.
    1. Ajoutez le bouton Apple Pay au widget de mini panier avant le bouton Accéder au panier. Par exemple, dans le magasin type Aurora, storedir\Widgets\MiniShopCartDisplay\MiniShopCartContents_UI.jspf est le fichier par défaut.
    2. Ouvrez le fichier JSPF en vue de son édition.
    3. Localisez le fichier mentionné dans le magasin Aurora et recherchez le code balisé avec APPLEPAY BEGIN et APPLEPAY END. Ajoutez le même code dans le fichier de votre magasin.
    4. Enregistrez le fichier avec vos modifications.
  7. Affichage du bouton Apple Pay dans la zone d'actualisation du mini panier. Cette étape est nécessaire car le bouton Apple Pay doit être chargé lors de l'actualisation du widget, et non du chargement de la page.
    1. Ouvrez le fichier MiniShopCartDisplay.js pour l'éditer.
    2. Localisez le fichier mentionné dans le magasin Aurora et recherchez le code balisé avec APPLEPAY BEGIN et APPLEPAY END. Ajoutez le même code dans le fichier de votre magasin.
    3. Enregistrez le fichier avec vos modifications.

Que faire ensuite

Accédez à la vitrine et assurez-vous que les boutons Apple Pay sont affichés partout où vous les avez placés.