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.

   Pour certaines propriétés, Magento vous permet d'utiliser la valeur par défaut définie au niveau du système. Si vous souhaitez le faire, cochez “Use system value” en conséquence.

3. 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 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.
   Webhook URL Configuration	Décidez si vous souhaitez configurer manuellement le point de terminaison dans le Merchant Portal, ou laisser notre plugin gérer cela de manière transparente. Options disponibles: Automatique (Recommandé) : Nous enverrons l'URL du webhook avec chaque transaction. Manuel : Ajoutez votre URL de webhook manuellement dans le Merchant Portal. Si vous choisissez "Automatique", vous pouvez configurer jusqu'à quatre URLs de webhooks supplémentaires.

   Pour certaines propriétés, Magento vous permet d'utiliser la valeur par défaut définie au niveau du système. Si vous souhaitez le faire, cochez "Utiliser la valeur système" en conséquence.

3. 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.

   • Comme le plugin prend en charge Hosted Checkout Page (Hosted Checkout), Hosted Tokenization Page (Carte de Crédit) et les boutons de paiement unique (Paiements par Redirection), vous pouvez personnaliser l'expérience de paiement de vos clients en sélectionnant des méthodes de paiement pour chacun des modes et même utiliser les deux flux ensemble.
   • Notez que les paiements par carte sont disponibles pour les deux modes, tandis que les méthodes de paiement alternatives ne sont disponibles que pour la Hosted Checkout Page et les boutons de paiement unique.
   

2. In "Credit Card", configure the following settings for transactions processed via our Hosted Tokenization Page

   Property	Description/Actions
   Enable Module	Select one of the options for processing credit card payments "Yes": The module processes card payments via Hosted Tokenization Page integration method. Any non-card payments go via Hosted Checkout Page as configured in "Hosted Checkout" "No": Instead of using Hosted Tokenization Page for card payments, all payment methods are offered via Hosted Checkout Page as configured in "Hosted Checkout"
   Enable Saved Payment (vault)	Enable this option to allow your customers to save their cards for a future use.
   Title	Customise the payment button text in the iframe on the Magento checkout page
   HTML Template ID	Enter the file name of your template to adapt our payment page to the look and feel of your shop. To learn how to create templates, see our dedicated chapters in the Hosted Tokenization Page guide
   Payment Action	Define whether to process the transactions as authorisation mode or as direct sale. Select one of the following options: "Authorize & Capture": The amount has been ordered to be paid out in one go. Use this mode to receive the money before shipping the order There are no further actions required to capture the transaction. Successful transactions will have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9 "Authorized (Authorization Only)": The amount is only blocked on your customer's card. Successful transactions will have status="PENDING_CAPTURE" / statusOutput.statusCategory="PENDING_MERCHANT" / statusOutput.statusCode=5 (Use this mode when you wish to capture a transaction only after shipping the order) If "Payment Action" is set to "Authorized (Authorization Only)", beware of the following: Make sure that you capture authorised transaction later. Only then will the transaction have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9, for which you receive the actual payment for the transaction Capture transaction in the Magento Back Office via the "Order" module
   Skip 3DSecure Authentication	Select "Yes" or "No" to deactivate the 3-D Secure authentication process for payments We strongly recommend selecting "No" as 3-D Secure is mandatory in some markets. This will also ensure liability shift for transactions with successful 3-D Secure authentication. If you select "Yes" and choose to process non 3-D Secure transactions you may not benefit from liability shift and may be held liable.
   Trigger an authentication for every payment	Select "Yes" if you want the issuer to request a SCA (strong customer authentication) for payments
   Exempt transactions from 3DS	Some markets allow you to potentially exempt your customers from a 3-D Secure check. Select "Yes" if you would like to potentially exempt your customers. You will be able to choose between three options: Preference: No challenge request. You will request the issuer not to trigger a strong authentication for baskets up to 100 AUD. Low-value: To request exemptions on baskets up to 30 AUD. Transaction-risk-analysis: To request exemptions based on a risk analysis performed by the acquirer or the issuer, for baskets up to 100 AUD.
   Sort	Define the sort order of the iFrame. This allows you to decide in which order the different payment means are displayed on your checkout page
   Filtering	You can also implement various filters to define when to propose this way of processing payments to your customers: countries, currencies, amounts

