Implementierung von Stripe-Zahlungslinks in Capacitor-Apps gemäß neuen Apple-Richtlinien

Ab dem 1. Mai 2025 hat Apple erhebliche Änderungen an seinen Richtlinien für die App Store-Bewertung vorgenommen, nachdem das Gericht in der Epic v. Apple-Verhandlung. Diese Änderungen erlauben es Entwicklern in den Vereinigten Staaten, Links zu externen Zahlungsmethoden für digitale Güter und Dienstleistungen zu erstellen, was alternative Optionen zum Apple-Bezahlprozess im App Store ermöglicht.

Der Epische Kampf, der die mobilen Zahlungen für immer veränderte

Der Weg zu diesem Moment war lang und umstritten. Es begann im August 2020, als Epic Games, der Schöpfer des beliebten Spiels Fortnite, bewusst Apple-Richtlinien für den App Store verletzte, indem er eine direkte Zahlungsoption implementierte, die Apple's 30-Prozent-Kommission umging. Apple entfernte Fortnite daraufhin aus dem App Store, und Epic reagierte mit einer Klage, bei der Apple's Kontrolle über die iOS-App-Verteilung und die Bezahlprozesse im App Store angefochten wurde.

Nach Jahren von Rechtsstreitigkeiten, Berufungen und Gegenberufungen hat das Gericht schließlich entschieden, dass Apple Entwicklern erlauben muss, Benutzern alternative Zahlungsmethoden außerhalb ihrer Apps zu zeigen. Diese Entscheidung ändert grundlegend die Wirtschaft des App Store-Ökosystems, das seit seiner Gründung im Jahr 2008 unter der gleichen grundlegenden finanziellen Modell betrieben wurde.

Das Endurteil - Keine weiteren Berufungen

Was macht diese Entscheidung besonders bedeutend ist, ist, dass sie endgültig ist und nicht weiter angefochten werden kann. Das Supreme Court hat Anfang 2025 Apples Berufung abgelehnt, was die Entscheidung des unteren Gerichts als Gesetz des Landes festigte. Dies bedeutet, dass Entwickler externe Zahlungsmethoden mit Vertrauen implementieren können, dass Apple diese Entscheidung nicht durch weitere rechtliche Angriffe rückgängig machen kann.

Gleiche Behandlung durch Gesetz garantiert

Am wichtigsten ist, dass die Entscheidung explizit festhält, dass Apple keine Apps diskriminieren darf, die externe Zahlungsmethoden verwenden. Das Gericht hat Apple explizit davon abgeraten:

Zahlung von zusätzlichen Gebühren oder Erhebung von zusätzlichen Anforderungen an Apps, die externe Zahlungsmethoden verwenden
Bereitstellung von Vorzugsbehandlung in Suchergebnissen oder Featuring von Apps, die ausschließlich Apples IAP-System verwenden
Verwendung technischer Maßnahmen, um externe Zahlungserfahrungen gegenüber Apples eigenen System als minderwertig darzustellen
Erhebung von aufwendigen Offenlegungserfordernissen über grundlegende Verbraucherinformationen

Diese expliziten Schutzmaßnahmen bedeuten, dass Entwickler Stripe oder andere externe Zahlungsdienstleister ohne Angst vor subtiler Rache oder Diskriminierung von Apple implementieren können. Das Spielfeld ist rechtlich ausgewogen, und Apple muss alle Apps gleich behandeln, unabhängig von ihren Zahlungsmethodenwahl.

Die Entscheidung stellt eine der bedeutendsten Herausforderungen für Apples geschlossene Gartenansicht dar und markiert einen wichtigen Wendepunkt in der Art und Weise, wie die Monetarisierung von mobilen Apps funktionieren kann. Für Entwickler, die sich seit langem über Apples 30-Prozent-Kommission (auf 15 Prozent reduziert für kleine Unternehmen) beschwert haben, bietet diese Entscheidung einen Weg zu höheren Gewinnmargen und mehr Kontrolle über die Kunden Erfahrung.

Finanzielle Vorteile der Verwendung von Stripe gegenüber Apples In-App-Käufen

Die finanziellen Auswirkungen dieser Änderung sind erheblich für Entwickler:

