Implementar enlaces de pago de Stripe en aplicaciones Capacitor según las nuevas directrices de Apple

Hasta el 1 de mayo de 2025, Apple ha implementado cambios significativos en sus Directrices de Revisión de la Tienda de Aplicaciones, a raíz de la sentencia del caso v. Apple Epic. Estos cambios permiten específicamente a los desarrolladores de aplicaciones en los Estados Unidos enlazar a métodos de pago externos para bienes y servicios digitales, abriendo alternativas al sistema de compras en la aplicación de Apple.

La Epica Batalla Que Cambió Para Siempre los Pagos Móviles

El camino hacia este momento ha sido largo y controvertido. Todo comenzó en agosto de 2020 cuando Epic Games, el creador del juego muy popular Fortnite, violó deliberadamente las directrices del App Store de Apple implementando una opción de pago directa que evitaba la comisión del 30% de Apple. Apple eliminó inmediatamente Fortnite del App Store, y Epic respondió presentando una demanda que cuestionaba el control de Apple sobre la distribución de aplicaciones iOS y los pagos en aplicaciones.

Después de años de batallas legales, recursos y recursos contrarios, los tribunales finalmente dictaminaron que Apple debe permitir a los desarrolladores dirigir a los usuarios a métodos de pago alternativos fuera de sus aplicaciones. Esta decisión cambia fundamentalmente la economía del ecosistema del App Store, que ha estado operando bajo el mismo modelo financiero básico desde su inicio en 2008.

La Sentencia Final - Sin Más Recursos

Lo que hace que esta sentencia sea particularmente significativa es que es final y no puede ser recurrida. La Corte Suprema rechazó escuchar el recurso de Apple en 2025, sellando la decisión de la corte inferior como la ley de la tierra. Esto significa que los desarrolladores pueden implementar métodos de pago externos con confianza de que Apple no pueda revertir esta decisión a través de nuevos desafíos legales.

Trato Igual Garantizado por la Ley

Lo más importante, la sentencia establece explícitamente que Apple no puede discriminar contra aplicaciones que usan métodos de pago externos. La corte específicamente prohibió a Apple:

Cargando tarifas adicionales o imponiendo requisitos extras a aplicaciones que utilizan métodos de pago externos
Otorgar tratamiento preferencial en los resultados de búsqueda o destacar aplicaciones que utilizan exclusivamente el sistema de IAP de Apple
Usando medidas técnicas para hacer que las experiencias de pago externas sean inferiores al propio sistema de Apple
Imponiendo requisitos de divulgación onerosos más allá de la información básica del consumidor

Estas protecciones explícitas significan que los desarrolladores pueden implementar Stripe u otros proveedores de pago externos sin temor a represalias sutiles o discriminación de parte de Apple. El campo de juego se ha nivelado legalmente, y Apple debe tratar a todas las aplicaciones de manera igualitaria independientemente de sus opciones de métodos de pago.

Esta decisión representa uno de los desafíos más significativos a la aproximación de jardín cerrado de Apple y marca un cambio pivotal en cómo la monetización de aplicaciones móviles puede funcionar. Para los desarrolladores que han denunciado durante mucho tiempo el 30% de comisión de Apple (reducido a 15% para pequeñas empresas), esta decisión ofrece un camino hacia márgenes de beneficio más altos y más control sobre la experiencia del cliente.

Beneficios financieros de utilizar Stripe en lugar de las compras en la aplicación de Apple

Las implicaciones financieras de este cambio son sustanciales para los desarrolladores:

Tarifas de procesamiento de pago reducidas: Apple típicamente cobra un 30% de comisión en las compras en la aplicación (15% para pequeñas empresas), mientras que la tarifa de Stripe es solo alrededor de 2,9% + $0,30 por transacción. Esta diferencia puede aumentar significativamente tus márgenes de beneficio.
Pagos más rápidos: Con Apple, generalmente esperas 45-90 días para recibir tus fondos. Stripe, por otro lado, deposita los pagos en tu cuenta bancaria dentro de 2-3 días hábiles.
Simplificado Proceso de Devolución: Gestiona las devoluciones directamente a través del panel de control de Stripe en lugar de pasar por el sistema de devolución más complejo de Apple.

