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

Ab dem 1. Mai 2025 hat Apple erhebliche Änderungen an seinen Richtlinien für die App Store-Bewertung vorgenommen, die sich aus dem Urteil im Fall Epic v. Apple ergeben. Epic v. Apple. Diese Änderungen ermöglichen es Entwicklern von Apps in den Vereinigten Staaten, externe Zahlungsmethoden für digitale Güter und Dienstleistungen zu verlinken, was alternative Möglichkeiten zur Apple-App-Store-Zahlungssystematik bietet.

Die epische Schlacht, die die Mobilzahlungen 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 gegen die Richtlinien des Apple App Stores verstieß, indem er eine direkte Zahlungsoption implementierte, die Apples 30-Prozent-Kommission umging. Apple entfernte Fortnite daraufhin aus dem App Store, und Epic reagierte mit einer Klage, mit der Apple seine Kontrolle über die iOS-App-Distribution und die In-App-Zahlungen anfocht.

Nach Jahren von Rechtsstreitigkeiten, Berufungen und Gegenberufungen entschieden die Gerichte schließlich, dass Apple Entwicklern erlauben muss, Benutzern alternative Zahlungsmethoden außerhalb ihrer Apps anzubieten. Diese Entscheidung ändert grundlegend die Wirtschaft des App Store Ökosystems, das seit seiner Gründung 2008 unter demselben grundlegenden finanziellen Modell operiert.

Das Endgültige Urteil - Keine weiteren Berufungen

Was diese Entscheidung besonders bedeutungsvoll macht, ist, dass sie endgültig und nicht weiter angefochten werden kann. Das Supreme Court lehnte Anfang 2025 Apples Berufung ab, was die Entscheidung des unteren Gerichts als Gesetz des Landes festigte. Dies bedeutet, dass Entwickler externe Zahlungsmethoden mit Vertrauen implementieren können, ohne dass Apple diese Entscheidung durch weitere rechtliche Herausforderungen umkehren kann.

Gleiche Behandlung garantiert durch das Gesetz

Am wichtigsten ist, dass das Urteil explizit festhält, dass Apple keine Diskriminierung gegen Apps, die externe Zahlungsmethoden verwenden, anwenden darf. Das Gericht verbot Apple ausdrücklich, dass:

Zusätzliche Gebühren erheben oder zusätzliche Anforderungen an Apps stellen, die externe Zahlungsmethoden verwenden
Apps, die ausschließlich Apples IAP-System verwenden, bevorzugen oder in den Suchergebnissen hervorheben
Technische Maßnahmen ergreifen, um externe Zahlungserfahrungen gegenüber Apples eigenen Systemen zu unterlegen
Zusätzliche Offenlegungspflichten auferlegen, die über grundlegende Verbraucherinformationen hinausgehen

Diese expliziten Schutzmaßnahmen ermöglichen es Entwicklern, Stripe oder andere externe Zahlungsdienstleister ohne Angst vor subtiler Rache oder Diskriminierung von Apple zu implementieren. Das Spielfeld ist rechtlich ausgewogen, und Apple muss alle Apps gleich behandeln, unabhängig von ihren Zahlungsmethoden.

Diese Entscheidung stellt eine der bedeutendsten Herausforderungen für Apples walled garden-Ansatz dar und markiert einen wichtigen Wendepunkt in der Art und Weise, wie die mobile App-Monetarisierung funktionieren kann. Für Entwickler, die sich lange über Apples 30-Prozent-Kommission (auf 15 Prozent reduziert für kleine Unternehmen) beschwert haben, bietet diese Entscheidung einen Weg zu höheren Gewinnen 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:

Kostenreduzierung bei Zahlungsverarbeitung: Apple erhebt 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.
Raschere Auszahlungen: Mit Apple warten Sie typischerweise 45-90 Tage, um Ihre Gelder zu erhalten. Stripe hingegen überweist Zahlungen in Ihrem Bankkonto innerhalb von 2-3 Geschäftstagen.
Simplifizierte Rückerstattungsprozess: Rückerstattungen können direkt über Stripe’s Dashboard bearbeitet werden, anstatt durch Apples komplexes Rückerstattungssystem.

