Implementare Collegamenti di Pagamento Stripe nei Capacitor App seguenti le nuove linee guida di Apple

Da maggio 1, 2025, Apple ha implementato significative modifiche alle sue linee guida di revisione dell'App Store, a seguito della sentenza del tribunale nel caso Epic v. Apple. Queste modifiche consentono specificamente agli sviluppatori di app negli Stati Uniti di collegare i metodi di pagamento esterni per beni e servizi digitali, aprendo alternative al sistema di acquisto in-app di Apple.

La Battaglia Epica che ha cambiato i pagamenti mobili per sempre

La strada per questo momento è stata lunga e controversa. Tutto è iniziato nel agosto 2020 quando Epic Games, il creatore del popolare gioco Fortnite, ha deliberatamente violato le linee guida dell'App Store di Apple implementando un'opzione di pagamento diretta che bypassava la commissione del 30% di Apple. Apple ha immediatamente rimosso Fortnite dall'App Store e Epic ha risposto presentando un ricorso per contestare il controllo di Apple sulla distribuzione degli app iOS e sui pagamenti in-app.

Dopo anni di battaglie legali, ricorsi e ricorsi, i tribunali hanno infine deciso che Apple deve consentire agli sviluppatori di indirizzare gli utenti a metodi di pagamento alternativi esterni alle app. Questa decisione cambia fondamentalmente l'economia dell'ecosistema dell'App Store, che è stato in funzione dallo stesso modello finanziario di base dal suo lancio nel 2008.

L'Ultima Sentenza - Nessun Altro Ricorso

Ciò che rende questa sentenza particolarmente significativa è che è definitiva e non può essere appellata ulteriormente. La Corte Suprema ha rifiutato di sentire l'appello di Apple all'inizio del 2025, confermando la decisione della corte inferiore come legge del paese. Ciò significa che gli sviluppatori possono implementare metodi di pagamento esterni con fiducia che Apple non possa annullare questa decisione attraverso ulteriori sfide legali.

Trattamento Equo Garantito dalla Legge

Ciò che è più importante, la sentenza esplicita che Apple non può discriminare contro le app che utilizzano metodi di pagamento esterni. La corte ha specificamente proibito ad Apple di:

Caricando tariffe aggiuntive o imponendo requisiti aggiuntivi alle app che utilizzano metodi di pagamento esterni
Dare un trattamento preferenziale nei risultati di ricerca o di evidenziare le app che utilizzano esclusivamente il sistema IAP di Apple
Utilizzando misure tecniche per rendere le esperienze di pagamento esterne inferiori al proprio sistema
Imponendo requisiti di disclosure onerosi al di là delle informazioni di base per i consumatori

Queste protezioni esplicite significano che gli sviluppatori possono implementare Stripe o altri provider di pagamento esterni senza paura di una reazione o discriminazione sottile da parte di Apple. Il campo di gioco è stato livellato legalmente e Apple deve trattare tutte le app in modo uguale indipendentemente dalle loro scelte di metodo di pagamento.

La sentenza rappresenta uno dei più significativi ostacoli all'approccio di Apple per un giardino recintato e segna un importante cambiamento su come la monetizzazione degli app mobili può funzionare. Per i sviluppatori che da tempo si sono lamentati del 30% di commissione di Apple (ridotto al 15% per le piccole imprese), questa sentenza offre una via per margini di profitto più alti e più controllo sull'esperienza del cliente.

Benefici finanziari dell'utilizzo di Stripe rispetto alle transazioni in-app di Apple

Il cambiamento ha implicazioni finanziarie sostanziali per i sviluppatori:

Commissioni di elaborazione delle transazioni ridotte: Apple solitamente applica una commissione del 30% sulle transazioni in-app (15% per le piccole imprese), mentre la commissione di Stripe è di circa 2,9% + $0,30 per transazione. Questa differenza può aumentare significativamente i tuoi margini di profitto.
Payout più rapidi: Con Apple, si attende di solito 45-90 giorni per ricevere i fondi. Stripe, d'altra parte, deposita i pagamenti nella tua banca entro 2-3 giorni lavorativi.
Processo di rimborso semplificato: Gestisci i rimborsi direttamente tramite il pannello di controllo di Stripe al posto di passare attraverso il sistema di rimborso più complesso di Apple.

Questi risparmi di costi e miglior flusso di cassa possono essere cambiamenti di gioco, soprattutto per i piccoli sviluppatori e le imprese.

In questo articolo, esploreremo come implementare i collegamenti di pagamento Stripe nel tuo Capacitor per sfruttare queste nuove regole, garantendo al contempo la conformità alle linee guida aggiornate di Apple Capacitor.

Questa implementazione si basa su La documentazione ufficiale di Stripe per i Collegamenti di pagamento, adattata specificamente per le app Capacitor.

Capire le nuove linee guida

I nuovi Linee guida di revisione dell'App Store sono state aggiornate per consentire agli sviluppatori di indirizzare gli utenti a siti web esterni per il trattamento dei pagamenti, in particolare per beni digitali e abbonamenti. Questo cambiamento è attualmente applicabile solo alle app distribuite nella versione statunitense dell'App Store.

Punti chiave da comprendere:

È possibile collegare opzioni di pagamento esterne per beni digitali all'interno dell'app
Questo si applica solo alle app nella versione statunitense dell'App Store
È necessario ancora rispettare le richieste di Apple per la disclosure
Resta responsabile per il supporto ai clienti e la gestione dei rimborsi

Configurazione dei Collegamenti di pagamento Stripe all'interno della tua app Capacitor

Vediamo ora la implementazione tecnica:

Passo 1: Crea un Collegamento di Pagamento nel Pannello di Controllo Stripe

Prima, crea un collegamento di pagamento nel tuo Pannello di Controllo Stripe:

Naviga nella sezione Collegamenti di Pagamento nel tuo Pannello di Controllo Stripe
Clicca su “+ Nuovo” per creare un nuovo collegamento di pagamento
Definisci i dettagli del tuo prodotto o abbonamento
Sotto le impostazioni “Dopo il pagamento”, seleziona “Non visualizza pagina di conferma”
Imposta un collegamento universale come URL di successo (lo configureremo più tardi)
Clicca su “Crea Collegamento” per generare il tuo collegamento di pagamento

Passo 2: Configura i Collegamenti Universali nel tuo App Capacitor

Per reindirizzare gli utenti verso il tuo app dopo la completamento del pagamento, configura i collegamenti universali:

Creare un file sul tuo dominio: apple-app-site-association Creare un file sul tuo dominio:

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

Caricare questo file su https://yourdomain.com/.well-known/apple-app-site-association
Assicurati che venga servito con il tipo MIME corretto application/json
Configura la tua applicazione Capacitor per gestire i collegamenti universali aggiungendo l'entitività appropriata. In primo luogo, nel tuo 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;

Aggiungi l'entitività Domini Associati al tuo progetto Xcode:
- Apre il tuo progetto Xcode
- Seleziona il tuo target di app
- Vai a "Firma e abilitazioni"
- Clicca su "+ Abilitazione" e seleziona "Domini Associati"
- Aggiungi applinks:yourdomain.com

Passo 3: Crea una Pagina di fallback

Crea una pagina di fallback all'URL di reindirizzamento per gestire i casi in cui l'app non è installata:

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

Passo 4: Implementa il pulsante di pagamento nella tua applicazione Capacitor

Now, aggiungi il pulsante di pagamento alla tua app:

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