These ahorros de costos y mejor flujo de efectivo pueden ser cambios significativos, especialmente para los desarrolladores y empresas más pequeños.

In este artículo, exploraremos cómo implementar enlaces de pago de Stripe en tu Capacitor app para aprovechar estas nuevas reglas, asegurando al mismo tiempo la conformidad con las directrices actualizadas de Apple. Esta implementación se basa en.

la documentación oficial de Stripe para Enlaces de Pago , adaptada específicamente para aplicaciones __CAPGO_KEEP_0__., adapted specifically for Capacitor apps.

Las directrices de revisión de la Tienda de Mac App Store actualizadas ahora permiten a los desarrolladores dirigir a los usuarios a sitios web externos para el procesamiento de pagos, específicamente para bienes digitales y suscripciones. Este cambio es actualmente solo aplicable a las aplicaciones distribuidas en la Tienda de Mac App Store de los Estados Unidos.

Puntos clave para entender:

]} ]}

Ahora puedes vincular opciones de pago externas para bienes digitales dentro de tu aplicación
Sólo aplica para aplicaciones en la Tienda de Aplicaciones de EE. UU.
Debes cumplir aún con los requisitos de divulgación de Apple
Te responsabilizas por todo el soporte al cliente y el manejo de devoluciones

Configuración de enlaces de pago de Stripe en tu aplicación Capacitor

Vamos a sumergirnos en la implementación técnica:

Paso 1: Crea un enlace de pago en la consola de Stripe

Primero, crea un enlace de pago en tu consola de Stripe:

Navega a la sección de enlaces de pago en tu consola de Stripe
Haz clic en “+ Nuevo” para crear un nuevo enlace de pago
Define los detalles de tu producto o suscripción
Bajo las configuraciones de “Después del pago”, selecciona “No mostrar página de confirmación”
Establezca un enlace universal como su URL de éxito (lo configuraremos más tarde)
Haga clic en "Crear enlace" para generar su enlace de pago

Paso 2: Configuración de enlaces universales en su aplicación Capacitor

Para redirigir a los usuarios a su aplicación después de la finalización del pago, configure los enlaces universales:

Crear un archivo en su dominio: apple-app-site-association Almacene este archivo en:

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

Asegúrese de que se sirva con el tipo MIME correcto https://yourdomain.com/.well-known/apple-app-site-association
Configure su aplicación __CAPGO_KEEP_0__ para manejar los enlaces universales agregando la correspondiente autorización. Primero, en su 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;

Abra su proyecto de Xcode
- Seleccione el objetivo de su aplicación
- Crear un archivo en su dominio: (no translated because it was in the protectedTokens list)
- Vaya a “Configuración y capacidades”
- Haga clic en “+ Capacidad” y seleccione “Dominios asociados”
- Agregar applinks:yourdomain.com

Paso 3: Crear una página de respaldo

Crear una página de respaldo en la URL de redirección para manejar casos en los que la aplicación no esté instalada:

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

Paso 4: Implementar el botón de pago en su aplicación Capacitor

Ahora, agregue el botón de pago a su aplicación:

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

Paso 5: Manejar enlaces universales en su aplicación: Al abrir el enlace de pago en Safari (a través de window.open) en lugar de un navegador en la aplicación, es beneficioso porque los usuarios que han guardado previamente su información de pago con Stripe Link tendrán sus credenciales disponibles automáticamente. Esto crea una experiencia de pago más suave donde los usuarios no necesitarán reingresar su información de tarjeta de crédito, lo que reduce significativamente la fricción y las tasas de abandono.

Paso 5: Manejar enlaces universales en su aplicación

Configurar su aplicación para manejar los enlaces universales cuando los usuarios sean redirigidos de regreso:

Primero, instale el plugin de App:

npm install @capacitor/app

Registre el plugin de App en su aplicación:

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
}

Paso 6: Configuración de Webhook para la Cumplimiento de Pedidos

Finalmente, configure un webhook en su servidor para manejar pagos exitosos:

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

Compatibilidad con Android

Queremos ser claros: la sentencia de Epic v. Apple ha cambiado fundamentalmente el panorama de pagos móviles. No solo impacta directamente a las aplicaciones de iOS, sino que también fortalece la posición de los desarrolladores de Android que han estado utilizando métodos de pago externos.

