# Guide de mise en œuvre de l'application Stripe pour Salesforce B2C Commerce ## Configurer Business Manager L’application Stripe pour Salesforce B2C Commerce (LINK Cartridge) requiert plusieurs cartouches pour une fonctionnalité complète. De plus, la prise en charge du contrôleur et de SFRA est divisée en deux cartouches distinctes, ce qui nécessite l’installation et l’utilisation de l’un ou l’autre modèle. Importez les trois cartouches dans UX studio et associez-les à une connexion au serveur. ### Assignation d’une cartouche à un site 1. Rendez-vous sur **Administration > Sites > Manage Sites**. 2. Cliquez sur le nom correspondant au site de vitrine auquel vous voulez ajouter la fonctionnalité Stripe. 3. Sélectionnez l’onglet **Settings**. 4. Pour Storefront Reference Architecture (SFRA), ajoutez `app_stripe_sfra:int_stripe_sfra:int_stripe_core` au chemin d’accès de la cartouche. Répétez ces étapes pour chaque site de vitrine sur lequel vous souhaitez implémenter Stripe. ### Assignation d’une cartouche à Business Manager 1. Rendez-vous sur **Administration > Sites > Manage Sites**. 2. Cliquez sur le **Business Manager Site**, puis sur le lien **Manage the Business Manager site**. 3. Ajoutez `int_stripe_core` au chemin d’accès de la cartouche. ### Importation de métadonnées 1. Accédez au dossier des métadonnées du projet et ouvrez le dossier `stripe_site_template`. 2. Ouvrez le dossier `sites` et renommez le dossier `siteIDHere` avec l’ID du site souhaité. 3. Ajoutez un dossier pour chaque site sur lequel vous souhaitez activer Stripe. 4. Rendez-vous sur **Administration > Site Development > Site Import & Export**. 5. Compressez le dossier `stripe_site_template` dans un fichier zip et importez-le. ### Créer un style Stripe Si nécessaire, mettez à jour le chemin d’accès à votre installation SFRA de base dans `package.json` à partir du même dossier racine. En règle générale, il existe un dossier de projet racine dans lequel sont dupliqués les référentiels de la cartouche de base SFRA et de tous les plugins, bibliothèques et autres cartouches LINK nécessaires. Si vous avez également dupliqué la cartouche Stripe dans ce dossier, vous n’avez pas besoin de modifier la propriété `paths.base`. Dans le cas contraire, ajoutez à la propriété `paths.base` dans `package.json` le chemin d’accès correspondant au répertoire local contenant le référentiel Storefront Reference Architecture. La valeur par défaut de `paths.base` est : ```json "paths": { "base": "../storefront-reference-architecture/cartridges/app_storefront_base/" } ``` Dès que vous avez la certitude d’avoir assigné à `package.json` le bon chemin d’accès vers les cartouches SFRA , exécutez la commande `npm run compile:scss` depuis le dossier racine du référentiel Stripe. ### Ajouter de nouveaux prestataires de paiement La cartouche Stripe utilise deux processeurs de paiement. `STRIPE_CREDIT` gère uniquement les paiements par carte, tandis que `STRIPE_APM` gère les moyens de paiement via le composant [Payment Element](https://docs.stripe.com/payments/payment-element.md) et [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md). #### Prestataire de paiements par carte bancaire 1. Accédez à **Merchant Tools > Ordering > Payment Processors** et cliquez sur **New**. 2. Dans la fenêtre qui s’ouvre, définissez l’ID sur `STRIPE_CREDIT` et cliquez sur **Apply**. #### Prestataire de paiements APM 1. Accédez à **Merchant Tools > Ordering > Payment Processors** et cliquez sur **New**. 2. Dans la fenêtre qui s’ouvre, définissez l’attribut ID sur `STRIPE_APM` et cliquez sur **Apply**. ### Mettre à jour des moyens de paiement Accédez à **Merchant Tools > Ordering > Payment Methods**, cliquez sur le moyen de paiement **CREDIT\_CARD** et sélectionnez le prestataire de paiement ** STRIPE_CREDIT** dans la liste déroulante, sous la section des informations de **CREDIT\_CARD**. Pour les moyens de paiement dynamiques ou le Payment Request Button, activez **STRIPE\_APM\_METHODS** afin d’inclure les moyens de paiement pris en charge par Stripe. Pour en savoir plus, consultez le [guide sur les moyens de paiement](https://stripe.com/guides/payment-methods-guide). Le Payment Request Button est obsolète et n’est plus pris en charge dans Stripe.js `endive` ou toute version ultérieure. Pour maintenir une intégration existante, activez **STRIPE\_PAYMENT\_REQUEST\_BTN** et définissez l’**URL de l’API Stripe** sur l’URL de `dahlia` dans [Configuration](https://docs.stripe.com/use-stripe-apps/salesforce-commerce-cloud/implementation-guide.md#configuration). [Migrez vers le composant Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/migration.md). ## Installer l’application Stripe Salesforce Commerce Utilisez Stripe Apps pour renforcer la sécurité et simplifier l’utilisation de clés limitées distinctes pour chaque intégration avec votre compte Stripe. Installez l’application Stripe et récupérez les nouvelles [clés](https://docs.stripe.com/keys.md) secrètes et publiables générées pour votre intégration avec le connecteur Salesforce Commerce, afin de ne pas avoir à créer manuellement votre propre clé limitée ou utiliser une clé secrète. Pour intégrer l’application Salesforce Commerce et renforcer l’infrastructure de sécurité de votre compte : 1. Rendez-vous dans la [Stripe App Marketplace](https://marketplace.stripe.com/), puis cliquez sur [Install the Salesforce Commerce app](https://marketplace.stripe.com/apps/install/link/com.stripe.SalesforceCommerce). 2. Sélectionnez le compte Stripe sur lequel vous souhaitez installer l’application. 3. Vérifiez et approuvez les autorisations de l’application, installez l’application dans un environnement de test ou en mode production, puis cliquez sur **Installer**. 4. Après avoir installé l’application, conservez les clés dans un endroit sûr où vous ne risquez pas de les perdre. Pour vous souvenir de l’endroit où vous les avez rangées, vous pouvez [laisser une note à propos des clés dans le Dashboard](https://docs.stripe.com/keys.md#reveal-an-api-key). 5. Utilisez la clé publique et la clé secrète nouvellement générées pour finaliser la configuration de l’application. 6. Pour gérer l’application ou générer de nouvelles clés de sécurité après formulaire d’inscription, accédez à la page des paramètres de l’application en [environnement de test](https://dashboard.stripe.com/test/settings/apps/com.stripe.SalesforceCommerce) ou en [mode production](https://dashboard.stripe.com/settings/apps/com.stripe.SalesforceCommerce). ## Configuration Dans **Merchant Tools > Site Preferences > Custom Site Preferences > Stripe Configurations**, ajoutez les valeurs propres au site. - Renseignez la clé API secrète Stripe avec les valeurs de l’application Stripe Salesforce Commerce. - Renseignez la clé API publiable avec les valeurs de l’application Stripe Salesforce Commerce. - **Is this SFRA installation** (S’agit-il d’une installation SFRA) : choisissez `yes` si le site actuel utilise SFRA. - **Capture Funds on Stripe Charge** (Capture des fonds sur le paiement Stripe) : la valeur par défaut est `true` (oui). Changez-la pour `false` (non) pour autoriser plutôt les paiements sur Stripe. - **Stripe card element CSS style** (Style CSS de l’élément carte Stripe) : saisissez le style CSS à attribuer au bouton de l’élément carte pour l’adapter au style global de la vitrine (p. ex. `{"base": {"fontFamily": "Arial, sans-serif","fontSize": "14px","color": "#C1C7CD"},"invalid": {"color": "red" } }`). - **URL de l’API Stripe** : `https://js.stripe.com/endive/stripe.js`. Pour les intégrations existantes du Payment Request Button, utilisez `https://js.stripe.com/dahlia/stripe.js` à la place. - **Style de l’élément Payment Request Button de Stripe** : pour le bouton de demande de paiement, sélectionnez le style CSS limité du bouton. Pour en savoir plus, consultez l’article sur le [style de l’élément](https://docs.stripe.com/stripe-js/elements/payment-request-button.md#styling-the-element). - **Apple Pay Verification String** (Chaîne de vérification ApplePay) : saisissez la chaîne de vérification Apple fournie par le Dashboard Stripe. Il s’agit d’une activation ponctuelle. La console Stripe relaie la chaîne de vérification Apple Pay pour le Web lors de la configuration. Effectuez la configuration dans l’environnement de test si le bouton Payment Request est utilisé comme moyen de paiement sur la vitrine. - **Country Code (Stripe Payment Request Button)** (code pays, bouton de paiement Stripe) : il s’agit du code de pays par défaut (p. ex. US) du bouton de paiement. Sur un site international, une personnalisation peut s’avérer nécessaire afin de transmettre le code pays de manière dynamique plutôt que les préférences du site. Pour en savoir plus, consultez l’article [Créer une instance de demande de paiement](https://docs.stripe.com/stripe-js/elements/payment-request-button.md). - **Stripe webhook signing secret** (clé secrète de signature du webhook Stripe) : saisissez la clé secrète de signature du *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) fournie par le Dashboard Stripe. Stripe signe les événements de webhook et transmet la validation à SFCC, qui valide le contenu du message à l’aide de cette clé secrète. - **Stripe Allowed Webhook Statuses** (états de webhook autorisés par Stripe) : configurez les [états de webhooks autorisés](https://docs.stripe.com/use-stripe-apps/salesforce-commerce-cloud/implementation-guide.md#stripe-dashboard-set-up). ![](https://b.stripecdn.com/docs-statics-srv/assets/configuration-webhook-statuses.01dca58aedb406537570122a457afa09.png) - **Stripe Enabled** (Stripe activé) : active ou désactive la cartouche. ## Stripe Quick Setup Vous pouvez également configurer Stripe dans Business Manager en utilisant **Stripe Quick Setup** 1. Connectez-vous à votre Business Manager. 2. Recherchez “Stripe Quick Setup” dans **Business Manager** sous **Administration**. 3. Sélectionnez les sites pour lesquels vous souhaitez configurer Stripe. 4. Saisissez votre `Stripe Publishable Key` et votre `Restricted Access key` récupérées à partir de l’application Stripe Salesforce Commerce. 5. Cliquez sur **Quick Setup**. ## Configurer Apple Pay Pour Apple Pay : Mettez à jour `RedirectURL.js` : ```javascript server.extend(page); server.replace('Start', function (req, res, next) { const URLRedirectMgr = require('dw/web/URLRedirectMgr'); // Intercept the incoming path request if (URLRedirectMgr.getRedirectOrigin() === '/.well-known/apple-developer-merchantid-domain-association') { res.render('stripe/util/apple'); return next(); } const redirect = URLRedirectMgr.redirect; const location = redirect ? redirect.location : null; const redirectStatus = redirect ? redirect.getStatus() : null; if (!location) { res.setStatusCode(404); res.render('error/notFound'); } else { if (redirectStatus) { res.setRedirectStatus(redirectStatus); } res.redirect(location); } return next(); }); ``` Définissez temporairement un alias pour l’un des sites dans le bac à sable afin que le domaine puisse être vérifié dans le Dashboard Stripe. L’alias doit ressembler à ce qui suit : ```json { "__version": "1", "settings": { "http-host": "your.sandbox.domain.demandware.net", "https-host": "your.sandbox.domain.demandware.net", "default": "true", "site-path": "/" }, "your.sandbox.domain.demandware.net": [ { "locale": "en_GB", "if-site-path": "/" } ] } ``` La valeur doit correspondre à un paramètre régional activé. 1. Sur la [page des domaines des moyens de paiement](https://dashboard.stripe.com/settings/payment_method_domains), cliquez sur **Ajouter un domaine**. 2. Saisissez votre nom de domaine. 3. Cliquez sur **Enregistrer et continuer**. 4. Téléchargez le [fichier d’association de domaine](https://stripe.com/files/apple-pay/apple-developer-merchantid-domain-association). 5. Hébergez le fichier dans `/.well-known/apple-developer-merchantid-domain-association`. Par exemple, si vous enregistrez `https://example.com`, placez ce fichier à l’adresse `https://example.com/.well-known/apple-developer-merchantid-domain-association`. 6. Cliquez sur **Vérifier**. ## Mettre à jour le code de la vitrine Le code de la cartouche LINK contient la prise en charge de l’ensemble des cartes bancaires prises en charge par Stripe. Veuillez noter que la liste des cartes autorisées sur la vitrine se limite toujours à la liste des cartes bancaires de Business Manager (**Merchant Tools** > **Ordering** > **Payment Methods** > **Credit/Debit Cards**). Apportez les modifications suivantes au code de vitrine. Les exemples cités correspondent à la version 4.4 de SFRA. Les sections suivantes détaillent les personnalisations apportées au code SFRA. Il existe de nombreux endpoints de contrôleur que vous devez ajouter plutôt que remplacer. Ceux-ci ne sont pas couverts, car nous nous attendons à ce qu’ils fonctionnent sans nécessiter aucune modification. Les mises à jour du contrôleur sont requises uniquement pour les endpoints remplacés, puisque vous avez peut-être déjà remplacé cet endpoint dans votre intégration. Utilisez les modifications apportées à la cartouche de base et ajoutez-les au contrôleur que vous avez déjà remplacé. Si vous n’avez pas étendu ni remplacé ces endpoints, vous n’avez rien à faire. ### Contrôleur : CheckoutServices.js Chemin d’accès : `app_stripe_sfra/cartridge/controllers/CheckoutServices.js` Retirez la validation de moyen de paiement de l’endpoint `SubmitPayment` : ```javascript if (!paymentMethodID && currentBasket.totalGrossPrice.value > 0) { const noPaymentMethod = {}; noPaymentMethod[billingData.paymentMethod.htmlName] = Resource.msg( 'error.no.selected.payment.method', 'payment', null ); delete billingData.paymentInformation; res.json({ form: billingForm, fieldErrors: [noPaymentMethod], serverErrors: [], error: true }); return; } ``` Mettez le code de création de commande à jour : ```javascript const stripeCheckoutHelper = require('int_stripe_core').getCheckoutHelper(); const order = stripeCheckoutHelper.createOrder(currentBasket); if (!order) { res.json({ error: true, errorMessage: Resource.msg('error.technical', 'checkout', null), }); return next(); } ``` Mettez le code de passation de commande à jour : ```javascript var isAPMOrder = stripeCheckoutHelper.isAPMORder(order); if (!isAPMOrder) { var stripePaymentInstrument = stripeCheckoutHelper.getStripePaymentInstrument(order); if (stripePaymentInstrument && order.custom.stripeIsPaymentIntentInReview) { res.json({ error: false, orderID: order.orderNo, orderToken: order.orderToken, continueUrl: URLUtils.url('Order-Confirm').toString() }); return next(); } // Places the order const fraudDetectionStatus = hooksHelper( 'app.fraud.detection', 'fraudDetection', currentBasket, require('*/cartridge/scripts/hooks/fraudDetection').fraudDetection ); if (fraudDetectionStatus.status === 'fail') { Transaction.wrap(function () { OrderMgr.failOrder(order); }); // Fraud detection failed req.session.privacyCache.set('fraudDetectionStatus', true); res.json({ error: true, cartError: true, redirectUrl: URLUtils.url('Error-ErrorCode', 'err', fraudDetectionStatus.errorCode).toString(), errorMessage: Resource.msg('error.technical', 'checkout', null), }); return next(); } COHelpers.sendConfirmationEmail(order, req.locale.id); // Reset usingMultiShip after successful Order placement req.session.privacyCache.set('usingMultiShip', false); res.json({ error: false, orderID: order.orderNo, orderToken: order.orderToken, continueUrl: URLUtils.url('Order-Confirm').toString() }); return next(); } ``` ### Contrôleur : PaymentInstruments.js Chemin d’accès : `app_stripe_sfra/cartridge/controllers/PaymentInstruments.js` Remplacez l’endpoint `DeletePayment` par le code suivant : ```javascript server.replace('DeletePayment', function(req, res, next) { var stripeHelper = require ('int_stripe_core').getStripeHelper(); var wallet = stripeHelper.getStripeWallet(customer); var UUID = req.querystring.UUID; wallet.removePaymentInstrument({ custom: { stripeId: UUID }}); res.json({ UUID: UUID }); next(); }); ``` ### Contrôleur : RedirectURL.js Chemin d’accès : `app_stripe_sfra/cartridge/controllers/RedirectURL.js` Ajoutez le code suivant à la fonction `Start` : ```javascript server.replace('Start', function (req, res, next) { const URLRedirectMgr = require('dw/web/URLRedirectMgr'); // Intercept the incoming path request if (URLRedirectMgr.getRedirectOrigin() === '/.well-known/apple-developer-merchantid-domain-association') { res.render('stripe/util/apple'); return next(); } const redirect = URLRedirectMgr.redirect; const location = redirect ? redirect.location : null; const redirectStatus = redirect ? redirect.getStatus() : null; if (!location) { res.setStatusCode(404); res.render('error/notFound'); } else { if (redirectStatus) { res.setRedirectStatus(redirectStatus); } res.redirect(location); } return next(); }); ``` ## Interfaces externes Les fonctionnalités de Stripe reposent sur des appels externes aux services Stripe. Toutes les interfaces externes utilisent le framework de service pour communiquer avec l’API Stripe. La création et l’utilisation de comptes Stripe sont gratuites. La plupart des communications avec les services Stripe sont journalisées et accessibles dans le [Dashboard Stripe](https://dashboard.stripe.com). Nous vous recommandons d’utiliser le Dashboard Stripe pour surveiller et tester votre intégration. Vous pouvez trouver la configuration principale de l’intégration des services Stripe sous **Administration** > **Operations** > **Services** avec un service différent pour chaque appel externe : - `stripe.http.addCard` - `stripe.http.authorizePayment` - `stripe.http.createCharge` - `stripe.http.createCustomer` - `stripe.http.deleteCard` - `stripe.http.fetchCustomerCards` - `stripe.http.fetchCustomerSources` - `stripe.http.refundCharge` - `stripe.http.retrieveCustomer` - `stripe.http.service` - `stripe.http.updateCard` Tous ces services utilisent le même profil et les mêmes identifiants. Ce qui peut différer, c’est le préfixe du nom du log et le fait que le log de communication soit activé ou non. ## Composant Element Payment Stripe La cartouche Stripe prend en charge le composant Element Payment Stripe comme moyen de paiement. Le composant Element de paiement est un composant d’interface utilisateur intégré qui vous permet d’accepter plus de 25 moyens de paiement avec une seule intégration. ![](https://b.stripecdn.com/docs-statics-srv/assets/Payment-Element-SPM-Link.1cf2bf285665f1c139d20d08e6969ea0.png) Pour activer le composant Payment Element, accédez **Business Manager > Merchant Tools > Ordering > Payment Methods** et activez le moyen de paiement avec l’ID défini sur `STRIPE_PAYMENT_ELEMENT`. Dans votre vitrine, sous **Checkout** > **Payment**, vous disposez d’un widget contenant tous les moyens de paiement activés dans le [Dashboard](https://dashboard.stripe.com/settings/payment_methods) Stripe. Lorsque vous activez Payment Element dans Business Manager, il peut remplacer tous les autres moyens de paiement. Vous pouvez désactiver tous les moyens de paiement et utiliser uniquement `STRIPE_PAYMENT_ELEMENT`. Pour activer l’enregistrement des moyens de paiement en vue d’une utilisation future depuis le composant Payment Element Stripe, allez dans **Business Manager > Custom Preferences > Stripe Configs** et définissez **Stripe Payment Element: Enable Save Payment Method for Future Purchases** sur `Yes`. Pour afficher une liste des moyens de paiement enregistrés lors du paiement, accédez à **Business Manager > Payment Methods** et activez le moyen de paiement `CREDIT_CARD`. Lorsqu’il est activé avec `STRIPE_PAYMENT_ELEMENT`, l’onglet carte bancaire inclut une liste de cartes enregistrées (le cas échéant). ## Affichage des données Stripe Radar La cartouche Stripe LINK prend en charge la vue des informations de Radar pour afficher les informations sur les risques dans la section **Orders** de Business Manager. [Radar](https://docs.stripe.com/radar.md) offre une protection contre la fraude en temps réel et ne nécessite aucun temps de développement supplémentaire. ![](https://b.stripecdn.com/docs-statics-srv/assets/radar-insights-sfcc.bc57c92d0232d38564a8d68fdb0fa94e.png) Pour activer l’affichage des statistiques, accédez à **Business Manager > Merchant Tools > Custom Preferences > Stripe Configs** et définissez **Risk Score Data** sur `Yes`. ## See also - [Guide de l’utilisateur](https://docs.stripe.com/use-stripe-apps/salesforce-commerce-cloud/user-guide.md)