Geringere Zahlungsverarbeitungskosten: Apple verlangt typischerweise eine 30-Prozent-Kommission für In-App-Käufe (15 Prozent für kleine Unternehmen), während Stripes Gebühr nur etwa 2,9 Prozent + 0,30 $ pro Transaktion beträgt. Diese Differenz kann Ihre Gewinnmargen erheblich erhöhen.
Schwächere Auszahlungen: Bei Apple wartet man typischerweise 45-90 Tage, um die eigenen Gelder zu erhalten. Stripe hingegen überweist Zahlungen in Ihrem Bankkonto innerhalb von 2-3 Geschäftstagen.
Einfacherer Rückerstattungsprozess: Behandeln Sie Rückerstattungen direkt über Stripes Dashboard anstatt durch Apples komplexere Rückerstattungssystem.

Diese Kosteneinsparungen und verbesserte Cash-Flow können game-changing sein, insbesondere für kleinere Entwickler und Unternehmen.

In diesem Artikel werden wir untersuchen, wie Sie Stripe Payment Links in Ihrem Capacitor-App implementieren können, um sich von diesen neuen Regeln zu profitieren, während Sie sich gleichzeitig an Apples aktualisierte Richtlinien halten. Die Entscheidung stellt eine der bedeutendsten Herausforderungen für Apples geschlossene Gartenansicht dar und markiert einen wichtigen Wendepunkt in der Art und Weise, wie die Monetarisierung von mobilen Apps funktionieren kann. Für Entwickler, die sich seit langem über Apples 30-Prozent-Kommission (auf 15 Prozent reduziert für kleine Unternehmen) beschwert haben, bietet diese Entscheidung einen Weg zu höheren Gewinnmargen und mehr Kontrolle über die Kunden Erfahrung..

Diese Implementierung basiert auf Stripe’s offiziellem Dokumentation für Zahlungslinks, angepasst speziell für Capacitor-Anwendungen.

Verständnis der neuen Richtlinien

Die aktualisierten Richtlinien für die App Store-Bewertung erlauben Entwicklern nun, Benutzern externe Websites für Zahlungsverarbeitung zuzuführen, insbesondere für digitale Güter und Abonnements. Diese Änderung ist derzeit nur auf Apps im US-App Store anwendbar.

Hauptsächliche Punkte zum Verstehen:

Sie können jetzt externe Zahlungsoptionen für digitale Güter innerhalb Ihrer App verknüpfen
Dies gilt nur für Apps im US-App Store
Sie müssen weiterhin die Anforderungen von Apples Offenlegung einhalten
Sie bleiben für alle Kundensupport und Rückgabehandlungen verantwortlich

Einrichten von Stripe-Zahlungslinks in Ihrer Capacitor-Anwendung

Lassen Sie uns nun in die technische Implementierung eintauchen:

Schritt 1: Erstellen Sie einen Zahlungslink in der Stripe-Dashboard

Erstellen Sie zunächst einen Zahlungslink in Ihrem Stripe-Dashboard:

Navigieren Sie zur Zahlungslinks-Sektion in Ihrem Stripe-Dashboard
Klicken Sie auf „+ Neues“ zum Erstellen eines neuen Zahlungslinks
Definieren Sie Ihre Produkt- oder Abonnement-Daten
Unter den „Nach Zahlung“-Einstellungen wählen Sie „Keine Bestätigungsseite anzeigen“
Legen Sie einen universellen Link als Erfolg-URL fest (wir konfigurieren dies später)
Klicken Sie auf „Link erstellen“ zum Generieren Ihres Zahlungslinks

Schritt 2: Konfigurieren Sie universelle Links in Ihrer Capacitor-App

Um Benutzer nach Zahlungserledigung wieder in Ihre App zu leiten, konfigurieren Sie universelle Links:

Erstellen Sie einen apple-app-site-association Datei auf Ihrem Domain:

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appIDs": ["YOURTEAMID.com.yourdomain.yourapp"],
        "components": [
          {
            "/": "/checkout_redirect*",
            "comment": "Matches any URL whose path starts with /checkout_redirect"
          }
        ]
      }
    ]
  }
}