Los desarrolladores de Android ahora pueden implementar soluciones de pago externas con total confianza. El precedente establecido por la sentencia de Apple protege a los desarrolladores de todas las plataformas de posibles restricciones futuras. Esta decisión judicial ha validado lo que muchos desarrolladores de Android han estado haciendo durante años - ofrecer opciones de pago alternativas con tarifas más bajas.

El Play Store de Google siempre ha sido menos restrictivo con respecto a los métodos de pago externos que Apple, y ahora que se ha establecido el precedente legal, no hay prácticamente riesgo en implementar Stripe o otros proveedores de pago externos en sus aplicaciones de Android. Puede seguir adelante con estas implementaciones sabiendo que está en terreno firme legal.

La implementación que hemos cubierto para iOS funciona casi idénticamente para dispositivos Android. Dado que el Play Store de Google no tiene las mismas restricciones sobre métodos de pago externos, puede utilizar el mismo enfoque de Enlaces de Pago de Stripe sin necesidad de diálogos de disculpa especiales.

Para manejar la enrutamiento profundo (equivalente a enlaces universales en iOS), necesitará:

Configura los enlaces de la aplicación en tu AndroidManifest.xml para manejar la URL de redirección
Crear un .well-known/assetlinks.json archivo en tu dominio con los detalles de tu aplicación
Utiliza la misma appUrlOpen lógica de escucha para procesar pagos exitosos

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.

Crear una interfaz de pago

Here’s an example of a payment button component in Vue that you can add to your 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>

Manejo de diferentes regiones

Puesto que las nuevas directrices de Apple solo se aplican a las aplicaciones en la Tienda de Aplicaciones de EE. UU., necesitarás una estrategia para detectar las regiones de los usuarios y aplicar el método de pago apropiado. Aquí tienes un enfoque más confiable utilizando la geolocalización de 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);
  }
}

Este enfoque utiliza el ipapi.co servicio para determinar el país del usuario según su dirección IP. También podrías utilizar otros servicios de geolocalización como MaxMind, o implementar esta comprobación en el lado del servidor para una mayor seguridad.

Nota: Si bien este enfoque funciona, es importante recordar que la geolocalización por IP no es siempre del 100% de precisión. Para aplicaciones críticas, considera utilizar múltiples métodos de detección o permitir a los usuarios seleccionar manualmente su región.

More Accurate Location Detection with Capacitor Plugins

Para una detección de ubicación más precisa, puedes utilizar el plugin de geolocalización de Capacitor junto con @capgo/capacitor-nativegeocoder para determinar el país del usuario con mayor precisión:

Primero, instala los plugins requeridos:

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

Configura los plugins en tu proyecto de Capacitor. Agrega lo siguiente a tu 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 detección de región basada en ubicación:

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

Esta implementación proporciona una forma más precisa de determinar si un usuario está físicamente ubicado en los Estados Unidos. Primero intenta utilizar el GPS del dispositivo y el geocodificador nativo para determinar el país. Si eso falla (debido a problemas de permisos o otros errores), se recurre a la detección basada en IP.

Recuerda agregar los permisos necesarios a tus info.plist (iOS) y AndroidManifest.xml (Android) archivos:

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

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

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

Usando este enfoque te da la forma más precisa de determinar si un usuario es elegible para opciones de pago externas bajo las nuevas directrices de Apple.

Administración de Suscripciones

Una de las ventajas clave de utilizar Stripe para los pagos es la capacidad de ofrecer y administrar suscripciones. Aquí está cómo manejar la administración de suscripciones en tu aplicación Capacitor:

1. Crear una página de administración de suscripciones

Agrega una página de administración de suscripciones en tu aplicación para mostrar las suscripciones activas del usuario:

<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. Portal del cliente para la administración de suscripciones

Stripe ofrece un Portal del cliente que permite a los usuarios administrar sus suscripciones. Puedes crear un enlace a este portal desde tu servidor:

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

Garantizando la conformidad con la Tienda de Mac

Para garantizar que tu implementación cumpla con las directrices de Apple:

Incluir las declaraciones apropiadas sobre compras externas
Implemente una hoja de diálogo informando a los usuarios que están saliendo de la aplicación (como se requiere por Apple)
No intenten eludir la comisión de Apple sobre las compras realizadas dentro de la aplicación
Comuníquese claramente a los usuarios de que Apple no es responsable de la transacción

