Mise en œuvre des liens de paiement Stripe dans les applications Capacitor conformément aux nouvelles directives d'Apple

Depuis le 1er mai 2025, Apple a mis en place des changements significatifs à ses directives de revue de l'App Store suite au jugement rendu dans l'affaire Epic v. Apple. Ces changements permettent spécifiquement aux développeurs d'applications aux États-Unis de faire référence à des méthodes de paiement externes pour des biens et services numériques, ouvrant ainsi des alternatives au système de paiement en application d'Apple.

La bataille épique qui a changé les paiements mobiles à tout jamais

Le chemin qui a conduit à ce moment a été long et controversé. Tout a commencé en août 2020 lorsque Epic Games, le créateur du jeu vidéo très populaire Fortnite, a délibérément violé les directives de l'App Store d'Apple en mettant en place une option de paiement directe qui a contourné la commission de 30 % d'Apple. Apple a immédiatement retiré Fortnite de l'App Store, et Epic a répondu en déposant un recours en justice pour contester le contrôle d'Apple sur la distribution d'applications iOS et les paiements en application.

Après des années de batailles juridiques, d'appels et de contre-appels, les tribunaux ont finalement rendu un jugement qui oblige Apple à permettre aux développeurs de faire référence à des méthodes de paiement alternatives en dehors de leurs applications. Cette décision change fondamentalement l'économie de l'écosystème de l'App Store, qui a fonctionné sous le même modèle financier de base depuis sa création en 2008.

La décision finale - plus d'appels

What rend cette décision particulièrement significative est qu'elle est finale et ne peut pas être contestée plus loin. La Cour suprême a refusé d'entendre l'appel d'Apple en début 2025, scellant la décision de la cour inférieure comme loi du pays. Cela signifie que les développeurs peuvent mettre en œuvre des méthodes de paiement externes avec confiance que Apple ne peut pas annuler cette décision par des défis juridiques supplémentaires.

Égalité de traitement garantie par la loi

Ce qui est le plus important, la décision énonce explicitement que Apple ne peut pas discriminer contre les applications qui utilisent des méthodes de paiement externes. La cour a spécifiquement interdit à Apple de :

Facturer des frais supplémentaires ou imposer des exigences supplémentaires aux applications qui utilisent des méthodes de paiement externes
Donner un traitement préférentiel dans les résultats de recherche ou faire figurer les applications qui utilisent exclusivement le système IAP d'Apple
Utiliser des mesures techniques pour rendre les expériences de paiement externes inférieures au système d'Apple
Imposer des exigences de divulgation fastidieuses au-delà de l'information de base sur le consommateur

Ces protections explicites signifient que les développeurs peuvent mettre en œuvre Stripe ou d'autres fournisseurs de paiement externes sans crainte de représailles subtiles ou de discrimination de la part d'Apple. Le terrain de jeu a été nivelé juridiquement, et Apple doit traiter toutes les applications de manière égale, quel que soit leur choix de méthode de paiement.

Cette décision représente l'un des défis les plus importants pour l'approche de jardin clos d'Apple et marque un changement pivotant dans la façon dont la monétisation des applications mobiles peut fonctionner. Pour les développeurs qui ont longtemps plaint contre la commission de 30% d'Apple (réduite à 15% pour les petites entreprises), cette décision offre un chemin vers des marges bénéficiaires plus élevées et plus de contrôle sur l'expérience du client.

Les avantages financiers de l'utilisation de Stripe au lieu des achats en application d'Apple

Les implications financières de ce changement sont considérables pour les développeurs :

Frais de traitement de paiement réduits: Apple facture généralement une commission de 30% sur les achats en application (15% pour les petites entreprises), tandis que le coût de Stripe est d'environ 2,9% + 0,30 $ par transaction. Cette différence peut considérablement augmenter vos marges bénéficiaires.
Virements plus rapides: Avec Apple, vous attendez généralement 45 à 90 jours pour recevoir vos fonds. Stripe, d'autre part, dépose les paiements dans votre compte bancaire dans 2 à 3 jours ouvrables.
Procédure de remboursement simplifiée: Gérez les remboursements directement à travers l'interface de Stripe au lieu de passer par le système de remboursement plus complexe d'Apple.

Ces économies de coûts et un flux de trésorerie amélioré peuvent être des changements de jeu, surtout pour les développeurs et les petites entreprises plus petits.