Hosten Sie diese Datei bei https://yourdomain.com/.well-known/apple-app-site-association
Stellen Sie sicher, dass sie mit dem richtigen MIME-Typ gesendet wird application/json
Konfigurieren Sie Ihr Capacitor-Projekt, um universelle Links zu verarbeiten, indem Sie die entsprechende Berechtigung hinzufügen. Zunächst in Ihrem capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  // Your existing app configuration (appId, appName, etc.)
  plugins: {
    Geolocation: {
      // Request precise location access on iOS
      iosLocationAccuracy: 'reduced'
    }
  }
};

export default config;

Die Berechtigung "Associated Domains" in Ihrem Xcode-Projekt hinzufügen:
- Öffnen Sie Ihr Xcode-Projekt
- Wählen Sie Ihr App-Ziel
- Gehen Sie zu "Zertifikate und Berechtigungen"
- Klicken Sie auf "+ Berechtigung" und wählen Sie "Associated Domains"
- Hinzufügen applinks:yourdomain.com

Schritt 3: Erstellen einer Fallback-Seite

Erstellen Sie eine Fallback-Seite an der Redirect-URL, um Fälle zu behandeln, in denen die App nicht installiert ist:

<!DOCTYPE html>
<html>
<head>
  <title>Redirecting...</title>
  <meta http-equiv="refresh" content="0;url=https://yourdomain.com/app-download">
</head>
<body>
  <p>Redirecting to download page...</p>
</body>
</html>

Schritt 4: Implementieren Sie die Zahlungs-Schaltfläche in Ihrem Capacitor-App

Now, fügen Sie den Zahlungsbutton zu Ihrer App hinzu:

import { Capacitor } from '@capacitor/core';

export async function openPaymentLink(userEmail, userId) {
  // Use your actual Stripe payment link
  const baseUrl = 'https://buy.stripe.com/your_payment_link';
  
  // Add URL parameters to customize the experience
  const params = new URLSearchParams({
    prefilled_email: encodeURIComponent(userEmail),
    client_reference_id: userId
  });

  const fullUrl = `${baseUrl}?${params.toString()}`;
  
  // Simple window.open works in both web and Capacitor
  // Using _blank opens in Safari on iOS which is important for users with saved Stripe Link credentials
  window.open(fullUrl, '_blank');
}

Werden Safari: Öffnen Sie die Zahlungslink in Safari (via window.open) anstatt in einer in-app-Browser ist vorteilhaft, weil Nutzer, die ihre Zahlungsdaten mit Stripe Link zuvor gespeichert haben, ihre Zugangsdaten automatisch zur Verfügung haben. Dies schafft eine glattere Checkout-Erfahrung, bei der Nutzer ihre Kreditkarteninformationen nicht erneut eingeben müssen, was die Reibung und die Abbruchraten erheblich reduziert.

Schritt 5: Behandeln Sie Universal Links in Ihrer App

Konfigurieren Sie Ihre App, um die Universal Links zu behandeln, wenn Nutzer zurückgeleitet werden:

Zuerst installieren Sie das App-Plugin:

npm install @capacitor/app

Registrieren Sie das App-Plugin in Ihrer App:

import { App } from '@capacitor/app';

// In your initialization code
App.addListener('appUrlOpen', (event) => {
  // Example URL: https://yourdomain.com/checkout_redirect?session_id=cs_test_...
  const url = new URL(event.url);
  
  if (url.pathname.startsWith('/checkout_redirect')) {
    // Extract any parameters you need
    const params = new URLSearchParams(url.search);
    const sessionId = params.get('session_id');
    
    // Handle successful payment
    if (sessionId) {
      // Verify the payment on your server if needed
      verifyPayment(sessionId);
      
      // Update UI to reflect successful purchase
      updatePurchaseStatus(true);
    }
  }
});

async function verifyPayment(sessionId) {
  // Call your backend to verify the payment
  // This is optional if you're relying on webhooks
}

function updatePurchaseStatus(success) {
  // Update your app UI to reflect purchase status
}

Schritt 6: Einrichten Sie einen Webhook für die Bestellabwicklung

Schließlich konfigurieren Sie einen Webhook auf Ihrem Server, um erfolgreiche Zahlungen zu bearbeiten:

// Using Express.js as an example
const express = require('express');
const stripe = require('stripe')('sk_test_your_stripe_secret_key');
const app = express();

