# Implementierungsleitfaden für die Stripe-App für Salesforce B2C Commerce ## Business Manager einrichten Für die volle Funktionalität benötigt die Stripe-App für Salesforce B2C Commerce (LINK Cartridge) mehrere Cartridges. Außerdem ist die Controller- und SFRA-Unterstützung auf zwei separate Cartridges aufgeteilt, was die Installation und Verwendung der einzelnen Modelle erleichtert. Importieren Sie alle drei Cartridges in UX Studio und verknüpfen Sie sie mit einer Serververbindung. ### Website-Cartridge-Zuweisung 1. Navigieren Sie zu **Administration > Sites > Manage Sites** (Administration > Websites > Websites verwalten). 1. Klicken Sie auf den Namen der Storefront-Website, zu der Sie Stripe Funktionen hinzufügen möchten. 1. Wählen Sie die Registerkarte **Settings** (Einstellungen). 1. Für die Storefront Reference Architecture (SFRA) fügen Sie `app_stripe_sfra:int_stripe_sfra:int_stripe_core` zum Cartridge-Pfad hinzu. Wiederholen Sie diese Schritte für jede Storefront-Site, auf der Sie Stripe implementieren möchten. ### Zuweisung der Business Manager Cartridge 1. Navigieren Sie zu **Administration > Sites > Manage Sites** (Administration > Websites > Websites verwalten). 1. Klicken Sie auf **Business Manager Site** (Business Manager-Website) und dann auf den Link **Manage the Business Manager site** (Business Manager-Website verwalten). 1. Fügen Sie `int_stripe_core` zum Pfad „Cartridges:“ hinzu. ### Metadaten-Import 1. Navigieren Sie zum Metadaten-Ordner des Projekts und öffnen Sie den Ordner `stripe_site_template`. 1. Öffnen Sie den Ordner `sites` und ändern Sie den Ordner `siteIDHere` in die Site-ID der gewünschten Site. 1. Fügen Sie einen Ordner für jede Website hinzu, die Sie mit Stripe verwenden möchten. 1. Navigieren Sie zu **Administration > Site Development > Site Import & Export** (Administration > Website-Entwicklung > Website-Import und -Export). 1. Komprimieren Sie den Ordner `stripe_site_template` in eine ZIP-Datei und importieren Sie sie. ### Stripe-Styling erstellen Aktualisieren Sie bei Bedarf in `package.json` im selben Stammverzeichnis den Pfad zu Ihrer SFRA-Basisinstallation. Normalerweise gibt es einen übergeordneten Projektordner, in den die Repositorys der SFRA-Basis-Cartridge und aller erforderlichen Plugins, Bibliotheken und aller anderen LINK-Cartridges geklont werden. Wenn Sie die Stripe-Cartridge auch in diesen Ordner geklont haben, müssen Sie die Eigenschaft `paths.base` nicht aktualisieren. Wenn Sie die Cartridge nicht in diesen Ordner geklont haben, aktualisieren Sie die Eigenschaft `paths.base` in `package.json` mit dem relativen Pfad zu dem lokalen Verzeichnis, das das Storefront Reference Architecture-Repository enthält. Der folgende Standardwert für `paths.base` ist: ```json "paths": { "base": "../storefront-reference-architecture/cartridges/app_storefront_base/" } ``` Wenn Sie sicher sind, dass `package.json` über den korrekten Pfad zu den SFRA-Cartridges verfügt, führen Sie den Befehl `npm run compile:scss` aus dem Stammverzeichnis des Stripe -Repositorys aus. ### Neue Zahlungsabwickler hinzufügen Es gibt zwei Zahlungsabwickler, die in der Stripe-Cartridge verwendet werden. `STRIPE_CREDIT` wickelt nur Kreditkartenzahlungen ab, während `STRIPE_APM` Zahlungsmethoden über [Payment Element](https://docs.stripe.com/payments/payment-element.md) und [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md) abiwickelt. #### Zahlungsabwickler für Kreditkarten 1. Klicken Sie unter **Merchant Tools“ (Händlertools) > Ordering (Bestellungen) > Payment Processors (Zahlungsabwickler)** auf **New** (Neu). 1. Legen Sie im neuen Fenster die ID auf `STRIPE_CREDIT` fest und klicken Sie auf **Übernehmen**. #### Zahlungsabwickler für alternative Zahlungsmethoden (APM) 1. Klicken Sie unter **Merchant Tools“ (Händlertools) > Ordering (Bestellungen) > Payment Processors (Zahlungsabwickler)** auf **New** (Neu). 1. Legen Sie im neuen Fenster das ID-Attribut auf den Wert `STRIPE_APM` fest und klicken Sie auf **Übernehmen**. ### Zahlungsmethoden aktualisieren Klicken Sie unter **Merchant Tools (Händlertools) > Ordering (Bestellungen) > Payment Methods (Zahlungsmethoden)** auf die Zahlungsmethode **CREDIT\_CARD** und wählen Sie im Abschnitt mit den Details zu **CREDIT\_CARD** im Dropdown-Menü den Zahlungsabwickler **STRIPE\_CREDIT**. Damit bei dynamischen Zahlungsmethoden oder Verwendung der Schaltfläche für die Zahlungsanfrage alle von Stripe unterstützten Zahlungsmethoden angeboten werden können, aktivieren Sie **STRIPE\_APM\_METHODS**. Weitere Informationen finden Sie im [Leitfaden zu Zahlungsmethoden](https://stripe.com/guides/payment-methods-guide). Um die Stripe-Schaltfläche für die Zahlungsanfrage zu verwenden, aktivieren Sie die Zahlungsmethode **STRIPE\_PAYMENT\_REQUEST\_BTN**. Weitere Informationen finden Sie im Abschnitt [Schaltfläche für die Zahlungsanfrage](https://docs.stripe.com/stripe-js/elements/payment-request-button.md). ## Stripe Salesforce Commerce-App installieren Verwenden Sie Stripe-Apps, um die Sicherheit zu erhöhen und die Verwendung unterschiedlicher eingeschränkter Schlüssel für jede Integration mit Ihrem Stripe-Konto zu vereinfachen. Der Prozess der Installation der Stripe-App und des Erwerbs der neu generierten geheimen und veröffentlichbaren [Schlüssel](https://docs.stripe.com/keys.md) ist für Ihre Integration mit dem Salesforce Commerce-Connector von wesentlicher Bedeutung. Durch dieses Verfahren wird es überflüssig, manuell einen eigenen eingeschränkten Schlüssel zu erstellen oder einen geheimen Schlüssel zu verwenden. So integrieren Sie die Salesforce Commerce-App und verstärken die Sicherheitsinfrastruktur Ihres Kontos: 1. Navigieren Sie zum [Stripe App Marketplace](https://marketplace.stripe.com/) und klicken Sie dann auf [Install the Salesforce Commerce app](https://marketplace.stripe.com/apps/install/link/com.stripe.SalesforceCommerce) (Salesforce Commerce-App installieren). 1. Wählen Sie das Stripe-Konto aus, in dem Sie die App installieren möchten. 1. Überprüfen und genehmigen Sie die App-Berechtigungen, installieren Sie die App in einer Testumgebung oder im Live-Modus und klicken Sie dann auf **Installieren**. 1. Bewahren Sie die Schlüssel nach der Installation der App an einem sicheren Ort auf, an dem Sie sie nicht verlieren. Um sich daran zu erinnern, wo Sie sie gespeichert haben, können Sie [eine Notiz zu dem Schlüssel im Dashboard hinterlassen](https://docs.stripe.com/keys.md#reveal-an-api-secret-key-live-mode). 1. Verwenden Sie den neu generierten veröffentlichbaren Schlüssel und den Geheimschlüssel, um die App-Konfiguration abzuschließen. 1. Um die App zu verwalten oder nach der Installation neue Sicherheitsschlüssel zu generieren, rufen Sie die Seite mit der Anwendung in einer [Sandbox](https://dashboard.stripe.com/test/settings/apps/com.stripe.SalesforceCommerce) oder im [Live-Modus](https://dashboard.stripe.com/settings/apps/com.stripe.SalesforceCommerce) auf. ## Konfiguration Passen Sie die Konfigurationen unter **Merchant Tools (Händlertools) > Site Preferences (Website-Einstellungen) > Custom Site Preferences (Benutzerdefinierte Website-Einstellungen) > Stripe Configurations (Stripe-Konfigurationen)** mit websitespezifischen Werten an. - Füllen Sie den geheimen Stripe-API-Schlüssel mit den Werten aus der Stripe Salesforce Commerce-App. - Veröffentlichen Sie den veröffentlichbaren API-Schlüssel mit den Werten aus der Stripe Salesforce Commerce-App. - **Is this SFRA installation (Ist dies eine SFRA-Installation):** Auf `yes` setzen, wenn die aktuelle Website die Storefront Reference Architecture (SFRA) verwendet. - **Capture Funds on Stripe Charge (Bei Stripe-Zahlung Gelder erfassen):** Der Standardwert ist `true` (Ja). Setzen Sie den Wert auf `false` (Nein), um stattdessen Stripe-Zahlungen zu autorisieren. - **Stripe Card Element CSS Style (CSS-Stil des Stripe-Card-Elements):** Legen Sie das CSS-Styling fest, das auf das Card-Element angewendet werden soll, um es an den allgemeinen Storefront-Stil anzupassen (z. B. `{"base": {"fontFamily": "Arial, sans-serif","fontSize": "14px","color": "#C1C7CD"},"invalid": {"color": "red" } }`). - **Stripe API URL:** `https://js.stripe.com/dahlia/stripe.js` - **Stripe Payment Request Button Style:** (Stil der Stripe-Schaltfläche für Zahlungsanfragen): Wählen Sie für die Schaltfläche für die Zahlungsanfrage das eingeschränkte CSS-Styling aus. Weitere Einzelheiten finden Sie unter [Stil für das Element festlegen](https://docs.stripe.com/stripe-js/elements/payment-request-button.md#styling-the-element). - **Verifizierungszeichenfolge für Apple Pay:** Geben Sie die im Stripe-Dashboard bereitgestellte Apple-Verifizierungszeichenfolge ein. Dies ist eine einmalige Aktivierung. Die Stripe-Konsole übermittelt bei der Einrichtung eine Web-Verifizierungszeichenfolge für Apple Pay. Konfigurieren Sie dies in der Sandbox, wenn Sie die Schaltfläche für Zahlungsanfragen als Zahlungsmittel in der Storefront verwenden. - **Country Code (Ländercode) (Stripe-Schaltfläche für Zahlungsanfrage):** Hierbei handelt es sich um den Standard-Ländercode (zum Beispiel U.S.) für die Schaltfläche für die Zahlungsanfrage. Auf einer Website für mehrere Länder ist möglicherweise eine Anpassung erforderlich, damit statt der Website-Einstellung der Ländercode dynamisch übergeben wird. Weitere Informationen finden Sie unter [Zahlungsanfrageinstanz erstellen](https://docs.stripe.com/stripe-js/elements/payment-request-button.md). - **Stripe Webhook Signing Secret (Stripe-Webhook-Signaturgeheimnis):** Geben Sie das vom Stripe-Dashboard bereitgestellte *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests)-Signaturgeheimnis ein. Stripe signiert Webhook-Ereignisse und übergibt eine Validierung an SFCC. SFCC validiert die Inhalte der Nachricht anhand dieses Geheimnisses. - **Stripe allowed Webhook Statuses (Von Stripe zugelassene Webhook-Statusangaben):** Konfigurieren Sie die [zulässigen Statusangaben](https://docs.stripe.com/use-stripe-apps/salesforce-commerce-cloud/implementation-guide.md#stripe-dashboard-set-up), auf die Webhooks reagieren sollen. ![](https://b.stripecdn.com/docs-statics-srv/assets/configuration-webhook-statuses.01dca58aedb406537570122a457afa09.png) - **Stripe Enabled (Stripe aktiviert):** Aktiviert oder deaktiviert die Cartridge. ## Stripe Quick Setup Alternativ können Sie Stripe im Business Manager über **Stripe Quick Setup** (Stripe-Schnelleinrichtung) konfigurieren. 1. Melden Sie sich bei Ihrem Business Manager an. 1. Suchen Sie im **Business Manager** unter **Administration** nach „Stripe Quick Setup“ (Stripe-Schnelleinrichtung). 1. Wählen Sie die Websites aus, für die Sie Stripe konfigurieren möchten. 1. Geben Sie Ihren aus der Stripe Salesforce Commerce-App abgerufenen `Stripe Publishable Key` und `Restricted Access key` ein. 1. Klicken Sie auf **Quick Setup**. ## Apple Pay einrichten: Für Apple Pay: Aktualisieren Sie `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(); }); ``` Richten Sie für eine der Websites in der Sandbox vorübergehend einen Alias ein, damit die Domain im Stripe-Dashboard verifiziert werden kann. Der Alias muss in etwa so lauten: ```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": "/", } ] } ``` Der Wert für das Gebietsschema muss ein Gebietsschema sein, das nicht deaktiviert ist. 1. Klicken Sie auf der Seite [Zahlungsmethoden-Domains](https://dashboard.stripe.com/settings/payment_method_domains) auf **Neue Domain hinzufügen**. 1. Geben Sie den Namen Ihrer Domain ein. 1. Klicken Sie auf **Speichern und fortfahren**. 1. Laden Sie die [Domain-Zuordnungsdatei](https://stripe.com/files/apple-pay/apple-developer-merchantid-domain-association) herunter. 1. Hosten Sie die Datei unter `/.well-known/apple-developer-merchantid-domain-association`. Beispiel: Wenn Sie `https://example.com` registrieren, stellen Sie die Datei unter `https://example.com/.well-known/apple-developer-merchantid-domain-association` zur Verfügung. 1. Klicken Sie auf **Verifizieren**. ## Storefront-Code aktualisieren Der Code der LINK Basis-Cartridge unterstützt alle von Stripe unterstützten Kreditkarten. Die Liste der zulässigen Karten wird an der Storefont weiterhin durch die Liste der Kredit-/Debitkarten im Business Manager unter „Merchant Tools“ (Händlertools) > „Ordering“ (Bestellungen) > „Payment Methods“ (Zahlungsmethoden) > „Credit/Debit Cards“ (Kredit-/Debitkarten) begrenzt. Nehmen Sie die folgenden Änderungen am Storefront-Code vor. Die angegebenen Beispiele basieren auf SFRA Version 4.4. In den folgenden Abschnitten werden die Anpassungen beschrieben, die am SFRA-Code vorgenommen wurden. Es gibt viele Controller-Endpoints, die angehängt werden, anstatt zu ersetzen. Diese werden nicht behandelt, da sie ohne Änderungen funktionieren sollten. Controller-Aktualisierungen sind nur für ersetzte Endpoints erforderlich. Wenn Sie diese Endpoints in Ihrer Integration bereits ersetzt haben, fügen Sie die Änderungen an der Basis-Cartridge dem ersetzten Controller hinzu. Wenn Sie diese Endpoints nicht erweitert/ersetzt haben, brauchen Sie nichts weiter zu tun. ### Controller: CheckoutServices.js Pfad: `app_stripe_sfra/cartridge/controllers/CheckoutServices.js` Entfernen Sie die Zahlungsmethodenvalidierung im 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; } ``` Aktualisieren Sie den Code für die Bestellungserstellung: ```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(); } ``` Aktualisieren Sie den Code für die Bestellungsplatzierung: ```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 orderconst 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(); } ``` ### Controller: PaymentInstruments.js Pfad: `app_stripe_sfra/cartridge/controllers/PaymentInstruments.js` Ersetzen Sie den Endpoint `DeletePayment` durch folgenden Code: ```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(); }); ``` ### Controller: RedirectURL.js Pfad: `app_stripe_sfra/cartridge/controllers/RedirectURL.js` Fügen Sie der Funktion `Start` folgenden Code hinzu: ```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(); }); ``` ## Externe Schnittstellen Die Stripe-Funktionalität ist stark von externen Aufrufen der Stripe-Dienste abhängig. Alle externen Schnittstellen verwenden das Service Framework, um mit der Stripe-API zu kommunizieren. Die Erstellung und Nutzung von Stripe-Konten ist kostenlos. Der überwiegende Anteil der Kommunikation mit Stripe-Diensten wird im [Stripe-Dashboard](https://dashboard.stripe.com) protokolliert und kann dort eingesehen werden. Wir empfehlen Ihnen, das Stripe-Dashboard zum Überwachen und Testen Ihrer Integration zu verwenden. Die Hauptkonfiguration für die Integration der Stripe-Dienste finden Sie unter „Administration“ > „Operations“ (Betrieb) > „Services“ (Dienste) mit einem anderen Dienst für jeden externen Aufruf: - `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` Alle diese Dienste verwenden das gleiche Profil und die gleichen Anmeldeinformationen. Sie unterscheiden sich lediglich im Präfix des Protokollnamens und darin, ob das Kommunikationsprotokoll aktiviert ist. ## Stripe Payment Element Die Stripe Cartridge unterstützt Stripe Payment Element als Zahlungsmethode. Das Payment Element ist eine integrierbare Komponente der Nutzeroberfläche, mit der Sie mehr als 25 Zahlungsmethoden mit einer einzigen Integration akzeptieren können. ![](https://b.stripecdn.com/docs-statics-srv/assets/Payment-Element-SPM-Link.1cf2bf285665f1c139d20d08e6969ea0.png) Um das Element Payment zu aktivieren, gehen Sie zu **Business Manager > Händler-Tools > Bestellung > Zahlungsmethoden** und aktivieren Sie die Zahlungsmethode mit der ID `STRIPE_PAYMENT_ELEMENT`. Im Storefront-Bereich Bezahlvorgang > Zahlung gibt es ein Widget mit allen aktivierten Zahlungsmethoden im Stripe- [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Wenn Sie Payment Element im Business Manager aktivieren, kann es alle anderen Zahlungsmethoden ersetzen. Sie können alle Zahlungsmethoden deaktivieren und stattdessen `STRIPE_PAYMENT_ELEMENT` verwenden. Damit die Zahlungsmethoden aus dem Stripe Payment Element für die zukünftige Verwendung gespeichert werden kann, gehen Sie zu **Business Manager > Nutzerdefinierte Einstellungen > Stripe-Konfigurationen** und setzen Sie **Stripe Payment Element: Zahlungsmethode für zukünftige Käufe speichern** auf `Yes`. Um eine Liste der gespeicherten Zahlungsmethoden beim Bezahlvorgang anzuzeigen, gehen Sie zu **Business Manager > Zahlungsmethoden** und aktivieren Sie die Zahlungsmethode `CREDIT_CARD`. Wenn sie mit `STRIPE_PAYMENT_ELEMENT` aktiviert ist, enthält die Registerkarte Kreditkarte eine Liste der gespeicherten Karten (falls vorhanden). ## Stripe Radar-Ansicht zur Darstellung von Einblicken Die Stripe LINK-Cartridge unterstützt die Radar-Insights-Ansicht, um Risikoerkenntnisse im Bereich „Bestellungen“ im Business Manager anzuzeigen. [Radar](https://docs.stripe.com/radar.md) bietet Echtzeit-Betrugsvorbeugung und erfordert keinen zusätzlichen Entwicklungsaufwand. Fachkräfte im Bereich Betrugsvorbeugung können [Radar for Fraud Teams](https://stripe.com/radar/fraud-teams) hinzufügen, um den Schutz zu individualisieren und tiefere Einblicke zu erhalten. ![](https://b.stripecdn.com/docs-statics-srv/assets/radar-insights-sfcc.bc57c92d0232d38564a8d68fdb0fa94e.png) Um die Anzeige der Risikoeinblicke zu aktivieren, gehen Sie zu **Business Manager > Händler-Tools > Nutzerdefinierte Einstellungen > Stripe-Konfigurationen** und setzen Sie **Risikobewertungsdaten** auf `Yes`. ## See also - [Nutzerleitfaden](https://docs.stripe.com/use-stripe-apps/salesforce-commerce-cloud/user-guide.md)