Diese Kosteneinsparungen und verbesserte Cash-Flow können game-changing sein, besonders 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 gleichzeitig die Richtlinien von Apples einhalten. In diesem Artikel werden wir uns mit der Implementierung von Stripe Payment Links befassen, um die Vorteile dieser neuen Regeln zu nutzen, während wir gleichzeitig die Richtlinien von Apples einhalten..

Diese Implementierung basiert auf Stripe’s offiziellem Dokumentation für Payment Links, angepasst für Capacitor-Apps.

Verständnis der neuen Richtlinien

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

Hauptsächliche Punkte zum Verständnis:

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

Einrichten von Stripe-Zahlungslinien in Ihrer Capacitor-App

Lassen Sie uns in die technische Umsetzung eintauchen:

Schritt 1: Erstellen Sie eine Zahlungslinie in Stripe-Dashboard

Erstellen Sie zunächst eine Zahlungslinie in Ihrem Stripe-Dashboard:

Navigieren Sie zur Zahlungslinien-Sektion in Ihrem Stripe-Dashboard
Klicken Sie auf „+ Neues“ um eine neue Zahlungslinie zu erstellen
Definieren Sie Ihre Produkt- oder Abonnementdetails
Unter den „Nach Zahlung“-Einstellungen wählen Sie „Keine Bestätigungsseite anzeigen“
Setzen Sie eine universelle Verknüpfung als Ihre Erfolg-URL (wir konfigurieren dies später)
Klicken Sie auf "Erstellen Sie die Verknüpfung" , um Ihre Zahlungsverknüpfung zu generieren

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

Um Benutzer nach Abschluss der Zahlung wieder in Ihre App zurückzuleiten, konfigurieren Sie universelle Links:

Erstellen Sie ein apple-app-site-association Hosten Sie dieses Dokument auf Ihrer Domain:

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

Stellen Sie sicher, dass es mit der richtigen MIME-Typen-Übertragung dient https://yourdomain.com/.well-known/apple-app-site-association
Konfigurieren Sie Ihre __CAPGO_KEEP_0__-App, um universelle Links zu verarbeiten, indem Sie die entsprechende Berechtigung hinzufügen. Zuerst in Ihrem application/json
Configure your Capacitor app to handle universal links by adding the proper entitlement. First, in your 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;

Öffnen Sie Ihr Xcode-Projekt
- Wählen Sie Ihr App-Ziel
- Fügen Sie der Xcode-Projekt die zugehörige Domänenberechtigung hinzu:
- Gehe zu “Zugriff und Fähigkeiten”
- Klicke auf “+ Fähigkeit” und wähle “Zugeordnete Domains”
- Hinzufügen applinks:yourdomain.com

Schritt 3: Erstelle eine Fallback-Seite

Erstelle 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: Implementiere die Zahlungsbutton in deiner Capacitor App

Jetzt füge den Zahlungsbutton deiner 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: Öffne die Zahlungslink in Safari (via window.open) anstatt in einem in-app Browser. Dies ist vorteilhaft, da Nutzer, die ihre Zahlungsdaten mit Stripe Link 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 Abbruchraten und die Reibungsverluste erheblich reduziert.

Schritt 5: Behandle Universal Links in deiner App

Konfiguriere deine App, um die Universal Links zu behandeln, wenn Nutzer zurückgeleitet werden:

Installieren Sie zunächst 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 eines Webhooks für die Bestellbestätigung

Abschließend müssen Sie auf Ihrem Server einen Webhook einrichten, 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

Wir möchten klarstellen: Die Epic v. Apple Entscheidung hat das mobile Zahlungsumfeld grundlegend verändert. Sie wirkt nicht nur direkt auf iOS-Anwendungen, sondern stärkt auch die Position von Android-Entwicklern, die seit langem externe Zahlungsmethoden verwenden.