// Use raw body parser for webhook signature verification
app.post('/webhook', express.raw({type: 'application/json'}), async (req, res) => {
  const sig = req.headers['stripe-signature'];
  const webhookSecret = 'whsec_your_webhook_secret';
  
  let event;
  
  try {
    event = stripe.webhooks.constructEvent(req.body, sig, webhookSecret);
  } catch (err) {
    console.log(`Webhook Error: ${err.message}`);
    return res.status(400).send(`Webhook Error: ${err.message}`);
  }
  
  // Handle the checkout.session.completed event
  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;
    
    // Retrieve client_reference_id (your user ID)
    const userId = session.client_reference_id;
    
    // Grant access to the purchased content
    await grantAccess(userId, session.id);
  }
  
  res.status(200).send();
});

async function grantAccess(userId, sessionId) {
  // Your logic to grant access to the purchased content
  // This could be updating a database, sending a notification, etc.
}

app.listen(3000, () => console.log('Webhook server running on port 3000'));

Android-Kompatibilität

Lasst uns klar sein: Die Epic v. Apple-Entscheidung hat die mobile Zahlungslandschaft grundlegend verändert. Nicht nur direkt die iOS-Apps, sondern auch die Position der Android-Entwickler, die externe Zahlungsmethoden verwendet haben.

Android-Entwickler können jetzt externe Zahlungslösungen mit voller Zuversicht implementieren. Das von der Apple-Richtlinie gesetzte Vorbild schützt Entwickler auf allen Plattformen effektiv vor möglichen zukünftigen Einschränkungen. Diese Gerichtsentscheidung hat bestätigt, was viele Android-Entwickler bereits seit Jahren tun - alternative Zahlungsoptionen mit niedrigeren Gebühren anbieten.

Googles Play Store war immer weniger restriktiv bei externen Zahlungsmethoden als Apple, und jetzt, mit dem geltenden Rechtspräzedenzfall, besteht bei der Implementierung von Stripe oder anderen externen Zahlungsanbietern in Ihren Android-Anwendungen praktisch kein Risiko. Sie können diese Implementierungen mit der Gewissheit vorantreiben, dass Sie auf solidem rechtlichem Boden stehen.

Die Implementierung, die wir für iOS behandelt haben, funktioniert nahezu identisch auf Android-Geräten. Da Googles Play Store keine gleichen Einschränkungen bei externen Zahlungsmethoden hat, können Sie die gleiche Stripe-Zahlungslinks-Ansicht ohne besondere Disclosure-Dialoge verwenden.

Um die tiefen Verlinkungen (entsprechend Universal Links auf iOS) zu handhaben, müssen Sie:

eine App-Links-Einstellung in Ihrer AndroidManifest.xml um die Redirect-URL zu handhaben
eine .well-known/assetlinks.json Datei auf Ihrem Domain mit Ihren Apps-Daten erstellen
die gleiche appUrlOpen Zuhörer-Logik verwenden, um erfolgreiche Zahlungen zu verarbeiten

Die Schönheit von Capacitor besteht darin, dass sich die tatsächliche Zahlungsablauf code nach der Implementierung der plattform-spezifischen Konfigurationen auf beiden Plattformen nicht ändert.

Zahlungs UI erstellen

Hier ist ein Beispiel für eine Zahlungsbutton-Komponente in Vue, die Sie in Ihr Capacitor-Projekt einfügen können:

<template>
  <div class="payment-container">
    <div class="pricing-card">
      <h2 class="mb-4 text-xl font-bold">{{ product.name }}</h2>
      <p class="mb-6 text-gray-600">{{ product.description }}</p>
      <div class="mb-6 price-tag">
        <span class="text-2xl font-bold">${{ product.price }}</span>
        <span v-if="product.isSubscription" class="text-sm text-gray-500">/month</span>
      </div>
      <button 
        @click="handlePayment" 
        class="py-3 w-full font-medium text-white bg-indigo-600 rounded-lg transition-colors hover:bg-indigo-700"
      >
        Purchase Now
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Dialog } from '@capacitor/dialog';

const props = defineProps({
  product: {
    type: Object,
    required: true
  },
  userEmail: {
    type: String,
    default: ''
  },
  userId: {
    type: String,
    required: true
  }
});