Dans cet article, nous explorerons comment mettre en œuvre les liens de paiement Stripe dans votre Capacitor application pour profiter de ces nouvelles règles, tout en garantissant le respect des directives d'Apple mises à jour. In-App Purchases d'Apple vs. Stripe Payment Links.

Cette mise en œuvre est basée sur la documentation officielle de Stripe pour les liens de paiement, adaptée spécifiquement pour les applications Capacitor.

Comprendre les nouvelles lignes directrices

Les nouvelles lignes directrices de la revue des applications de l'App Store permettent désormais aux développeurs de diriger les utilisateurs vers des sites web externes pour le traitement des paiements, spécifiquement pour les biens numériques et les abonnements. Cette modification n'est actuellement applicable qu'aux applications distribuées dans l'App Store américain.

Points clés à comprendre :

Vous pouvez maintenant lier des options de paiement externes pour les biens numériques dans votre application
Cela ne s'applique qu'aux applications de l'App Store américain
Vous devez toujours respecter les exigences de divulgation d'Apple
Vous restez responsable de tout le support client et de la gestion des remboursements

Configuration des liens de paiement Stripe dans votre application Capacitor

Allons-y dans la mise en œuvre technique :

Étape 1 : Créez un lien de paiement dans le tableau de bord Stripe

Créez d'abord un lien de paiement dans votre tableau de bord Stripe :

Naviguez vers la section Lien de paiement dans votre tableau de bord Stripe
Cliquez sur » + Nouveau » pour créer un nouveau lien de paiement
Définissez les détails de votre produit ou de votre abonnement
Sous les paramètres « Après paiement », sélectionnez « Ne pas afficher la page de confirmation »
Définissez un lien universel comme votre URL de réussite (nous allons le configurer plus tard)
Cliquez sur « Créer le lien » pour générer votre lien de paiement

Étape 2 : Configurez les liens universels dans votre application Capacitor

Pour rediriger les utilisateurs vers votre application après la fin du paiement, configurez les liens universels :

Créez un fichier sur votre domaine : apple-app-site-association un fichier

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

Héberger ce fichier à https://yourdomain.com/.well-known/apple-app-site-association
Vérifiez que ce fichier est servi avec le type MIME correct application/json
Configurez votre application Capacitor pour gérer les liens universels en ajoutant les droits appropriés. Tout d’abord, dans votre 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;

Ajoutez le droit « Associated Domains » à votre projet Xcode :
- Ouvrez votre projet Xcode
- Sélectionnez votre cible d’application
- Allez dans « Signature et capacités »
- Cliquez sur « + Capacité » et sélectionnez « Associated Domains »
- Ajouter applinks:yourdomain.com

Étape 3 : Créer une page de redirection

Créez une page de redirection à l’URL de redirection pour gérer les cas où l’application n’est pas installée :

<!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>

Étape 4 : Implémenter le bouton de paiement dans votre application Capacitor

Now, add the payment button to your application :

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

Pourquoi Safari compte: L'ouverture de la liens de paiement dans Safari (via window.open) plutôt qu'un navigateur intégré est bénéfique car les utilisateurs qui ont précédemment enregistré leurs informations de paiement avec Stripe Link auront leurs informations automatiquement disponibles. Cela crée une expérience de paiement plus fluide où les utilisateurs n'auront pas besoin de ré-entrer leurs informations de carte de crédit, ce qui réduit significativement la friction et les taux d'abandon.

Étape 5 : Gérer les liens universels dans votre application

Configurez votre application pour gérer les liens universels lorsque les utilisateurs sont redirigés vers l'application :

Tout d'abord, installez le plugin d'application :

npm install @capacitor/app

Enregistrez le plugin d'application dans votre application :

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
}

Étape 6 : Configurer un Webhook pour la livraison des commandes

Enfin, configurez un webhook sur votre serveur pour gérer les paiements réussis :

// 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'));

Compatibilité Android

Disons-le clairement : la décision Epic v. Apple a radicalement changé le paysage des paiements mobiles. Non seulement cela impacte directement les applications iOS, mais cela renforce également la position des développeurs Android qui utilisent des méthodes de paiement externes.

Les développeurs Android peuvent maintenant mettre en œuvre des solutions de paiement externes avec confiance totale. La décision de justice établie par l'arrêt Apple protège efficacement les développeurs sur tous les plateformes des restrictions potentielles futures. Cette décision de justice a validé ce que de nombreux développeurs Android ont fait pendant des années - offrir des options de paiement alternatives avec des frais inférieurs.

