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

À compter du 1er mai 2025, Apple a mis en place des changements significatifs à ses lignes directrices de revue de l'App Store suite au jugement rendu dans l'affaire Épic v. Apple. Ces changements permettent spécifiquement aux développeurs d'applications aux États-Unis de lier vers des méthodes de paiement externes pour les biens et services numériques, ouvrant des alternatives au système de paiement en application d'Apple.

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

Le chemin menant à ce moment a été long et contesté. 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 lignes directrices 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 d'applications iOS et les paiements en application.

After 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

C'est particulièrement significatif que cette décision soit finale et ne puisse pas être contestée plus tard. La Cour suprême a refusé d'entendre l'appel d'Apple en début 2025, confirmant ainsi 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.

Un Traitement Égal Garanti par la Loi

Ce qui est le plus important, 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 :

Facturer des frais supplémentaires ou imposer des exigences supplémentaires aux applications qui utilisent 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 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 de jeu a été légalement nivelé, et Apple doit traiter tous 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 à 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 de 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 client.

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.
Paiements 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 à partir de 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.

In cet article, nous allons explorer 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 les directives mises à jour.

Cette mise en œuvre repose sur la documentation officielle de Stripe pour les liens de paiement adaptée spécifiquement pour les applications __CAPGO_KEEP_0__., adapted specifically for Capacitor apps.

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 ne s'applique actuellement qu'aux applications distribuées sur l'App Store américain.

Points clés à comprendre :

Vous pouvez maintenant lier des options de paiement externes pour les biens numériques à l'intérieur de 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 de la mise en place des liens de paiement Stripe dans votre application Capacitor

Détaillons maintenant la mise en œuvre technique :

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

Tout d’abord, créez un lien de paiement dans votre tableau de bord Stripe :

Naviguez vers la section Liens de paiement de votre tableau de bord Stripe
Cliquez sur ”+ Nouveau” pour créer un nouveau lien de paiement
Définez 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”
Configurez un lien universel comme votre URL de réussite (nous allons configurer cela 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 Héberger ce fichier à l'adresse :

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

Assurez-vous qu'il est servi avec le type MIME correct : https://yourdomain.com/.well-known/apple-app-site-association
Configurez votre application __CAPGO_KEEP_0__ pour gérer les liens universels en ajoutant les droits appropriés. Tout d'abord, dans votre 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;

Ouvrez votre projet Xcode
- Sélectionnez votre cible d'application
- Allez dans « Signage et capacités »
- Cliquez sur « + Capacité » et sélectionnez « Domaines associés »
- Ajoutez
- Étape 3 : Créez une page de redondance applinks:yourdomain.com

Étape 3 : Créez une page de redondance

Créez une page de remplacement à 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

Maintenant, ajoutez 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'un navigateur intégré, cela 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 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 :

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 : Configurez la mise à jour de webhook pour la livraison des commandes

Enfin, configurez une mise à jour de 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

Clairons : 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 sur tous les plateformes des restrictions potentielles. Cette décision de justice 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.

Le magasin Google Play a toujours été moins restrictif sur les méthodes de paiement externes que l'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 avancer avec 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 le magasin Google Play 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 dossier sur votre domaine avec les détails de votre application
Utiliser le même appUrlOpen logique de l'écouteur pour traiter les paiements réussis

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

Créer une interface de paiement

Voici un exemple de composant de bouton de paiement dans 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>

Gérer les 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 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.

Note : 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.

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

Implémentez la détection de la région basée sur l'emplacement :

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 vers 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 des abonnements. Voici comment gérer la gestion des abonnements dans votre application Capacitor :

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 vous assurer que votre mise en œuvre est conforme aux directives d'Apple :

Incluez les déclarations appropriées sur les achats externes
Implémentez 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 à 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 modale 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);
  }
}

Testez votre mise en œuvre

To tester votre mise en œuvre :

Cliquez sur votre bouton de paiement dans votre application, qui devrait afficher la notice et ensuite ouvrir la page de paiement Stripe
Effectuez un paiement de test en utilisant 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 le checkout.session.completed événement

Conclusion

La capacité d'utiliser des options de paiement externes pour des biens numériques dans les applications iOS est un changement important qui donne aux développeurs plus de flexibilité. Même si ce changement ne s'applique actuellement qu'aux applications de l'App Store américain, il offre une alternative importante au système de paiement en application 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 beaucoup plus rapides (jours au lieu de mois) par rapport au système de paiement en application 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 !

FAQs

Q: Cette approche est-elle conforme aux lignes directrices d'Apple?
A: Oui, à compter du 1er mai 2025, Apple autorise le lien vers des méthodes de paiement externes pour les biens et services numériques dans les applications distribuées sur l'App Store américain, à condition de fournir les mentions légales requises.

Q: Dois-je 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: Ma société doit-elle ê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 à 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 le cas 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 services physiques consommés en dehors de l'application?
A: Oui, Apple a toujours permis les méthodes de paiement externes pour les biens et services physiques consommés en dehors de l'application (comme la location de voiture ou la livraison de nourriture).

Continuez à partir de Stripe Payments dans Capacitor: Nouvelles lignes directrices d'Apple

Si vous utilisez Stripe Payments dans Capacitor: Nouvelles lignes directrices d'Apple pour planifier la sécurité et la conformité, connectez-le à Encryption pour le détail d'implémentation dans Encryption, Compliance pour le détail d'implémentation dans Compliance, Capgo Sécurité Scanner pour le flux de travail du produit dans Capgo Sécurité Scanner, Capgo Sécurité pour le flux de travail du produit dans le centre de sécurité Capgo Capgo Centre de confiance pour le flux de travail du produit dans le centre de confiance Capgo

Paiements Stripe dans Capacitor: Nouvelles lignes directrices d'Apple