const isLoading = ref(false);

async function showExternalPaymentDisclosure() {
  const { value } = await Dialog.confirm({
    title: 'Leaving App for Payment',
    message: 'You are about to leave this app to make a payment. Apple is not responsible for the privacy or security of payments that are not made through the App Store. All payment-related issues, including refunds, must be handled by our support team.',
    okButtonTitle: 'Continue',
    cancelButtonTitle: 'Cancel'
  });
  
  return value;
}

async function openPaymentLink() {
  // Use your actual Stripe payment link
  const baseUrl = 'https://buy.stripe.com/your_payment_link';
  
  // Add URL parameters to customize the experience
  const params = new URLSearchParams({
    prefilled_email: encodeURIComponent(props.userEmail),
    client_reference_id: props.userId
  });

  const fullUrl = `${baseUrl}?${params.toString()}`;
  
  // Simple window.open works in both web and Capacitor
  // Using _blank opens in Safari on iOS which is important for users with saved Stripe Link credentials
  window.open(fullUrl, '_blank');
}

async function handlePayment() {
  isLoading.value = true;
  try {
    // Only show the disclosure on iOS
    if (window.Capacitor?.getPlatform() === 'ios') {
      const userConfirmed = await showExternalPaymentDisclosure();
      if (!userConfirmed) return;
    }
    
    await openPaymentLink();
  } catch (error) {
    console.error('Payment error:', error);
    await Dialog.alert({
      title: 'Payment Error',
      message: 'There was an error initiating the payment. Please try again.'
    });
  } finally {
    isLoading.value = false;
  }
}
</script>

Behandlung unterschiedlicher Regionen

Da die neuen Apple-Richtlinien nur für Apps im US-App-Store gelten, müssen Sie eine Strategie entwickeln, um die Benutzerregion zu erkennen und die entsprechende Zahlungsmethode anzuwenden. Hier ist eine zuverlässigere Vorgehensweise mit IP-Geolokalisierung:

import { Capacitor } from '@capacitor/core';

async function determinePaymentMethod() {
  // Always use Stripe for Android
  if (Capacitor.getPlatform() !== 'ios') {
    return 'external';
  }
  
  try {
    // Use a geolocation service to determine user's country
    const response = await fetch('https://ipapi.co/json/');
    const locationData = await response.json();
    
    // Check if the user is in the United States
    if (locationData.country_code === 'US') {
      return 'external'; // Can use Stripe Payment Links
    } else {
      return 'iap'; // Must use In-App Purchases
    }
  } catch (error) {
    console.error('Error detecting region:', error);
    return 'iap'; // Default to IAP to be safe
  }
}

export async function processPayment(product, userEmail, userId) {
  const paymentMethod = await determinePaymentMethod();
  
  if (paymentMethod === 'external') {
    // Use Stripe Payment Links
    await initiateExternalPayment(userEmail, userId);
  } else {
    // Use Apple's In-App Purchase
    await initiateInAppPurchase(product.appleProductId);
  }
}

Dieser Ansatz verwendet die kostenlose ipapi.co Dienstleistung, um die Benutzerland auf der Grundlage ihrer IP-Adresse zu bestimmen. Sie könnten auch andere Geolokalisierungsdienste wie MaxMind verwenden oder diese Überprüfung serverseitig durchführen, um die Sicherheit zu erhöhen.

Hinweis: Während dieser Ansatz funktioniert, ist es wichtig zu beachten, dass IP-Geolokalisierung nicht immer 100% genau ist. Für missionkritische Anwendungen sollten Sie mehrere Überprüfungsverfahren verwenden oder den Benutzern die Möglichkeit geben, ihre Region manuell auszuwählen.

Genauerer Standortdetection mit Capacitor-Plugins

Für eine genauere Standortdetection können Sie die Capacitor-Geolokalisierungs-Plugin zusammen mit @capgo/capacitor-nativegeocoder verwenden, um das Benutzerland mit höherer Genauigkeit zu bestimmen:

Zuerst müssen Sie die erforderlichen Plugins installieren:

npm install @capacitor/geolocation @capgo/capacitor-nativegeocoder