Android-Entwickler können jetzt externe Zahlungslösungen mit voller Zuversicht implementieren. Die durch die Apple-Entscheidung gesetzte Vorentscheidung schützt Entwickler auf allen Plattformen vor potenziellen zukünftigen Einschränkungen. Diese Gerichtsentscheidung hat die Tatsache bestätigt, dass viele Android-Entwickler seit Jahren alternative Zahlungsoptionen mit niedrigeren Gebühren anbieten.

Google Play Store hat sich immer weniger restriktiv gegenüber externen Zahlungsmethoden gezeigt als Apple, und jetzt, mit dem gesetzlichen Vorbild, besteht praktisch kein Risiko mehr, Stripe oder andere externe Zahlungsanbieter in Ihren Android-Anwendungen zu implementieren. Sie können diese Implementierungen mit der Gewissheit vorantreiben, dass Sie auf solidem rechtlichem Boden stehen.

Die Implementierung, die wir für iOS beschrieben haben, funktioniert nahezu identisch auf Android-Geräten. Da Google Play Store keine gleichen Einschränkungen für externe 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 bearbeiten, müssen Sie:

Einrichten von App Links in Ihrem AndroidManifest.xml um die Redirect-URL zu verarbeiten
Erstellen Sie ein .well-known/assetlinks.json Datei auf Ihrem Domain mit Ihren Anwendungsdetails
Verwenden Sie das gleiche appUrlOpen Hörerlogik zum Verarbeiten erfolgreicher Zahlungen

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

Erstellen Sie eine Zahlungsanwendung

Hier ist ein Beispiel für eine Zahlungstastelement in Vue, das Sie in Ihre Capacitor Anwendung hinzufü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>

Behandeln Sie verschiedene Regionen

Da die neuen Apple-Richtlinien nur auf Apps im US-App-Store anwendbar sind, müssen Sie eine Strategie entwickeln, um die Benutzerregion zu erkennen und die entsprechende Zahlungsmethode anzuwenden. Hier ist eine zuverlässigere Methode 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);
  }
}

Diese Methode verwendet die kostenlose ipapi.co Ein Dienst, der die Landesangabe des Benutzers auf Basis seiner IP-Adresse bestimmt. Sie könnten auch andere Geolokalisierungsdienste wie MaxMind verwenden oder diese Überprüfung serverseitig durchführen, um die Sicherheit zu erhöhen.

AnmerkungWährend diese Methode funktioniert, ist es wichtig zu beachten, dass die IP-Geolokalisierung nicht immer 100% genau ist. Für missionkritische Anwendungen sollten Sie mehrere Erkennungsmethoden verwenden oder den Benutzern die Auswahl ihres Regions ermöglichen.

Mehr genaue Standortdetektion mit Capacitor-Plugins

Für eine genauere Standortdetektion können Sie den Capacitor-Geolokalisierungs-Plugin zusammen mit @capgo/capacitor-nativegeocoder verwenden, um die Landesangabe des Benutzers mit höherer Präzision zu bestimmen:

Zuerst installieren Sie die erforderlichen Plugins:

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

Konfigurieren Sie die Plugins in Ihrem Capacitor-Projekt. Fügen Sie die folgenden Zeilen zu 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;

Implementieren Sie die regionenbasierte Standortdetektion:

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);
  }
}

Dieses Implementierung bietet eine genauere Möglichkeit, zu bestimmen, ob ein Benutzer physisch in den Vereinigten Staaten ist. Zuerst versucht es, die Landesangabe des Benutzers mithilfe der GPS-Einrichtung und des native Geocoder zu bestimmen. Wenn dies fehlschlägt (wegen Berechtigungsproblemen oder anderen Fehlern), fällt es auf die IP-basierte Detektion 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

Ein wichtiger Vorteil 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

Fügen Sie eine Abonnementverwaltungsoberfläche in Ihrer App hinzu, 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;
}

Sicherstellung der Einhaltung der App-Store-Richtlinien

