Magento PWA

La première étape pour utiliser le plugin est le processus d'installation. Avant de continuer, assurez-vous que votre infrastructure répond à ces exigences système :

Une fois terminé, choisissez l'un de ces modes d'installation et suivez les étapes respectives :

• Installation à partir de l'archive
• Installation à partir de GitHub

Installation à partir de l'archive

1. Allez dans le repository source de votre projet
   

   cd votre_projet/src

2. Créez un nouveau dossier pour le module :
   

   $ mkdir @worldline

3. Extrayez et copiez le contenu de l'archive dans le nouveau dossier ("@worldline")
   
   
4. Exécutez la commande suivante pour enregistrer le module (environnement de développement) :

   $ yarn add link:src/@worldline/worldline-payment

   
   Ou la commande suivante pour l'environnement de production :
   

   $ yarn add file:src/@worldline/worldline-payment

5. Enregistrez l'extension en tant que fournisseur de confiance dans la configuration de votre projet en ajoutant le code suivant dans le fichier "votre_projet/package.json" :

   {
   	"pwa-studio": {
   		"targets": {
   			"intercept": "./local-intercept.js"
   		},
   		"trusted-vendors": [
   			"@worldline"
   		]
   	}
   }
   

1. Exécutez la commande Watch :
   

   $ yarn watch

Installation depuis GitHub

L'installation depuis GitHub est presque identique à celle à partir de l'archive, mais avec quelques étapes en moins :

1. Allez dans le repository source de votre projet
   

   $ cd votre_projet/src

2. Exécutez la commande suivante :

   $ yarn add
   git+https://USERNAME:TOKEN@github.com/Ingenico/direct-magento-pwa.git#master
   

   
   Remplacez USERNAME par votre nom d'utilisateur GitHub et le token par votre token d'accès personnel GitHub. Pour plus d'informations sur la création de votre token d'accès GitHub, consultez le guide dédié de Github.
   
   
3. Enregistrez le plugin en tant que fournisseur de confiance dans la configuration de votre projet en ajoutant le code suivant dans le fichier "votre_projet/package.json" :

   {
   	"pwa-studio": {
   		"targets": {
   			"intercept": "./local-intercept.js"
   		},
   		"trusted-vendors": [
   			"@worldline"
   		]
   	}
   }
   

1. Exécutez la commande Watch :
   

   $ yarn watch

   
   
   

Après l'installation, vous devez configurer le plugin pour lier votre boutique à notre plateforme.

Configurer la connexion

1. Connectez-vous au Back Office d'Adobe commerce/Magento. Allez dans Stores > Worldline Global Online Pay > Connection.
2. Dans Connection, configurez les paramètres suivants :
   

   Propriété	Description/Actions
   Mode d'environnement	Sélectionnez entre "Test" ou "Production" pour lier votre boutique à l'environnement respectif. En fonction de votre sélection, le module de boutique enverra les demandes de transaction à l'environnement de test ou de production. Assurez-vous de : Ne pas mélanger les informations d'identification de l'environnement de "Test" avec celles de l'environnement de "Production" et vice versa lors de la configuration des champs Merchant ID (PSPID)/API Key/API Secret et des informations d'identification des webhooks. Passer à la "Production" dès que vous avez finalisé vos tests.
   API Key	Entrez l'API Key de votre PSPID de test ou de production. Lisez notre guide dédié pour apprendre comment en générer une.
   API Secret	Entrez l'API Secret de votre PSPID de test ou de production. Lisez notre guide dédié pour apprendre comment en générer un.
   Identifiant Marchand (PSPID)	Entrez votre PSPID depuis notre plateforme que vous souhaitez utiliser pour le traitement des transactions.

1. Cliquez sur "Save Config" pour confirmer votre configuration.

Une fois que vous avez rempli le tableau, vérifiez la configuration en établissant une connexion de test entre le plugin et notre plateforme. Cliquez sur le bouton "Test Connection". Vérifiez que le texte du bouton change pour "Successful! Test again". Si le texte change pour "Connection failed! Test again?", contactez votre administrateur système pour un dépannage afin de vérifier :

• Que vous utilisez les bonnes informations d'identification
• Si votre PSPID est actif
• Que vous envoyez la requête au bon PSPID/environnement (Test vs Production)

Configurer les webhooks

