Plattformkonfiguration

Installieren Sie @capacitor-community/stripe und synchronisieren Sie die nativen Projekte. Capacitor 8 registriert das Plugin automatisch. Sie müssen daher weder MainActivity bearbeiten noch einen manuellen Aufruf registerPlugin hinzufügen.

npm install @capacitor-community/stripe
npx cap sync

Das Plugin benötigt Capacitor ab 8. Für das Web ist zusätzlich die Peer-Abhängigkeit stripe-pwa-elements erforderlich. Bewahren Sie den geheimen Stripe-Schlüssel ausschließlich auf Ihrem Server auf. Siehe Serverintegration.

Der Weg zur ersten Zahlung

Gehen Sie für den ersten erfolgreichen PaymentSheet-Durchlauf in dieser Reihenfolge vor:

1. Schließen Sie die Plattformschritte auf dieser Seite ab.
2. Wählen Sie eine Framework-Anleitung und initialisieren Sie Stripe dort: Vanilla JS, Angular oder React.
3. Erstellen Sie auf Ihrem Server einen Test-PaymentIntent und geben Sie dessen Client Secret zurück. Siehe Serverintegration.
4. Zeigen Sie PaymentSheet an und prüfen Sie anschließend das Listener-Ergebnis (Completed, Canceled oder Failed). Der endgültige Zahlungszustand stammt weiterhin aus Ihren Stripe-Webhooks.

PaymentFlow, Apple Pay und Google Pay sind weitere Optionen, nachdem PaymentSheet funktioniert.

Android-Konfiguration

Für das Plugin selbst sind keine zusätzlichen Gradle-Einstellungen oder Registrierungen in MainActivity erforderlich.

Google Pay unter Android muss vor dem Laden des Plugins über Anwendungsmetadaten konfiguriert werden. Folgen Sie Google Pay.

Optionales Stripe Connect: Ergänzen Sie die Metadaten com.getcapacitor.community.stripe.stripe_account, wenn Android-Google-Pay gegen ein verbundenes Konto arbeiten soll. Native und Web-Versionen von PaymentSheet, PaymentFlow, Apple Pay und Google Pay akzeptieren außerdem stripeAccount an initialize.

iOS-Konfiguration

Ergänzen Sie NSCameraUsageDescription, damit PaymentSheet Karten scannen kann:

  	<key>UIViewControllerBasedStatusBarAppearance</key>
	  <true/>

+   <key>NSCameraUsageDescription</key>
+   <string>Need camera access for read credit card.</string>
  </dict>

Das Plugin wird unter iOS automatisch geladen. Apple Pay benötigt zusätzlich eine Apple Merchant ID und ein Zertifikat. Folgen Sie Apple Pay.

Setzen Sie für 3D-Secure-Weiterleitungen beim Erstellen von PaymentSheet oder PaymentFlow returnURL und rufen Sie anschließend handleURLCallback aus Ihrem App-URL-Handler auf. Siehe Initialisierung.

Web-Konfiguration

Installieren Sie stripe-pwa-elements und rufen Sie beim Bootstrap einmal defineCustomElements() auf. Stellen Sie die Anwendung in Entwicklung und Produktion über HTTPS bereit.

Wählen Sie einen Framework-Schnellstart. Es sind Alternativen, keine aufeinanderfolgenden Schritte:

• Vanilla-JS-Schnellstart
• Angular-Schnellstart
• React-Schnellstart

Fahren Sie nach der Initialisierung mit Serverintegration und anschließend PaymentSheet fort.