Un ejemplo de implementar la hoja de diálogo de disclosura requerida:

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

Prueba su Implementación

Para probar su implementación:

Haga clic en su botón de pago en su aplicación, que debería mostrar la disclosura y luego abrir la página de pago de Stripe
Complete un pago de prueba utilizando la tarjeta de prueba de Stripe 4242 4242 4242 4242
Después del pago, debería ser redirigido de regreso a su aplicación a través del enlace universal
Verifique que su webhook recibió el checkout.session.completed evento

Conclusión

La capacidad de utilizar opciones de pago externas para bienes digitales en aplicaciones de iOS es un cambio significativo que da a los desarrolladores más flexibilidad.

Al utilizar enlaces de pago de Stripe con Capacitor, puede implementar rápidamente una experiencia de pago escalonada mientras mantiene la conformidad con las directrices de Apple. @capgo/native-purchases implementa directamente StoreKit y Google Play Billing. Esta aproximación también le da la ventaja de la infraestructura de pago robusta de Stripe, tarifas de procesamiento más bajas (3% vs 30%) y pagos más rápidos (días en lugar de meses) en comparación con el sistema de compras en la aplicación de Apple.

Recuerde que deberá manejar todos los problemas de soporte al cliente y las devoluciones directamente, ya que estas transacciones ocurren fuera del ecosistema de Apple.

¿Ha implementado enlaces de pago de Stripe en su aplicación Capacitor? Comparta su experiencia en los comentarios debajo!

Preguntas frecuentes

P: ¿Este enfoque es conforme con las directrices de Apple?
A: Sí, a partir del 1 de mayo de 2025, Apple permite vincular métodos de pago externos para bienes y servicios digitales en aplicaciones distribuidas en la Tienda de Aplicaciones de U.S., siempre y cuando incluya los discursos requeridos.

P: ¿Debo pagar la comisión de Apple cuando se utilizan métodos de pago externos?
A: No, uno de los principales beneficios de las nuevas reglas es que los pagos procesados fuera del sistema de Apple no están sujetos a su comisión.

Q: ¿Mi empresa necesita estar basada en los Estados Unidos para aprovechar estas nuevas reglas?
A: No, cualquier empresa del mundo puede implementar métodos de pago externos siempre y cuando su aplicación esté disponible en la Tienda de Aplicaciones de Apple de los Estados Unidos y los usuarios que realizan las compras estén ubicados en los Estados Unidos. La norma se aplica al mercado (Tienda de Aplicaciones de Apple de los Estados Unidos) y la ubicación de los usuarios, no la ubicación de su empresa. Esto significa que los desarrolladores de Europa, Asia, América del Sur o cualquier otro lugar pueden implementar enlaces de pago de Stripe para sus clientes de los Estados Unidos.

Q: ¿Qué sucede si un usuario fuera de los EE. UU. intenta usar la opción de pago externa?
A: Deberías implementar la detección de región (como se muestra en el artículo) para ofrecer solo opciones de pago externas a los usuarios de los EE. UU. Para otras regiones, deberías seguir utilizando el sistema de compras en la aplicación de Apple.

Q: ¿Puedo usar esto para bienes físicos o servicios consumidos fuera de la aplicación?
A: Sí, Apple siempre ha permitido métodos de pago externos para bienes físicos y servicios consumidos fuera de la aplicación (como compartir un taxi o pedir comida).

Continúa desde Pagos de Stripe en Capacitor: Nuevas Directrices de Apple

Si estás utilizando Pagos de Stripe en Capacitor: Nuevas Directrices de Apple para planificar la seguridad y la conformidad, conecta con Encriptación para los detalles de implementación en Criptografía, Cumplimiento para los detalles de implementación en Cumplimiento, Capgo Escáner de Seguridad para el flujo de trabajo del producto en Capgo Escáner de Seguridad, Capgo Seguridad para el flujo de trabajo del producto en Capgo Seguridad, y Capgo Centro de Confianza para el flujo de trabajo del producto en Capgo Centro de Confianza.

Pagos con Stripe en Capacitor: Nuevas directrices de Apple