1. Connectez-vous au Back Office d'Adobe commerce/Magento. Allez dans Stores > Worldline Global Online Pay > Connection.
2. Dans Webhooks, configurez les paramètres suivants :
   
   

   Propriété	Description/Actions
   Allow Receiving Webhooks	Sélectionnez "Yes" pour recevoir des webhooks sur le serveur Magento.
   Webhook URL	Copiez cette URL dans les champs Endpoint URLs dans le Merchant Portal de Direct comme décrit dans notre guide dédié.
   Key	Entrez l'API Key de votre PSPID de test ou de production. Lisez notre guide dédié pour apprendre comment en générer une.
   Secret Key	Entrez l'API Secret de votre PSPID de test ou de production. Lisez notre guide dédié pour apprendre comment en générer un.

1. Cliquez sur "Save Config" pour confirmer et nettoyer votre cache.

Configurer les méthodes de paiement

1. Connectez-vous au Back Office d'Adobe commerce/Magento. Allez dans Stores > Worldline Global Online Pay > Payment methods.
   

1. Dans "Credit Card", configurez les paramètres suivants pour les transactions traitées via notre Hosted Tokenization Page.
   

   Propriété	Description/Actions
   Enable Module	Sélectionnez l'une des options pour le traitement des paiements par carte de crédit : "Yes": Le module traite les paiements par carte via la méthode d'intégration Hosted Tokenization Page. Tous les paiements non par carte passent par Hosted Checkout Page tel que configuré dans "Hosted Checkout". "No": Au lieu d'utiliser Hosted Tokenization Page pour les paiements par carte, toutes les méthodes de paiement sont proposées via Hosted Checkout Page comme configuré dans "Hosted Checkout".
   Title	Personnalisez le texte du bouton de paiement dans l'iframe sur la page de paiement Magento.
   HTML Template ID	Entrez le nom de fichier de votre modèle pour adapter notre page de paiement à l'apparence de votre boutique. Pour apprendre à créer des modèles, consultez nos chapitres dédiés dans le guide Hosted Tokenization Page.
   Payment Action	Définissez si vous souhaitez traiter les transactions en mode autorisation ou en vente directe. Sélectionnez l'une des options suivantes : "Authorize & Capture": Le montant a été ordonné de le payer en une seule fois. Utilisez ce mode pour recevoir l'argent avant d'expédier la commande. Aucune action supplémentaire n'est requise pour capturer la transaction. Les transactions réussies auront status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9 "Authorized (Authorization Only)": Le montant est uniquement bloqué sur la carte de votre client. Les transactions réussies auront status="PENDING_CAPTURE" / statusOutput.statusCategory="PENDING_MERCHANT" / statusOutput.statusCode=5 (Utilisez ce mode si vous souhaitez capturer la transaction uniquement après l'expédition de la commande). Si "Payment Action" est défini sur "Authorized (Authorization Only)", attention à ce qui suit Assurez-vous de capturer la transaction autorisée plus tard. Ce n'est qu'alors que la transaction aura status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9, pour laquelle vous recevez le paiement réel de la transaction. Capturez la transaction dans le Back Office de Magento via le module "Order".
   Skip 3DSecure Authentication	Sélectionnez "Yes" ou "No" pour désactiver le processus d'authentification 3-D Secure pour les paiements. Nous recommandons fortement de sélectionner "No" car le 3-D Secure est obligatoire dans certains marchés. Cela garantira également le transfert de responsabilité pour les transactions avec une authentification 3-D Secure réussie. Si vous sélectionnez "Yes" et choisissez de traiter des transactions non 3-D Secure, vous ne pourrez peut-être pas bénéficier du transfert de responsabilité et pourrez être tenu responsable.
   Trigger an authentication for every payment	Sélectionnez "Yes" si vous souhaitez que l'émetteur demande une authentification forte (SCA) pour les paiements.
   Request 3DS exemption	Certains marchés vous permettent de soustraire potentiellement vos clients d'une vérification 3-D Secure. Sélectionnez "Yes" si vous souhaitez que vos clients soient potentiellement exemptés. Ceci s'applique uniquement aux transactions avec un panier inférieur à 30 EUR.
   Sort	Définissez l'ordre de tri de l'iFrame. Cela vous permet de décider dans quel ordre les différents moyens de paiement sont affichés sur votre page de paiement.
   Filtering	Vous pouvez également implémenter divers filtres pour définir quand proposer ce moyen de traitement des paiements à vos clients : pays, devises, montants.

2. Dans "Hosted Checkout", configurez les paramètres suivants pour les transactions traitées via notre Hosted Checkout Page
   
   

   Propriété	Description/Actions
   Enable Module	Sélectionnez l'une des options pour le traitement de tous les paiements "Yes": Le module traite les méthodes de paiement carte et non-carte via le mode Hosted Checkout Page. "No": Le module ne traite que les paiements par carte via la méthode d'intégration Hosted Tokenization Page. Si vous sélectionnez "No", assurez-vous que "Enable Module" dans le module "Credit Card" est réglé sur "Yes" pour garantir que les méthodes de paiement par carte sont possibles au moins.
   Title	Personnalisez le titre sur Hosted Checkout Page
   HTML Template ID	Entrez le nom de fichier de votre modèle pour adapter notre page de paiement à l'apparence de votre boutique. Pour apprendre à créer des modèles, consultez nos chapitres dédiés dans le guide Hosted Checkout Page.
   Payment Action	Définissez si vous souhaitez traiter les transactions en mode autorisation ou en vente directe. Sélectionnez l'une des options suivantes : "Authorize & Capture": Le montant a été ordonné de le payer en une seule fois. Utilisez ce mode pour recevoir l'argent avant d'expédier la commande. Aucune action supplémentaire n'est requise pour capturer la transaction. Les transactions réussies auront status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9 "Authorized (Authorization Only)": Le montant est uniquement bloqué sur la carte de votre client. Les transactions réussies auront status="PENDING_CAPTURE" / statusOutput.statusCategory="PENDING_MERCHANT" / statusOutput.statusCode=5 (Utilisez ce mode si vous souhaitez capturer la transaction uniquement après l'expédition de la commande). Si "Payment Action" est défini sur "Authorized (Authorization Only)", attention à ce qui suit Assurez-vous de capturer la transaction autorisée plus tard. Ce n'est qu'alors que la transaction aura status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9, pour laquelle vous recevez le paiement réel de la transaction. Capturez la transaction dans le Back Office de Magento via le module "Order".
   Skip 3DSecure Authentication	Sélectionnez "Yes" ou "No" pour désactiver le processus d'authentification 3-D Secure pour les paiements. Nous recommandons fortement de sélectionner "No" car le 3-D Secure est obligatoire dans certains marchés. Cela garantira également le transfert de responsabilité pour les transactions avec une authentification 3-D Secure réussie. Si vous sélectionnez "Yes" et choisissez de traiter des transactions non 3-D Secure, vous ne pourrez peut-être pas bénéficier du transfert de responsabilité et pourrez être tenu responsable.
   Trigger an authentication for every payment	Sélectionnez "Yes" si vous souhaitez que l'émetteur demande une authentification forte (SCA) pour les paiements.
   Request 3DS exemption	Certains marchés vous permettent de soustraire potentiellement vos clients d'une vérification 3-D Secure. Sélectionnez "Yes" si vous souhaitez que vos clients soient potentiellement exemptés. Ceci s'applique uniquement aux transactions avec un panier inférieur à 30 EUR.
   Sort	Définissez l'ordre de tri de l'iFrame. Cela vous permet de décider dans quel ordre les différents moyens de paiement sont affichés sur votre page de paiement.
   Group Cards	Regroupez toutes les méthodes de paiement par carte sous un seul bouton sur la Hosted Checkout Page.
   Submit Customer Cart Items Data to Worldline	Définit si vous souhaitez soumettre les détails du panier de votre client à Direct. Cela améliorera l'expérience client, mais pourrait générer des erreurs si vous utilisez des règles de taxe personnalisées.
   Filtering	Vous pouvez également implémenter divers filtres pour définir quand proposer ce moyen de traitement des paiements à vos clients : pays, devises, montants.
   Process Mealvouchers	Sélectionnez "Yes" pour pouvoir traiter la méthode de paiement Mealvouchers et configurer les différents types de produits dont vous avez besoin : Food and Drink Gift and Flowers Home and Garden

1. Dans "Paiement par Redirection", configurez les paramètres suivants pour les transactions pour lesquelles vos clients pré-sélectionnent leur méthode de paiement préférée avant la redirection vers notre Hosted Checkout Page.
   
   

   Propriété	Description/Actions
   Activer le Module	Sélectionnez l'une des options pour traiter tous les paiements "Oui" : Le module traite à la fois les méthodes de paiement avec et sans carte via le mode Hosted Checkout Page. "Non" : Le module traite uniquement les paiements par carte via la méthode d'intégration Hosted Tokenization Page. Si vous sélectionnez "Non", assurez-vous que "Activer le Module" dans le module "Carte de Crédit" est réglé sur "Oui" pour garantir qu'au moins les méthodes de paiement par carte sont possibles.
   Titre	Personnalisez le titre sur le Hosted Checkout Page.
   ID de modèle HTML	Entrez le nom de fichier de votre modèle pour adapter notre page de paiement à l'apparence de votre boutique. Pour savoir comment créer des modèles, consultez nos chapitres dédiés dans le guide Hosted Checkout Page.
   Action de paiement	Définissez si vous souhaitez traiter les transactions en mode autorisation ou en Direct Sale. Sélectionnez l'une des options suivantes : "Autoriser & Capturer" : Le montant est payé en une seule fois. Utilisez ce mode pour recevoir l'argent avant d'expédier la commande. Aucune action supplémentaire n'est requise pour finaliser la transaction. Les transactions réussies auront le statut="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9 "Autorisé (Autorisation Seulement)" : Le montant est seulement bloqué sur la carte de votre client. Les transactions réussies auront le statut="PENDING_CAPTURE" / statusOutput.statusCategory="PENDING_MERCHANT" / statusOutput.statusCode=5 (Utilisez ce mode lorsque vous souhaitez finaliser une transaction uniquement après avoir expédié la commande). Si "Action de paiement" est réglé sur "Autorisé (Autorisation Seulement)", faites attention aux points suivants : Assurez-vous d'effectuerla capture de la transaction autorisée par la suite. Ce n'est que lorsque la transaction aura le statut="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9, que vous recevrez le paiement réel de la transaction. Capturez la transaction dans le Back Office de Magento via le module "Order".
   Passer l'authentification 3DSecure	Sélectionnez "Oui" ou "Non" pour désactiver le processus d'authentification 3-D Secure pour les paiements. Nous recommandons fortement de sélectionner "Non" car 3-D Secure est obligatoire sur certains marchés. Cela garantira également un transfert de responsabilité pour les transactions avec une authentification 3-D Secure réussie. Si vous sélectionnez "Oui" et choisissez de traiter des transactions non 3-D Secure, vous pourriez ne pas bénéficier du transfert de responsabilité et être tenu responsable.
   Déclencher une authentification pour chaque paiement	Sélectionnez "Oui" si vous souhaitez que l'émetteur requête une SCA (authentification forte du client) pour les paiements.
   Demander une exemption 3DS	Certains marchés vous permettent potentiellement d'exempter vos clients d'une vérification 3-D Secure. Sélectionnez "Oui" si vous souhaitez que vos clients soient potentiellement exemptés. Cela s'applique uniquement aux transactions avec un panier inférieur à 30 EUR.
   Envoyer les données des articles du panier client à Worldline	Détermine si vous souhaitez transmettre les détails du panier de votre client à Direct. Cela améliorera l'expérience client, mais pourrait générer des erreurs si vous utilisez des règles fiscales personnalisées.
   Trier	Définissez l'ordre de tri de l'iframe. Cela vous permet de décider dans quel ordre les différents moyens de paiement sont affichés sur votre page de paiement

   Vous pouvez activer chaque méthode de paiement séparément en configurant pour chacune d'elles ce qui suit :
   

   Propriété	Description/Actions
   Activer le Module	Sélectionnez l'une des options pour traiter tous les paiements "Oui" : Le module traite à la fois les méthodes de paiement carte et non carte via le mode Hosted Tokenization Page. "Non" : Le module traite uniquement les paiements par carte via la méthode d'intégration Hosted Checkout Page. Si vous sélectionnez "Non", assurez-vous que "Activer le Module" dans le module "Carte de Crédit" est réglé sur "Oui" pour garantir qu'au moins les méthodes de paiement par carte sont possibles.
   Trier	Définissez l'ordre de tri de l'iframe. Cela vous permet de décider dans quel ordre les différents moyens de paiement sont affichés sur votre page de paiement.
   Titre	Personnalisez le titre sur Hosted Checkout Page.

2. Cliquez sur "Save Config" pour confirmer.