Perché Safari è importante: Aprire il link di pagamento in Safari (tramite window.open) anziché un browser in-app è vantaggioso perché gli utenti che hanno precedentemente salvato le loro informazioni di pagamento con Stripe Link avranno le loro credenziali disponibili automaticamente. Ciò crea un'esperienza di checkout più fluida in cui gli utenti non dovranno riinserire le loro informazioni di carta di credito, riducendo significativamente la frizione e le percentuali di abbandono.

Passo 5: Gestisci i collegamenti universali nella tua app

Configura la tua app per gestire i collegamenti universali quando gli utenti vengono reindirizzati:

Prima, installa il plugin App:

npm install @capacitor/app

Registra il plugin App nella tua app:

import { App } from '@capacitor/app';

// In your initialization code
App.addListener('appUrlOpen', (event) => {
  // Example URL: https://yourdomain.com/checkout_redirect?session_id=cs_test_...
  const url = new URL(event.url);
  
  if (url.pathname.startsWith('/checkout_redirect')) {
    // Extract any parameters you need
    const params = new URLSearchParams(url.search);
    const sessionId = params.get('session_id');
    
    // Handle successful payment
    if (sessionId) {
      // Verify the payment on your server if needed
      verifyPayment(sessionId);
      
      // Update UI to reflect successful purchase
      updatePurchaseStatus(true);
    }
  }
});

async function verifyPayment(sessionId) {
  // Call your backend to verify the payment
  // This is optional if you're relying on webhooks
}

function updatePurchaseStatus(success) {
  // Update your app UI to reflect purchase status
}

Passo 6: Configura il webhook per la soddisfazione dell'ordine

Infine, configura un webhook sul tuo server per gestire i pagamenti riusciti:

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

Siamo chiari: la sentenza Epic v. Apple ha cambiato radicalmente il panorama dei pagamenti mobili. Non solo impatta direttamente sugli app iOS, ma anche rafforza la posizione degli sviluppatori Android che utilizzano metodi di pagamento esterni.

Lo sviluppo di applicazioni Android può ora implementare soluzioni di pagamento esterne con totale fiducia. Il precedente stabilito dalla sentenza della Corte ha protetto i sviluppatori di tutte le piattaforme da eventuali restrizioni future. Questa decisione giudiziaria ha validato ciò che molti sviluppatori di Android hanno fatto per anni - offrire opzioni di pagamento alternative con tariffe più basse.

Google Play Store ha sempre avuto una politica meno restrittiva sulle metodi di pagamento esterni rispetto a Apple, e ora che il precedente giuridico è stato stabilito, non c'è più alcun rischio nell'implementare Stripe o altri provider di pagamento esterni nelle vostre applicazioni Android. Potete procedere con queste implementazioni sapendo di essere su un terreno solido e legale.

L'implementazione che abbiamo coperto per iOS funziona quasi identicamente per dispositivi Android. Poiché Google Play Store non ha le stesse restrizioni sui metodi di pagamento esterni, potete utilizzare la stessa approccio per i collegamenti di pagamento Stripe senza dover utilizzare dialoghi di disclosure speciali.

Per gestire il deep linking (equivalente alle universal links di iOS), avrete bisogno di:

Configurare i collegamenti dell'app in vostro AndroidManifest.xml per gestire l'URL di reindirizzamento
Creare un file .well-known/assetlinks.json su il vostro dominio con i dettagli dell'applicazione
Utilizzare la stessa logica di ascolto per elaborare i pagamenti riusciti appUrlOpen La bellezza di __CAPGO_KEEP_0__ è che una volta implementate le configurazioni specifiche per la piattaforma, il flusso di pagamento reale __CAPGO_KEEP_1__ rimane lo stesso su entrambe le piattaforme.

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.

Creazione di un'interfaccia di pagamento

Ecco un esempio di un componente di pulsante di pagamento in Vue che puoi aggiungere al tuo Capacitor app:

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

Gestione di Regioni diverse