Konfigurieren Sie die Plugins in Ihrem Capacitor-Projekt. Fügen Sie die folgenden Zeilen in Ihre capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  // Your existing app configuration (appId, appName, etc.)
  plugins: {
    Geolocation: {
      // Request precise location access on iOS
      iosLocationAccuracy: 'reduced'
    }
  }
};

export default config;

Implementieren Sie die Standortbasierte Regionserkennung:

import { Capacitor } from '@capacitor/core';
import { Geolocation } from '@capacitor/geolocation';
import { NativeGeocoder } from '@capgo/capacitor-nativegeocoder';

async function isUserInUSA() {
  try {
    // Request permission first
    const permissionStatus = await Geolocation.requestPermissions();
    
    if (permissionStatus.location === 'granted') {
      // Get current position
      const position = await Geolocation.getCurrentPosition({
        timeout: 10000,
        enableHighAccuracy: false
      });
      
      // Use NativeGeocoder to reverse geocode the coordinates
      const results = await NativeGeocoder.reverseGeocode({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
        useLocale: true,
        maxResults: 1
      });
      
      if (results.addresses.length > 0) {
        // Check if the user is in the USA
        return results.addresses[0].countryCode === 'US';
      }
    }
    
    // If we couldn't determine location or permission denied, fall back to IP detection
    return await isUserInUSAByIP();
  } catch (error) {
    console.error('Error detecting location:', error);
    // Fall back to IP detection on error
    return await isUserInUSAByIP();
  }
}

async function isUserInUSAByIP() {
  try {
    const response = await fetch('https://ipapi.co/json/');
    const data = await response.json();
    return data.country_code === 'US';
  } catch (error) {
    console.error('Error detecting IP location:', error);
    return false; // Default to false to be safe
  }
}

export async function determinePaymentMethod() {
  // Always use Stripe for Android
  if (Capacitor.getPlatform() !== 'ios') {
    return 'external';
  }
  
  // Check if user is in the USA
  const isUSA = await isUserInUSA();
  return isUSA ? 'external' : 'iap';
}

export async function processPayment(product, userEmail, userId) {
  const paymentMethod = await determinePaymentMethod();
  
  if (paymentMethod === 'external') {
    // Use Stripe Payment Links
    await initiateExternalPayment(userEmail, userId);
  } else {
    // Use Apple's In-App Purchase
    await initiateInAppPurchase(product.appleProductId);
  }
}

Diese Implementierung bietet eine genaue Methode, um zu bestimmen, ob ein Benutzer physisch in den Vereinigten Staaten ist. Zuerst versucht sie, die GPS des Geräts und die native Geocoder zu verwenden, um das Land zu bestimmen. Wenn das fehlschlägt (wegen Berechtigungsproblemen oder anderen Fehlern), fällt sie auf IP-basierte Erkennung zurück.

Denken Sie daran, die notwendigen Berechtigungen in Ihren info.plist (iOS) und AndroidManifest.xml (Android) Dateien hinzuzufügen:

Für iOS (ios/App/App/Info.plist):

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to determine which payment method to use based on regional availability.</string>

Für Android (android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

Mit dieser Methode erhalten Sie die genaueste Möglichkeit, zu bestimmen, ob ein Benutzer für externe Zahlungsoptionen unter den neuen Apple-Richtlinien berechtigt ist.

Verwaltung von Abonnements

Eine der Hauptvorteile der Verwendung von Stripe für Zahlungen ist die Möglichkeit, Abonnements anzubieten und zu verwalten. Hier erfahren Sie, wie Sie die Abonnementverwaltung in Ihrer Capacitor-App durchführen:

1. Erstellen einer Abonnementverwaltungsoberfläche

Hinzufügen einer Abonnementverwaltungsoberfläche in Ihrer App, um die aktiven Abonnements des Benutzers anzuzeigen:

<template>
  <div class="subscription-manager">
    <div v-if="isLoading" class="loading-indicator">
      Loading subscription data...
    </div>
    
    <div v-else-if="subscription" class="subscription-info">
      <h2 class="mb-4 text-xl font-bold">Your Subscription</h2>
      
      <div class="mb-6 plan-details">
        <p><span class="font-medium">Plan:</span> {{ subscription.planName }}</p>
        <p><span class="font-medium">Status:</span> {{ subscription.status }}</p>
        <p><span class="font-medium">Renews:</span> {{ formatDate(subscription.currentPeriodEnd) }}</p>
      </div>
      
      <button 
        @click="manageSubscription" 
        class="py-3 w-full font-medium text-white bg-indigo-600 rounded-lg transition-colors hover:bg-indigo-700"
      >
        Manage Subscription
      </button>
    </div>
    
    <div v-else class="no-subscription">
      <p class="mb-4">You don't have an active subscription.</p>
      <button 
        @click="goToPricingPage" 
        class="py-3 w-full font-medium text-white bg-indigo-600 rounded-lg transition-colors hover:bg-indigo-700"
      >
        View Plans
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getUserSubscription } from '../services/subscription';

