Mise en œuvre des liens de paiement Stripe dans les applications Capacitor suivant les nouvelles lignes directrices d'Apple

Depuis le 1er mai 2025, Apple a mis en place des changements significatifs dans ses lignes directrices 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 les biens et services numériques, ouvrant ainsi des alternatives au système de vente intégrée d'Apple.

La Bataille Épique Qui a Changé les Paiements Mobiles à Toujours

Le chemin qui a mené à ce moment a été long et controversé. Tout a commencé en août 2020 lorsque Epic Games, le créateur du jeu 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 supprimé 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 des 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 décidé que Apple doit permettre aux développeurs de diriger les utilisateurs vers 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

Ce qui rend cette décision particulièrement significative, c'est qu'elle est finale et ne peut pas être contestée plus tard. La Cour suprême a refusé d'entendre l'appel d'Apple en début 2025, ce qui a scellé 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 révoquer cette décision par des défis juridiques supplémentaires.

Un Traitement Égal Garanti par la Loi

Ce qui est le plus important, c'est que la décision stipule 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 :

Les frais supplémentaires ou les exigences supplémentaires imposées aux applications utilisant des méthodes de paiement externes
Accorder un traitement préférentiel dans les résultats de recherche ou la mise en avant des applications qui utilisent exclusivement le système de paiement IAP d'Apple
Utiliser des mesures techniques pour rendre les expériences de paiement externes inférieures au système de paiement d'Apple
Imposer des exigences de divulgation lourdes 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 ou de discrimination subtiles de la part d'Apple. Le terrain 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.

La décision représente l'un des défis les plus importants à l'approche de jardin clos d'Apple et marque un tournant dans la façon dont la monétisation des applications mobiles peut fonctionner. Pour les développeurs qui se plaignaient depuis longtemps du taux de commission de 30 % d'Apple (réduit à 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.

Avantages financiers de l'utilisation de Stripe par rapport aux achats en application

Les implications financières de cette modification sont considérables pour les développeurs :

Tarifs 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.
Règlements plus rapides: Avec Apple, vous attendez généralement 45-90 jours pour recevoir vos fonds. Stripe, d'un autre côté, dépose les paiements dans votre compte bancaire dans 2-3 jours ouvrables.
Simplifiez le processus de remboursement: 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 et cette amélioration du flux de trésorerie peuvent être révolutionnaires, surtout pour les développeurs et les 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. directives mises à jour.

Cette mise en œuvre repose sur la documentation officielle de Stripe pour les liens de paiementadaptée spécifiquement pour les applications Capacitor.

Comprendre les nouvelles directives

Les directives de revue de l'App Store ont été mises à jour et 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 est actuellement applicable uniquement aux applications distribuées sur l'App Store américain.

Points clés à comprendre :

Vous pouvez maintenant lier des options de paiement externes pour des biens numériques dans votre application
Cela ne s'applique qu'aux applications sur l'App Store américain
Vous devez toutefois encore vous conformer aux exigences de divulgation d'Apple
Vous restez responsable de l'ensemble du support client et de la gestion des remboursements

Configuration des liens de paiement Stripe dans votre application Capacitor

Découvrons maintenant la mise en œuvre technique :

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

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

Accédez à la section Liens de paiement de 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 configurerons cela plus tard)
Cliquez sur « Créer un 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 apple-app-site-association fichier sur votre domaine :

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

Hébergez ce fichier à https://yourdomain.com/.well-known/apple-app-site-association
Assurez-vous qu'il est servi avec le type MIME correct application/json
Configurez votre application Capacitor pour gérer les liens universels en ajoutant l'entitlement approprié. 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 l'entitlement Domaines Associés à votre projet Xcode :
- Ouvrez votre projet Xcode
- Sélectionnez votre cible d'application
- Allez à « Authentification et capacités »
- Cliquez sur « + Capacité » et sélectionnez « Domaines associés »
- Ajouter applinks:yourdomain.com

Étape 3 : Créez une page de rechange

Créez une page de rechange à 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émentez le bouton de paiement dans votre application Capacitor

Ajoutez maintenant le bouton de paiement à votre 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 est important : Lorsque vous ouvrez le lien de paiement dans Safari (via window.open ) plutôt qu'à partir d'un navigateur intégré, 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 considérablement la friction et les taux d'abandon.

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

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

First, install the App plugin:

npm install @capacitor/app

Enregistrez le plugin App 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

Il faut être clair : la décision Epic v. Apple a profondément 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 de toutes les plateformes contre les restrictions potentielles futures. Cette décision judiciaire a validé ce que de nombreux développeurs Android ont fait pendant des années - proposer des options de paiement alternatives avec des frais inférieurs.

Google Play Store a toujours été moins restrictif sur les 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.

L'implémentation 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
Utilisez 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 place 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

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

<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

Puisque 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 le 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 la géolocalisation IP gratuite ipapi.co service pour déterminer le pays de l'utilisateur en fonction de son adresse IP. Vous pouvez également utiliser d'autres services de géolocalisation comme MaxMind, ou mettre en œuvre cette vérification côté serveur pour une sécurité renforcée.

Note: Même si cette approche fonctionne, il est important de se rappeler que la géolocalisation par 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.

Plus Précise Détection de Localisation avec les Plugins Capacitor

Pour une détection de localisation plus précise, 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;

Mettez en œuvre la détection de la 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 du dispositif 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 recourt à la détection basée sur 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 fonction des nouvelles directives d'Apple.

Gestion des Abonnements

Un avantage clé de l'utilisation de Stripe pour les paiements est la capacité d'offrir et de 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 à partir de 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 vous assurer que votre mise en œuvre est conforme aux directives d'Apple :

Incluez les déclarations appropriées sur les achats externes
Implémenter une fenêtre modale informant les utilisateurs qu'ils quittent l'application (comme requis par Apple)
N'essayez pas de contourner la commission d'Apple sur les achats effectués dans 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 divulgation 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

Pour tester votre mise en œuvre :

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

Conclusion

La capacité d'utiliser des options de paiement externes pour des biens numériques dans les applications iOS constitue une modification importante qui offre aux développeurs plus de flexibilité. Même si cette modification ne s'applique actuellement qu'aux applications de la boutique d'applications iOS des États-Unis, elle fournit 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 plus bas (3 % contre 30 %) et des versements plus rapides (jours au lieu de mois) par rapport au système de paiement intégré d'Apple.

N'oubliez pas 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 !

FAQs

Q: Est-ce que cette approche est 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 iOS des É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 à sa 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 au marché (App Store américain) et à l'emplacement des utilisateurs, et non à l'emplacement 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: Qu'arrive-t-il 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 les options de paiement externes qu'aux utilisateurs des États-Unis. Pour les autres régions, vous devriez continuer à utiliser le système de paiement en application Apple.

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

Paiements Stripe dans Capacitor: Nouvelles lignes directrices d'Apple