Poiché le nuove linee guida di Apple si applicano solo alle app presenti nella Store App statunitense, avrai bisogno di una strategia per rilevare le regioni degli utenti e applicare il metodo di pagamento appropriato. Ecco un approccio più affidabile utilizzando la geolocalizzazione 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);
  }
}

Questo approccio utilizza il servizio gratuito ipapi.co per determinare il paese dell'utente in base all'indirizzo IP. Potresti anche utilizzare altri servizi di geolocalizzazione come MaxMind, o implementare questo controllo server-side per una maggiore sicurezza.

Nota: Sebbene questo approccio funzioni, è importante ricordare che la geolocalizzazione IP non è sempre del 100% preciso. Per applicazioni critiche, considera l'utilizzo di metodi di rilevamento multipli o l'aggiunta di un'opzione per consentire agli utenti di selezionare manualmente la loro regione.

Rilevamento di Posizione più Preciso con i Plugin Capacitor

Per un rilevamento di posizione più preciso, puoi utilizzare il plugin di geolocalizzazione Capacitor insieme a @capgo/capacitor-nativegeocoder per determinare il paese dell'utente con una maggiore precisione:

Prima, installa i plugin richiesti:

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

Configura i plugin nel tuo progetto Capacitor. Aggiungi il seguente al tuo 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;

Implementa la detezione della regione basata sulla posizione:

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

Questa implementazione fornisce un modo più preciso per determinare se un utente si trova fisicamente negli Stati Uniti. Prima cerca di utilizzare il GPS del dispositivo e il geocoder nativo per determinare il paese. Se ciò fallisce (a causa di problemi di autorizzazione o altri errori), ricade su una detezione basata sull'indirizzo IP.