const subscription = ref(null);
const isLoading = ref(true);

onMounted(async () => {
  try {
    const userData = await getUserSubscription();
    subscription.value = userData.subscription;
  } catch (error) {
    console.error('Failed to load subscription:', error);
  } finally {
    isLoading.value = false;
  }
});

function formatDate(timestamp) {
  return new Date(timestamp * 1000).toLocaleDateString();
}

function manageSubscription() {
  // Open Stripe Customer Portal
  window.open(subscription.value.portalUrl, '_blank');
}

function goToPricingPage() {
  // Navigate to pricing page
  // router.push('/pricing');
}
</script>

2. Kundenportal für die Abonnementverwaltung

Stripe bietet ein Kundenportal, mit dem Benutzer ihre Abonnements verwalten können. Sie können einen Link zu diesem Portal von Ihrem Server erstellen:

// Server-side code (Node.js)
const stripe = require('stripe')('sk_your_stripe_secret_key');

async function createPortalSession(customerId) {
  const session = await stripe.billingPortal.sessions.create({
    customer: customerId,
    return_url: 'https://yourdomain.com/account',
  });
  
  return session.url;
}

Zur Gewährleistung der Einhaltung der Richtlinien von Apples App Store:

Einschließlich angemessener Offenlegungen über externe Kaufvorgänge

Implementieren Sie eine Modalliste, die Benutzern mitteilt, dass sie das App aus verlassen (wie von Apple erforderlich)
Versuchen Sie nicht, Apples Provision auf Kaufvorgänge innerhalb der App zu umgehen
Kommunizieren Sie klar mit den Benutzern, dass Apple für die Transaktion nicht verantwortlich ist
Hier ist ein Beispiel für die Implementierung der erforderlichen Offenlegungsmodalliste:

Zur Überprüfung Ihrer Implementierung:

import { Dialog } from '@capacitor/dialog';

async function showExternalPaymentDisclosure() {
  const { value } = await Dialog.confirm({
    title: 'Leaving App for Payment',
    message: 'You are about to leave this app to make a payment. Apple is not responsible for the privacy or security of payments that are not made through the App Store. All payment-related issues, including refunds, must be handled by our support team.',
    okButtonTitle: 'Continue',
    cancelButtonTitle: 'Cancel'
  });
  
  return value;
}

export async function initiateExternalPayment(userEmail, userId) {
  const userConfirmed = await showExternalPaymentDisclosure();
  
  if (userConfirmed) {
    await openPaymentLink(userEmail, userId);
  }
}

Klicken Sie auf Ihren Zahlungsbutton in Ihrer App, der die Offenlegung und dann die Stripe-Zahlungseite öffnen sollte

Kundenportal

Zur Überprüfung Ihrer Implementierung: Klicken Sie auf Ihren Zahlungsbutton in Ihrer App, der die Offenlegung und dann die Stripe-Zahlungseite öffnen sollte
Ein Testzahlung mit Stripe-Testkarte abschließen 4242 4242 4242 4242
Nach der Zahlung sollten Sie über den Universal-Link wieder in Ihre App zurückgeleitet werden
Überprüfen Sie, ob Ihr Webhook das checkout.session.completed ereignis

Zusammenfassung

Die Möglichkeit, externe Zahlungsoptionen für digitale Güter in iOS-Anwendungen zu verwenden, ist ein bedeutender Wechsel, der Entwicklern mehr Flexibilität bietet. Während dieser Wechsel derzeit nur auf Apps im US-App-Store anwendbar ist, bietet er eine wichtige Alternative zum Zahlungssystem von Apple.

