Implémenter les liens de paiement Stripe dans les applications Capacitor conformément aux nouvelles directives d'Apple

Depuis le 1er mai 2025, Apple a mis en œuvre des changements significatifs à ses directives de revue de l'App Store suite au jugement rendu dans l'affaire 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 mené à 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 fonctionnait sous le même modèle financier de base depuis sa création en 2008.

La décision finale - Pas d'appels supplémentaires

Ce qui rend cette décision particulièrement significative est qu'elle est définitive 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 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.

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 mettre en avant 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 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 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.

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

Avantages financiers de l'utilisation de Stripe plutôt que des achats en application d'Apple

Les implications financières de ce changement 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 tarif 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 une meilleure fluidité de trésorerie 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 application Capacitor pour profiter de ces nouvelles règles, tout en garantissant le respect des directives mises à jour d'Apple. setup-stripe-payment-in-us-capacitor.

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

Comprendre les nouvelles directives

Les nouvelles directives de revue de l'App Store ont été mises à jour pour permettre 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 au sein 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 l'ensemble du support client et de la gestion des remboursements

Configurer les liens de paiement Stripe dans votre application Capacitor

En profondeur 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éfinez vos détails de produit ou d'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 file

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

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

Étape 3 : Créez 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émentez le bouton de paiement dans votre application Capacitor

Now, 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: L'ouverture du lien 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 :

Premièrement, installez le plugin App :

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

Évidemment, 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 la cour a validé ce que beaucoup de développeurs Android faisaient depuis des années - offrir des options de paiement alternatives avec des frais inférieurs.

Le magasin Google Play a toujours été moins restrictif quant aux 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 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 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 le redirigeement en profondeur (équivalent aux liens universels sur iOS), vous devrez :

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

The beauty of Capacitor is that once you’ve implemented the platform-specific configurations, the actual payment flow code remains the same across both platforms.

Créer 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 des Régions Différentes

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

Note :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 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 recule vers la détection basée sur l'IP.

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

L'un des principaux avantages de l'utilisation de Stripe pour les paiements est la capacité d'offrir et de gérer des abonnements. Voici comment gérer la gestion des abonnements dans votre application Capacitor :

1. Créer 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 :

Inclure 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)
Ne pas essayer de contourner la commission d'Apple sur les achats effectués à l'intérieur de l'application
Communiquer 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);
  }
}

Tester votre mise en œuvre

Pour 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
Effectuez un paiement de test à l'aide d'une 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 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 américaine, 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 directives d'Apple. Pour les utilisateurs situés en dehors des États-Unis où le système de paiement intégré d'Apple s'applique toujours, @capgo/achats-natifs implémente StoreKit et Google Play Billing directement. Cette approche offre également l'avantage d'une 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.

Vous avez-vous déjà 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, à compter du 1er mai 2025, Apple autorise le lien vers des méthodes de paiement externes pour des 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: 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: 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: Qu'arrive-t-il si un utilisateur en dehors 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 d'achat 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 permis aux méthodes de paiement externes pour les biens et services physiques consommés en dehors de l'application (comme les trajets en partage ou la livraison de nourriture).

Continuez de la section Paiements Stripe dans Capacitor: Nouvelles lignes directrices d'Apple

Si vous utilisez Paiements Stripe dans Capacitor: Nouvelles lignes directrices d'Apple pour planifier la sécurité et la conformité, connectez-l’à 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 le centre de sécurité Capgo et le centre de confiance Capgo pour le flux de travail du produit dans le centre de confiance Capgo.