Ricorda di aggiungere le autorizzazioni necessarie ai tuoi info.plist e AndroidManifest.xml Per iOS (

Per Android (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>

Utilizzando questo approccio ti consente di determinare con la massima accuratezza se un utente è idoneo per le opzioni di pagamento esterne in base alle nuove linee guida di Apple.android/app/src/main/AndroidManifest.xml):

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

Gestione delle Sottoscrizioni

Un vantaggio chiave dell'utilizzo di Stripe per i pagamenti è la possibilità di offrire e gestire le sottoscrizioni. Ecco come gestire la gestione delle sottoscrizioni nel tuo app:

One key advantage of using Stripe for payments is the ability to offer and manage subscriptions. Here’s how to handle subscription management in your Capacitor app:

Aggiungi una pagina di gestione delle sottoscrizioni nel tuo app per visualizzare le sottoscrizioni attive dell'utente:

1. Creazione di una Pagina di Gestione delle Sottoscrizioni

<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. Portale del cliente per la gestione delle sottoscrizioni

Stripe offre un Portale del cliente che consente agli utenti di gestire le loro sottoscrizioni. Puoi creare un collegamento a questo portale dal tuo server:

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

Assicurarsi che la conformità con le linee guida di App Store

Includere le dovute informazioni di disciolta sulle acquisizioni esterne

Implementare una finestra di dialogo che informa gli utenti che stanno lasciando l'applicazione (come richiesto da Apple)
Non tentare di eludere la commissione di Apple sulle acquisizioni effettuate all'interno dell'applicazione
Comunicare chiaramente agli utenti che Apple non è responsabile del trasferimento
Ecco un esempio di implementazione della finestra di dialogo di disciolta richiesta:

Testare la tua implementazione

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

Per testare la tua implementazione:

Clicca sul tuo pulsante di pagamento nell'applicazione, che dovrebbe visualizzare la disciolta e poi aprire la pagina di pagamento Stripe

2. Customer Portal per la gestione delle sottoscrizioni
Completa un pagamento di prova utilizzando la carta di test di Stripe 4242 4242 4242 4242
Dopo il pagamento, dovresti essere reindirizzato automaticamente al tuo app tramite il link universale
Controlla che il tuo webhook abbia ricevuto il checkout.session.completed evento

Conclusioni

L'abilità di utilizzare opzioni di pagamento esterne per beni digitali negli app iOS è un cambiamento significativo che offre ai sviluppatori maggiore flessibilità. Sebbene questo cambiamento attualmente si applichi solo agli app nella App Store degli Stati Uniti, fornisce un'importante alternativa al sistema di acquisto in-app di Apple

Utilizzando i collegamenti di pagamento Stripe con Capacitor, puoi implementare velocemente un'esperienza di checkout semplificata mantenendo la conformità con le linee guida di Apple. Per gli utenti fuori dagli Stati Uniti dove ancora si applica il sistema di acquisto in-app di Apple @capgo/native-purchases implementa StoreKit e Google Play Billing direttamente. Questo approccio ti offre anche l'avvantaggio dell'infrastruttura di pagamento robusta di Stripe, dei costi di elaborazione inferiori (3% vs 30%) e dei pagamenti più rapidi (giorni invece di mesi) rispetto al sistema di acquisto in-app di Apple

Ricorda che dovrai gestire tutte le questioni di supporto clienti e di rimborso direttamente, poiché questi pagamenti avvengono al di fuori dell'ecosistema di Apple

Hai implementato i collegamenti di pagamento Stripe nel tuo Capacitor app? Condividi la tua esperienza nei commenti!

Domande frequenti

Q: È questa l'approccio conforme alle linee guida di Apple?
A: Sì, a partire dal 1° maggio 2025, Apple consente di collegare metodi di pagamento esterni per beni e servizi digitali negli app distribuiti nella U.S. App Store, purché si includano le relative dichiarazioni.

Q: Devo pagare la commissione di Apple quando utilizzo metodi di pagamento esterni?
A: No, uno dei principali benefici delle nuove regole è che i pagamenti elaborati al di fuori del sistema di Apple non sono soggetti alla loro commissione.

Q: La mia azienda deve essere basata negli Stati Uniti per approfittare di queste nuove regole?
A: No, qualsiasi azienda proveniente da qualsiasi parte del mondo può implementare metodi di pagamento esterni, purché l'app sia disponibile nella U.S. App Store e gli utenti che effettuano gli acquisti siano ubicati negli Stati Uniti. La norma si applica al mercato (U.S. App Store) e alla localizzazione degli utenti, non alla localizzazione dell'azienda. Ciò significa che i sviluppatori dall'Europa, dall'Asia, dall'America del Sud o da qualsiasi altro luogo possono implementare i collegamenti di pagamento Stripe per i loro clienti statunitensi.

Q: Cosa succede se un utente fuori dagli Stati Uniti tenta di utilizzare l'opzione di pagamento esterno?
A: Dovresti implementare la detezione di regione (come mostrato nell'articolo) per offrire opzioni di pagamento esterne solo agli utenti negli Stati Uniti. Per altre regioni, dovresti continuare ad utilizzare il sistema di acquisto in-app di Apple.

Q: Posso utilizzare questo per beni o servizi fisici consumati al di fuori dell'app?
A: Sì, Apple ha sempre consentito ai metodi di pagamento esterni per beni e servizi fisici e consumati al di fuori dell'app (come condivisione di viaggio o consegna di cibo).

Continua da Pagamenti Stripe in Capacitor: Nuove linee guida di Apple

Se stai utilizzando Pagamenti Stripe in Capacitor: Nuove linee guida di Apple per pianificare la sicurezza e la conformità, connettilo con Crittografia per il dettaglio di implementazione in Crittografia, Conformità per il dettaglio di implementazione in Conformità, Capgo Scanner di sicurezza per il flusso di lavoro del prodotto in Capgo Scanner di sicurezza, Capgo Sicurezza per il workflow del prodotto in Capgo Sicurezza, e Capgo Centro di fiducia per il workflow del prodotto in Capgo Centro di fiducia.

Pagamenti Stripe in Capacitor: Nuove linee guida Apple