3. In "Hosted Checkout", configure the following settings for transactions processed via our Hosted Checkout Page

   Property	Description/Actions
   Enable Module	Select one of the options to for processing all payments "Yes": The module processes both card and non-card payment methods via Hosted Checkout Page mode "No": The module processes only card payments via Hosted Tokenization Page integration method If you select "No", make sure "Enable Module" in the "Credit Card" module is set to "Yes" to ensure at least card payments are possible
   Enable Saved Payment (vault)	Enable this option to allow your customers to save their cards for a future use.
   Title	Customise the heading on the Hosted Checkout Page
   HTML Template ID	Enter the file name of your template to adapt our payment page to the look and feel of your shop. To learn how to create templates, see our dedicated chapters in the Hosted Checkout Page guide
   Payment Action	Define whether to process the transactions as authorisation mode or as direct sale. Select one of the following options: "Authorize & Capture": The amount has been ordered to be paid out in one go. Use this mode to receive the money before shipping the order There are no further actions required to capture the transaction. Successful transactions will have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9 "Authorized (Authorization Only)": The amount is only blocked on your customer's card. Successful transactions will have status="PENDING_CAPTURE" / statusOutput.statusCategory="PENDING_MERCHANT" / statusOutput.statusCode=5 (Use this mode when you wish to capture a transaction only after shipping the order) If "Payment Action" is set to "Authorized (Authorization Only)", beware of the following Make sure that you capture authorised transaction later. Only then will the transaction have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" / statusOutput.statusCode=9, for which you receive the actual payment for the transaction Capture transaction in the Magento Back Office via the "Order" module
   Skip 3DSecure Authentication	Select "Yes" or "No" to deactivate the 3-D Secure authentication process for payments We strongly recommend selecting "No" as 3-D Secure is mandatory in some markets. This will also ensure liability shift for transactions with successful 3-D Secure authentication. If you select "Yes" and choose to process non 3-D Secure transactions you may not benefit from liability shift and may be held liable.
   Trigger an authentication for every payment	Select "Yes" if you want the issuer to request a SCA (strong customer authentication) for payments
   Exempt transactions from 3DS	Some markets allow you to potentially exempt your customers from a 3-D Secure check. Select "Yes" if you would like to potentially exempt your customers. You will be able to choose between three options: Preference: No challenge request. You will request the issuer not to trigger a strong authentication for baskets up to 100 AUD. Low-value: To request exemptions on baskets up to 30 AUD. Transaction-risk-analysis: To request exemptions based on a risk analysis performed by the acquirer or the issuer, for baskets up to 100 AUD.
   Sort	Define the sort order of the iFrame. This allows you to decide in which order the different payment means are displayed on your checkout page
   Group Cards	Group all cards payment methods under one single button on the Hosted Checkout Page
   Submit Customer Cart Items Data to Worldline	Defines whether you wish to submit your customer cart details to . Doing so will improve customer experience, but might generate errors in case you use custom tax rules
   Filtering	You can also implement various filters to define when to propose this way of processing payments to your customers: countries, currencies, amounts
   Display payment confirmation page	If enabled, customers will see a dedicated confirmation screen after the payment is processed, confirming the payment and providing key details

   Pour certaines propriétés, Magento vous permet d'utiliser la valeur par défaut définie au niveau du système. Si vous souhaitez le faire, cochez "Utiliser la valeur système" en conséquence.

4. In "Redirect Payment", configure the following settings for transactions for which your customers preselect their preferred payment method before the redirection to our Hosted Checkout Page

   Property	Description/Actions
   Enable Module	Select one of the options to for processing all payments "Yes": The module processes both card and non-card payment methods via Hosted Checkout Page mode "No": The module processes only card payments via Hosted Tokenization Page integration method If you select "No", make sure "Enable Module" in the "Credit Card" module is set to "Yes" to ensure at least card payment methods are possible
   Enable Saved Payment (vault)	Enable this option to allow your customers to save their cards for a future use.
   Title	Customise the heading on the Hosted Checkout Page
   HTML Template ID	Enter the file name of your template to adapt our payment page to the look and feel of your shop. To learn how to create templates, see our dedicated chapters in the Hosted Checkout Page guide
   Payment Action	Define whether to process the transactions as authorisation mode or as direct sale. Select one of the following options: "Authorize & Capture": The amount has been ordered to be paid out in one go. Use this mode to receive the money before shipping the order There are no further actions required to capture the transaction. Successful transactions will have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" /statusOutput.statusCode=9 "Authorized (Authorization Only)": The amount is only blocked on your customer's card. Successful transactions will have status="PENDING_CAPTURE" / statusOutput.statusCategory="PENDING_MERCHANT" /statusOutput.statusCode=5 (Use this mode when you wish to capture a transaction only after shipping the order) If "Payment Action" is set to "Authorized (Authorization Only)", beware of the following: Make sure that you capture authorised transaction later. Only then will the transaction have status="CAPTURED" / statusOutput.statusCategory="COMPLETED" /statusOutput.statusCode=9, for which you receive the actual payment for the transaction Capture transaction in the Magento Back Office via the "Order" module
   Skip 3DSecure Authentication	Select "Yes" or "No" to deactivate the 3-D Secure authentication process for payments We strongly recommend selecting "No" as 3-D Secure is mandatory in some markets. This will also ensure liability shift for transactions with successful 3-D Secure authentication. If you select "Yes" and choose to process non 3-D Secure transactions you may not benefit from liability shift and may be held liable.
   Trigger an authentication for every payment	Select "Yes" if you want the issuer to request a SCA (strong customer authentication) for payments
   Submit Customer Cart Items Data to Worldline	Defines whether you wish to submit your customer cart details to . Doing so will improve customer experience, but might generate errors in case you use custom tax rules
   Sort	Define the sort order of the iFrame. This allows you to decide in which order the different payment means are displayed on your checkout page
   Display payment confirmation page	If enabled, customers will see a dedicated confirmation screen after the payment is processed, confirming the payment and providing key details

   You can enable each payment method separately by configuring for each of them the following:

   Property	Description/Actions
   Enable Module	Select one of the options to for processing all payments "Yes": The module processes both card and non-card payment methods via Hosted Tokenization Page mode "No": The module processes only card payments via Hosted Checkout Page integration method If you select "No", make sure "Enable Module" in the "Credit Card" module is set to "Yes" to ensure at least card payment methods are possible
   Sort	Define the sort order of the iFrame. This allows you to decide in which order the different payment means are displayed on your checkout page
   Title	Customise the heading on the Hosted Checkout Page

5. Cliquez sur "Save Config" pour confirmer.