Um sicherzustellen, dass Ihre Implementierung den Apple-Richtlinien entspricht:

Fügen Sie angemessene Offenlegungen über externe Kaufvorgänge hinzu
Implementieren Sie ein Modalfenster, das den Benutzern mitteilt, dass sie die App verlassen (wie von Apple erforderlich)
Versuchen Sie nicht, Apples Provision auf innerhalb der App getätigten Kaufleistungen 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 des erforderlichen Disclosure-Modals

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);
  }
}

Testen Sie Ihre Implementierung

Um Ihre Implementierung zu testen:

Klicken Sie auf Ihren Zahlungsbutton in Ihrer App, der das Disclosure und dann die Stripe-Zahlungsseite öffnen sollte
Erstellen Sie eine Testzahlung mit einem Stripe-Testkarten 4242 4242 4242 4242
Nach Zahlung sollten Sie über die universelle Link-Adresse wieder in Ihre App zurückgeleitet werden
Überprüfen Sie, ob Ihr Webhook das checkout.session.completed ereignis

Zusammenfassung

Die Fähigkeit, 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 in der US-App Store anwendbar ist, bietet er eine wichtige Alternative zum Zahlungssystem von Apple.

Indem Sie Stripe Payment Links mit Capacitor verwenden, können Sie schnell eine gestreamte Zahlungsabwicklung implementieren und gleichzeitig die Einhaltung der Richtlinien von Apple sicherstellen. Für Benutzer außerhalb der USA, wo das Zahlungssystem von Apple weiterhin gilt, implementiert @capgo/native-purchases 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ückgaberegelungen direkt bearbeiten müssen, da diese Transaktionen außerhalb des Ökosystems von Apple stattfinden.

Haben Sie Stripe Payment Links in Ihrer __CAPGO_KEEP_0__-App implementiert? Teilen Sie Ihre Erfahrungen in den Kommentaren unten!

Have you implemented Stripe Payment Links in your Capacitor app? Share your experience in the comments below!

Q: Ist diese Vorgehensweise mit den Richtlinien von Apple kompatibel?

A: Ja, ab dem 1. Mai 2025 erlaubt Apple das Verknüpfen von externen Zahlungsmethoden für digitale Güter und Dienstleistungen in Apps, die in der US-App Store verteilt werden, vorausgesetzt, Sie enthalten die erforderlichen Offenlegungen.
Q: Muss ich bei der Verwendung externer Zahlungsmethoden eine Provision an Apple zahlen?

Q: Do I need to pay Apple’s commission when using external payment methods?
A: Nein, eines der Hauptvorteile der neuen Regeln ist, dass Zahlungen, die außerhalb des Apple-Systems verarbeitet werden, nicht der Provision unterliegen.

Q: Muss mein Unternehmen in den Vereinigten Staaten ansässig sein, um von diesen neuen Regeln profitieren zu können?
A: Nein, jede Firma aus der ganzen Welt kann externe Zahlungsmethoden implementieren, solange die App im US-App Store verfügbar ist und die Benutzer, die die Kaufvorgänge durchführen, in den Vereinigten Staaten ansässig sind. Die Regel gilt für den Markt (US-App Store) und die Standortierung der Benutzer, nicht für die Standortierung des 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 USA versucht, die externe Zahlungsoption zu nutzen?
A: Sie sollten eine Regionserkennung (wie im Artikel gezeigt) implementieren, um nur Benutzern in den USA externe Zahlungsoptionen anzubieten. Für andere Regionen sollten Sie weiterhin das Apple-System für in-App-Käufe 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 Essenlieferungen).

Keep going from Stripe Payments in Capacitor: New Apple Guidelines

Wenn Sie Stripe Payments in __CAPGO_KEEP_0__: New Apple Guidelines verwenden Stripe Payments in Capacitor: New Apple Guidelines Verschlüsselung Encryption zur Implementierungsdetail in Verschlüsselung, Kongruenz zur Implementierungsdetail in Kongruenz, Capgo Sicherheits-Scanner zur 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