Google Store a toujours été moins restrictif quant aux méthodes de paiement externes que Apple, et maintenant que le précédent juridique est établi, il n'y a presque plus de risque à mettre en œuvre Stripe ou d'autres fournisseurs de paiement externes dans vos applications Android. Vous pouvez poursuivre ces implémentations en sachant que vous êtes sur un terrain juridique solide.

La mise en œuvre que nous avons couverte pour iOS fonctionne presque de la même manière pour les appareils Android. Puisque Google Play Store n'a pas les mêmes restrictions sur les méthodes de paiement externes, vous pouvez utiliser la même approche de liens de paiement Stripe sans avoir besoin de dialogues de déclaration spéciaux.

Pour gérer les liens profonds (équivalents aux liens universels sur iOS), vous devrez :

Configurer les liens d'application dans votre AndroidManifest.xml pour gérer l'URL de redirection
Créer un .well-known/assetlinks.json fichier sur votre domaine avec les détails de votre application
Utiliser la même appUrlOpen logique de listener pour traiter les paiements réussis

La beauté de Capacitor est que, une fois que vous avez mis en œuvre les configurations spécifiques à la plateforme, le flux de paiement réel code reste le même sur les deux plateformes.

Création d'une interface de paiement

Ici, voici un exemple de composant de bouton de paiement en Vue que vous pouvez ajouter à votre application Capacitor :

<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>

Gestion de différentes régions

Étant donné que les nouvelles directives d'Apple ne s'appliquent qu'aux applications de l'App Store américain, vous aurez besoin d'une stratégie pour détecter les régions des utilisateurs et appliquer la méthode de paiement appropriée. Voici une approche plus fiable utilisant la géolocalisation IP :

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

Cette approche utilise le service gratuit ipapi.co pour déterminer le pays de l'utilisateur en fonction de son adresse IP. Vous pourriez également utiliser d'autres services de géolocalisation comme MaxMind, ou mettre en œuvre cette vérification côté serveur pour une sécurité supplémentaire.

Remarque: Même si cette approche fonctionne, il est important de se rappeler que la géolocalisation IP n'est pas toujours 100 % précise. Pour les applications critiques, envisagez d'utiliser plusieurs méthodes de détection ou de permettre aux utilisateurs de sélectionner manuellement leur région.

Détection plus précise de la localisation avec les plugins Capacitor

Pour une détection plus précise de la localisation, vous pouvez utiliser le plugin de géolocalisation Capacitor en combinaison avec @capgo/capacitor-nativegeocoder pour déterminer le pays de l'utilisateur avec une précision plus élevée :

Premièrement, installez les plugins requis :

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

Configurez les plugins dans votre projet Capacitor. Ajoutez les éléments suivants à votre 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;

Implémentez la détection de région basée sur la localisation :

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

Cette mise en œuvre fournit une méthode plus précise pour déterminer si un utilisateur est physiquement situé aux États-Unis. Elle tente d'abord d'utiliser le GPS de l'appareil et le géocodeur natif pour déterminer le pays. Si cela échoue (en raison de problèmes de permission ou d'autres erreurs), elle recule sur la détection basée sur l'IP.

N'oubliez pas d'ajouter les permissions nécessaires à vos info.plist (iOS) et AndroidManifest.xml (Android) fichiers :

Pour 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>

Pour Android (android/app/src/main/AndroidManifest.xml):

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

En utilisant cette approche, vous obtenez la méthode la plus précise pour déterminer si un utilisateur est éligible aux options de paiement externes en vertu des nouvelles directives d'Apple.

Gestion des Abonnements

Un avantage clé de l'utilisation de Stripe pour les paiements est la capacité à proposer et à gérer les abonnements. Voici comment gérer la gestion des abonnements dans votre Capacitor application :

1. Création d'une Page de Gestion des Abonnements

Ajoutez une page de gestion des abonnements dans votre application pour afficher les abonnements actifs de l'utilisateur :

<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. Portail client pour la gestion des abonnements

Stripe propose un Portail client qui permet aux utilisateurs de gérer leurs abonnements. Vous pouvez créer un lien vers ce portail depuis votre serveur :

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

Assurer la conformité de l'App Store

Pour s'assurer que votre mise en œuvre est conforme aux directives d'Apple :

Inclure les déclarations appropriées sur les achats externes
Mettre en œuvre une fenêtre modale informant les utilisateurs qu'ils quittent l'application (telle que requise par Apple)
N'essayez pas de contourner la commission d'Apple sur les achats effectués à l'intérieur de l'application
Communiquez clairement aux utilisateurs que Apple n'est pas responsable de la transaction