Indem Sie Stripe-Zahlungslinks mit Capacitor verwenden, können Sie eine strukturierte Zahlungsabwicklung schnell implementieren und gleichzeitig die Richtlinien von Apple einhalten. Für Benutzer außerhalb der USA, bei denen das Zahlungssystem von Apple weiterhin gilt, @capgo/native-purchases implementiert StoreKit und Google Play Billing direkt. Diese Vorgehensweise bietet Ihnen auch den Vorteil der robusten Zahlungsinfrastruktur von Stripe, niedrigerer Bearbeitungsgebühren (3% vs 30%) und viel schnelleren Auszahlungen (Tage statt Monate) im Vergleich zum Zahlungssystem von Apple.

Denken Sie daran, dass Sie alle Kundenunterstützung und Rückgabeanfragen direkt bearbeiten müssen, da diese Transaktionen außerhalb des Apple-Ökosystems stattfinden.

Haben Sie Stripe-Zahlungslinks in Ihrer Capacitor-App implementiert? Teilen Sie Ihre Erfahrungen in den Kommentaren unten!

Häufig gestellte Fragen

Q: Ist diese Vorgehensweise mit den Richtlinien von Apple vereinbar?
A: Ja, ab dem 1. Mai 2025, gestattet Apple das Linken auf externe Zahlungsmethoden für digitale Güter und Dienstleistungen in Apps, die im U.S. App Store verteilt werden, vorausgesetzt, Sie enthalten die erforderlichen Offenlegungen.

Q: Muss ich bei der Verwendung externer Zahlungsmethoden eine Provision von Apple zahlen?
A: Nein, eines der Hauptvorteile der neuen Regeln ist, dass Zahlungen, die außerhalb des Apple-Systems verarbeitet werden, nicht der Provision von Apple unterliegen.

Q: Muss mein Unternehmen in den Vereinigten Staaten ansässig sein, um diese neuen Regeln nutzen zu können?
A: Nein, jede Firma aus der ganzen Welt kann externe Zahlungsmethoden implementieren, solange Ihre App im US-App-Store verfügbar ist und die Benutzer, die die Kaufs machen, in den Vereinigten Staaten ansässig sind. Die Regel gilt für den Markt (US-App-Store) und die Standort der Benutzer, nicht für den Standort Ihres Unternehmens. Dies bedeutet, dass Entwickler aus Europa, Asien, Südamerika oder überall anders Stripe-Zahlungslinks für ihre US-basierten Kunden implementieren können.

Q: Was passiert, wenn ein Benutzer außerhalb der Vereinigten Staaten versucht, die externe Zahlungsoption zu nutzen?
A: Sie sollten eine Regionserkennung (wie im Artikel gezeigt) implementieren, um nur externen Zahlungsoptionen für Benutzer in den Vereinigten Staaten anzubieten. Für andere Regionen sollten Sie weiterhin die in-App-Kaufsystematik von Apple verwenden.

Q: Kann ich dies für physische Güter oder Dienstleistungen verwenden, die außerhalb der App konsumiert werden?
A: Ja, Apple hat immer externe Zahlungsmethoden für physische Güter und Dienstleistungen erlaubt, die außerhalb der App konsumiert werden (wie Fahrdienstleistungen oder Essen liefern).

Fortsetzen Sie von Stripe Payments in Capacitor: Neue Apple-Richtlinien

Wenn Sie Stripe Payments in __CAPGO_KEEP_0__: Neue Apple-Richtlinien verwenden Stripe Payments in Capacitor: Neue Apple-Richtlinien um Sicherheit und Compliance zu planen, verbinden Sie es mit Verschlüsselung Verschlüsselung für die Implementierungsdetails in Verschlüsselung, Compliance Compliance für die Implementierungsdetails in Compliance, Capgo Sicherheits-Scanner Capgo Sicherheits-Scanner für das Produktworkflow in Capgo Sicherheits-Scanner, Capgo Sicherheit zur Produktworkflow in Capgo Sicherheit und Capgo Vertrauenszentrum zur Produktworkflow in Capgo Vertrauenszentrum.

Stripe-Zahlungen in Capacitor: Neue Apple-Richtlinien