# Beispielanwendungen Probieren Sie Stripe Terminal mit den Beispielanwendungen und einem simulierten Lesegerät aus. > Einen detaillierteren Leitfaden mit Details zur [servergestützten Integration](https://support.stripe.com/questions/terminal-server-driven-integration), bei der nur die Stripe API verwendet wird, finden Sie in der [Beispielintegration](https://docs.stripe.com/terminal/quickstart.md). Die Integration von Stripe Terminal beginnt mit Ihrer Point-of-Sale-Anwendung an einem physischen Standort. Sie kommuniziert über das Terminal SDK mit einem Lesegerät, um persönliche Zahlungen von Ihren Kunden/Kundinnen zu erfassen. Das Backend arbeitet mit der Point-of-Sale-Anwendung zusammen, um das Terminal SDK zu authentifizieren und die Zahlungen abzuschließen. ![](https://b.stripecdn.com/docs-statics-srv/assets/example-app-simulator-integration-architecture.c687f5119cda8972233e61f684ae56a5.png) Bevor Sie mit Ihrer eigenen Integration beginnen, empfehlen wir Ihnen, eine der Terminal-Beispielanwendungen einzurichten. Dadurch erhalten Sie ein besseres Gefühl dafür, wie die Komponenten einer Terminal-Integration zusammenpassen, und können die Interaktionen zwischen dem SDK, dem Lesegerät, Ihrer Point-of-Sale-Anwendung und Ihrem Backend-Code nachvollziehen. ## Beispiel-Backend bereitstellen Um mit Beispielanwendungen zu starten, richten Sie das Sinatra-basierte [Beispiel-Backend](https://github.com/stripe/example-terminal-backend) ein, indem Sie die Anweisungen in der [README](https://github.com/stripe/example-terminal-backend)-Datei befolgen. Sie können das Backend entweder lokal ausführen oder es mit einem kostenlosen Konto in Render bereitstellen. Das Beispiel-Backend arbeitet mit der Beispielanwendung zusammen, um das Terminal SDK zu authentifizieren und die Zahlungen abzuschließen. ## Beispielanwendung ausführen Eine der Beispielanwendungen erstellen und starten: #### JavaScript 1. Kopieren Sie das Beispiel von [GitHub](https://github.com/stripe/stripe-terminal-js-demo): ```bash git clone https://github.com/stripe/stripe-terminal-js-demo.git ``` 1. Führen Sie das Beispiel mit den folgenden Befehlen aus: ```bash cd stripe-terminal-js-demo npm install npm run start ``` 1. Geben Sie im ausgeführten Beispiel die URL des Beispiel-Backends ein, das Sie in [Schritt 1](https://docs.stripe.com/terminal/example-applications.md#set-up-backend) bereitgestellt haben. #### iOS 1. Kopieren Sie das Beispiel von [GitHub](https://github.com/stripe/stripe-terminal-ios): ```bash git clone https://github.com/stripe/stripe-terminal-ios.git ``` 1. Öffnen Sie `Example/Example.xcworkspace` in Xcode. 2. Legen Sie in `AppDelegate.swift` die URL der Render-App fest, die Sie soeben bereitgestellt haben. 3. Erstellen Sie die App und führen Sie sie aus. #### Android 1. Kopieren Sie das Beispiel von [GitHub](https://github.com/stripe/stripe-terminal-android): ```bash git clone https://github.com/stripe/stripe-terminal-android.git ``` 1. Importieren Sie das Projekt `Example` in Android Studio. 2. Legen Sie in `gradle.properties` die URL der Render-App fest, die Sie soeben bereitgestellt haben. 3. Erstellen Sie die App und führen Sie sie aus. #### React Native 1. Kopieren Sie das Beispiel von [GitHub](https://github.com/stripe/stripe-terminal-react-native): ```bash git clone https://github.com/stripe/stripe-terminal-react-native.git ``` 1. [Expo-CLI](https://docs.expo.dev/get-started/installation/) und Paketabhängigkeiten installieren ```bash yarn global add expo-cli ``` 1. Paketabhängigkeiten der Beispiel-App installieren ```bash cd stripe-terminal-react-native/example-app yarn ``` 1. Kopieren Sie `example-app/.env.example` in `example-app/.env` und legen Sie die URL der Render-App fest, die Sie soeben bereitgestellt haben. 2. Erstellen Sie die App und führen Sie sie aus. ```bash ### android npx expo run:android ### ios npx expo run:ios ``` ## Mit einem simulierten Lesegerät verbinden #### JavaScript Sobald Sie die Beispiel-App ausgeführt haben, wählen Sie **Simuliertes Lesegerät** aus, um sich mit einem [simulierten Lesegerät](https://docs.stripe.com/terminal/references/testing.md#simulated-reader) zu verbinden. ![](https://b.stripecdn.com/docs-statics-srv/assets/js-example-app-simulator.c226b6ba5461d0c5b3b8f06c0c1a3469.png) Die JavaScript-Beispiel-App, die mit einem simulierten Lesegerät verbunden ist #### iOS Nachdem Sie das Beispiel ausgeführt haben, wählen Sie **Simuliert**, um die Verbindung zu einem *simulierten Lesegerät* (Stripe Terminal SDKs and server-driven integrations come with a built-in simulated card reader, so you can develop and test your app without connecting to physical hardware. Whether your integration is complete or you're still building it, use the simulated reader to emulate all the Terminal flows in your app) herzustellen. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-example-app-simulator.048c8083664b139b272754aed05ed442.png) Die iOS-Beispiel-App, die mit einem simulierten Lesegerät verbunden ist > Um die Beispiel-App mit dem iOS-Simulator auszuführen, aktivieren Sie einen simulierten Standort. Wählen Sie aus dem Xcode-Menü **Debug** (Fehler beheben) die Option **Simulate Location** (Standort simulieren) aus. Weitere Informationen dazu, wie Stripe Terminal den Gerätestandort verwendet, finden Sie unter [iOS-App konfigurieren](https://docs.stripe.com/terminal/payments/setup-integration.md?terminal-sdk-platform=ios#configure). #### Android Nachdem Sie das Beispiel ausgeführt haben, wählen Sie **Simuliert**, um die Verbindung zu einem *simulierten Lesegerät* (Stripe Terminal SDKs and server-driven integrations come with a built-in simulated card reader, so you can develop and test your app without connecting to physical hardware. Whether your integration is complete or you're still building it, use the simulated reader to emulate all the Terminal flows in your app) herzustellen. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-example-app-simulator.72ace5d890bc698d7900e10d98d068a2.png) Die Android-Beispiel-App, die mit einem simulierten Lesegerät verbunden ist #### React Native Nachdem Sie das Beispiel ausgeführt haben, wählen Sie **Simuliert**, um die Verbindung zu einem *simulierten Lesegerät* (Stripe Terminal SDKs and server-driven integrations come with a built-in simulated card reader, so you can develop and test your app without connecting to physical hardware. Whether your integration is complete or you're still building it, use the simulated reader to emulate all the Terminal flows in your app) herzustellen. ![](https://b.stripecdn.com/docs-statics-srv/assets/react-native-example-app-simulator.268ea316e60ec49ee877240d255c8b58.png) Die mit einem simulierten Lesegerät verbundene React Native-Beispiel-App Das simulierte Lesegerät verarbeitet Ereignisse genau wie ein physisches Lesegerät, sodass Sie mit dem Erfassen Ihrer ersten Zahlung fortfahren können. Die Funktionalität des simulierten Lesegeräts ist in das SDK integriert, sodass Sie damit Ihre eigene Point-of-Sale-Anwendung entwickeln und testen können, ohne eine Verbindung zu einem physischen Gerät herzustellen. ## Erste Zahlung erfassen Erfassen Sie Ihre erste Zahlung mit der Beispielanwendung und einem simulierten Lesegerät. Jedes der Beispiele enthält ein Ereignisprotokoll, das Sie bei der Integration von Terminal in Ihre eigene Anwendung als Referenz verwenden können. Beim Erfassen der ersten Zahlung sehen Sie die folgende Sequenz: - **Zahlung erstellen**: Die Beispielanwendung erfasst eine Zahlungsmethode mithilfe des SDK. - **Zahlungsmethode erfassen**: Das simulierte Lesegerät erhält eine Karte. - **Verarbeiten und erfassen**: Die Beispielanwendung und das Backend schließen die Zahlung ab. > (Optional) Erfolgen [Autorisierung und Erfassung getrennt voneinander](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md), wird vor Transaktionsabschluss ein Abgleich vorgenommen. Terminal-Zahlungen können zudem auch [automatisch erfasst werden](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method). #### JavaScript ![JavaScript-Beispiel-App, die mit einem simulierten Lesegerät verbunden ist](https://b.stripecdn.com/docs-statics-srv/assets/js-example-app-payment.8069a69561566519d001038a46bfe6b5.png) Erfassen einer Zahlung mit der JavaScript-Beispiel-App und einem simulierten Lesegerät #### iOS ![iOS-Beispiel-App, die mit einem simulierten Lesegerät verbunden ist](https://b.stripecdn.com/docs-statics-srv/assets/ios-example-app-payment.64ce79484049f491b4798d080e2fb38c.png) Erfassen einer Zahlung mit der iOS-Beispiel-App und einem simulierten Lesegerät #### Android ![Android-Beispiel-App, die mit dem simulierten Lesegerät verbunden ist](https://b.stripecdn.com/docs-statics-srv/assets/android-example-app-payment.c79ff20f8c40fd36d348fe7f7d1b9ae5.png) Erfassen einer Zahlung mit der Android-Beispiel-App und einem simulierten Lesegerät #### React Native ![React Native-Beispiel-App, die mit einem simulierten Lesegerät verbunden ist](https://b.stripecdn.com/docs-statics-srv/assets/react-native-example-app-payment.be4c67924b431cb58a8057986562e6c3.png) Erfassen einer Zahlung mit der React Native-Beispiel-App und einem simulierten Lesegerät ## Nächste Schritte - [Integration entwerfen](https://docs.stripe.com/terminal/designing-integration.md)