Voici un exemple d'implémentation de la fenêtre de déclaration requise :

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

Tester votre mise en œuvre

Cliquez sur votre bouton de paiement dans votre application, qui devrait afficher la déclaration et ouvrir ensuite la page de paiement Stripe

Cliquez sur votre bouton de paiement dans votre application, qui devrait afficher la déclaration et ouvrir ensuite la page de paiement Stripe
Effectuez un paiement de test à l'aide de la carte de test Stripe 4242 4242 4242 4242
Après le paiement, vous devriez être redirigé vers votre application via le lien universel
Vérifiez que votre webhook a reçu l' checkout.session.completed événement

Conclusion

La capacité d'utiliser des options de paiement externes pour des biens numériques dans les applications iOS constitue une modification importante qui donne aux développeurs plus de flexibilité. Même si cette modification ne s'applique actuellement qu'aux applications de la boutique d'applications Apple aux États-Unis, elle offre une alternative importante au système de paiement intégré d'Apple.

En utilisant les liens de paiement Stripe avec Capacitor, vous pouvez mettre en œuvre rapidement une expérience de paiement fluide tout en respectant les lignes directrices d'Apple. Cette approche vous donne également l'avantage de l'infrastructure de paiement robuste de Stripe, des frais de traitement inférieurs (3 % contre 30 %) et des virements plus rapides (jours au lieu de mois) par rapport au système de paiement intégré d'Apple.

Rappelez-vous que vous devrez gérer tous les problèmes de support client et les remboursements directement, car ces transactions ont lieu en dehors de l'écosystème d'Apple.

Avez-vous mis en œuvre les liens de paiement Stripe dans votre application Capacitor ? Partagez votre expérience dans les commentaires ci-dessous !

FAQ

Q : Cette approche est-elle conforme aux lignes directrices d'Apple ?
A : Oui, à partir du 1er mai 2025, Apple autorise la mise en lien avec des méthodes de paiement externes pour des biens et services numériques dans les applications distribuées dans la boutique d'applications Apple aux États-Unis, à condition de inclure les mentions requises.

Q: Ai-je besoin de payer la commission d'Apple en utilisant des méthodes de paiement externes ?
A: Non, l'un des principaux avantages des nouvelles règles est que les paiements traités en dehors du système d'Apple ne sont pas soumis à leur commission.

Q: Est-ce que ma société doit être basée aux États-Unis pour profiter de ces nouvelles règles ?
A: Non, toute société du monde entier peut mettre en œuvre des méthodes de paiement externes à condition que votre application soit disponible sur l'App Store américain et que les utilisateurs effectuant les achats soient situés aux États-Unis. La décision s'applique à la plateforme de marché (App Store américain) et à la localisation des utilisateurs, et non à la localisation de votre société. Cela signifie que les développeurs d'Europe, d'Asie, d'Amérique du Sud ou d'ailleurs peuvent mettre en œuvre les liens de paiement Stripe pour leurs clients américains.

Q: Quel est l'impact si un utilisateur hors des États-Unis tente d'utiliser l'option de paiement externe ?
A: Vous devriez mettre en œuvre une détection de région (comme montré dans l'article) pour ne proposer que les options de paiement externes aux utilisateurs des États-Unis. Pour les autres régions, vous devriez continuer à utiliser le système de paiement en application d'Apple.

Q: Puis-je utiliser cela pour des biens ou des services physiques consommés en dehors de l'application ?
A: Oui, Apple a toujours autorisé les méthodes de paiement externes pour les biens et services physiques consommés en dehors de l'application (comme les services de transport en commun ou la livraison de nourriture).

Continuez à partir des liens de paiement Stripe dans Capacitor: Les nouvelles directives d'Apple

Si vous utilisez les liens de paiement Stripe dans Capacitor: Les nouvelles directives d'Apple pour planifier la sécurité et la conformité, connectez-le avec Chiffrement pour le détail d'implémentation dans Chiffrement, Conformité pour le détail d'implémentation dans Conformité, Capgo Scanner de sécurité pour le flux de travail du produit dans Capgo Scanner de sécurité, Capgo Sécurité pour le flux de travail du produit dans Capgo Sécurité, et Capgo Centre de confiance pour le flux de travail du produit dans Capgo Centre de confiance.

Paiements Stripe dans Capacitor: Nouvelles lignes directrices d'Apple