Menjalankan Tautan Pembayaran Stripe di Aplikasi Capacitor yang Mengikuti Pedoman Baru Apple

Sejak 1 Mei 2025, Apple telah menerapkan perubahan signifikan pada Pedoman Ulasan Aplikasi App Store setelah putusan pengadilan dalam kasus Epic v. Apple Kasus Epic v. Apple. Perubahan ini secara spesifik memungkinkan pengembang aplikasi di Amerika Serikat untuk menghubungkan ke metode pembayaran eksternal untuk barang-barang digital dan layanan, membuka alternatif untuk sistem pembelian dalam aplikasi Apple.

Perang Epic yang Mengubah Pembayaran Seluler Selamanya

Jalan menuju momen ini telah panjang dan kontroversial. Semua dimulai pada Agustus 2020 ketika Epic Games, pembuat permainan populer Fortnite, secara sengaja melanggar pedoman App Store Apple dengan menerapkan opsi pembayaran langsung yang menghindari komisi 30% Apple. Apple segera menghapus Fortnite dari App Store, dan Epic bereaksi dengan mengajukan gugatan yang menantang kontrol Apple atas distribusi aplikasi iOS dan pembayaran dalam aplikasi.

Setelah bertahun-tahun berjuang, banding, dan banding balik, pengadilan akhirnya memutuskan bahwa Apple harus memungkinkan pengembang untuk mengarahkan pengguna ke metode pembayaran alternatif di luar aplikasi. Keputusan ini secara fundamental mengubah ekonomi ekosistem App Store, yang telah beroperasi di bawah model keuangan dasar yang sama sejak awalnya pada tahun 2008.

Keputusan Akhir - Tidak Ada Banding Lagi

Apakah yang membuat keputusan ini sangat signifikan adalah bahwa itu adalah final dan tidak dapat dibantah lagi. Mahkamah Agung menolak untuk mendengar permohonan Apple pada awal 2025, memperkuat keputusan pengadilan rendah sebagai hukum tanah air. Ini berarti pengembang dapat menerapkan metode pembayaran eksternal dengan percaya diri bahwa Apple tidak dapat membalikkan keputusan ini melalui tantangan hukum yang lebih lanjut.

Perlakuan Sama dijamin oleh Hukum

Paling penting, keputusan ini secara eksplisit menyatakan bahwa Apple tidak dapat diskriminasi terhadap aplikasi yang menggunakan metode pembayaran eksternal. Pengadilan secara spesifik melarang Apple dari:

Mengenakan biaya tambahan atau menetapkan persyaratan tambahan pada aplikasi yang menggunakan metode pembayaran eksternal
Menghadiahi aplikasi yang eksklusif menggunakan sistem IAP Apple dengan hasil pencarian atau fitur yang lebih baik
Menggunakan tindakan teknis untuk membuat pengalaman pembayaran eksternal menjadi kurang baik daripada sistem Apple sendiri
Mengenakan persyaratan diskusi yang berat melebihi informasi konsumen dasar

Perlindungan eksplisit ini berarti bahwa pengembang dapat menerapkan Stripe atau penyedia pembayaran eksternal lainnya tanpa takut akan balasan atau diskriminasi halus dari Apple. Lapangan bermain telah dipertahankan secara hukum, dan Apple harus menghadapi semua aplikasi dengan sama baiknya tanpa peduli dengan pilihan metode pembayaran mereka.

Peraturan ini merupakan salah satu tantangan paling signifikan terhadap pendekatan taman Apple dan menandai perubahan besar dalam cara aplikasi mobile dapat di monetisasi.

Keuntungan Keuangan Menggunakan Stripe Atas Pembelian Aplikasi Dalam Aplikasi Apple

Implikasi Keuangan dari Perubahan ini sangat signifikan bagi pengembang:

Biaya Pengolahan Pembayaran yang Dikurangi: Apple biasanya mengenakan komisi 30% atas pembelian dalam aplikasi (15% untuk bisnis kecil), sementara biaya Stripe hanya sekitar 2,9% + $0,30 per transaksi. Perbedaan ini dapat meningkatkan signifikan laba margin Anda.
Pembayaran yang Lebih Cepat: Dengan Apple, Anda biasanya menunggu 45-90 hari untuk menerima dana Anda. Stripe, di sisi lain, mentransfer pembayaran ke rekening bank Anda dalam 2-3 hari kerja.
Proses Pengembalian Uang yang Sederhana: Tangan pengembalian uang secara langsung melalui dashboard Stripe daripada melalui sistem pengembalian uang yang lebih kompleks Apple.

Kurangnya Biaya dan Arus Kas yang Diperbaiki ini dapat berubah permainan, terutama bagi pengembang dan bisnis yang lebih kecil.

In this article, we’ll explore how to implement Stripe Payment Links in your Capacitor app to take advantage of these new rules, while ensuring compliance with Apple’s Peraturan ini merupakan salah satu tantangan paling signifikan terhadap pendekatan taman Apple dan menandai perubahan besar dalam cara aplikasi mobile dapat di monetisasi. Untuk pengembang yang telah lama mengeluh tentang komisi 30% Apple (diperkecil menjadi 15% untuk bisnis kecil), peraturan ini menawarkan jalan untuk laba margin yang lebih tinggi dan kontrol yang lebih besar atas pengalaman pelanggan..

Implementasi ini didasarkan pada Dokumentasi resmi Stripe untuk Tautan Pembayaran, disesuaikan khusus untuk aplikasi Capacitor.

Mengerti Pedoman Baru

Pedoman Ulasan Aplikasi App Store yang diperbarui sekarang memungkinkan pengembang untuk mengarahkan pengguna ke situs web eksternal untuk pengolahan pembayaran, khususnya untuk barang digital dan langganan. Perubahan ini saat ini hanya berlaku untuk aplikasi yang didistribusikan di App Store Amerika Serikat.

Poin penting untuk dipahami:

Anda dapat sekarang menghubungkan opsi pembayaran eksternal untuk barang digital di dalam aplikasi Anda
Perubahan ini hanya berlaku untuk aplikasi di App Store Amerika Serikat
Anda harus tetap mematuhi persyaratan pengungkapan Apple
Anda tetap bertanggung jawab atas semua dukungan pelanggan dan pengelolaan pengembalian uang

Mengatur Tautan Pembayaran Stripe di Aplikasi Capacitor Anda

Mari kita masuk ke implementasi teknis:

Langkah 1: Buat Tautan Pembayaran di Dashboard Stripe

Pertama, buatlah tautan pembayaran di Dashboard Stripe Anda:

Navigasikan ke bagian Tautan Pembayaran di Dashboard Stripe Anda
Klik “+ Baru” untuk membuat tautan pembayaran baru
Tentukan detail produk atau langganan Anda
Di pengaturan “Setelah Pembayaran”, pilih “Tidak Tunjukkan Halaman Konfirmasi”
Setel tautan universal sebagai URL kesuksesan Anda (kami akan mengkonfigurasi ini nanti)
Klik “Buat Tautan” untuk menghasilkan tautan pembayaran Anda

Step 2: Set Up Universal Links in Your Capacitor App

Untuk mengarahkan pengguna kembali ke aplikasi Anda setelah pembayaran selesai, konfigurasi tautan universal:

Buat sebuah apple-app-site-association file di domain Anda:

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

Host file ini di https://yourdomain.com/.well-known/apple-app-site-association
Pastikan disajikan dengan jenis MIME yang benar application/json
Konfigurasi aplikasi Capacitor Anda untuk menghandle tautan universal dengan menambahkan hak istimewa yang tepat. Pertama, di 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;

Tambahkan hak istimewa Domain Terkait ke proyek Xcode Anda:
- Buka proyek Xcode Anda
- Pilih target aplikasi Anda
- Pergi ke "Tanda Tangan & Kemampuan"
- Klik "+ Kemampuan" dan pilih "Domain Terkait"
- Tambahkan applinks:yourdomain.com

Langkah 3: Buat Halaman Jatuh Kembali

Buat halaman jatuh kembali di URL pengalihan untuk menghandle kasus di mana aplikasi tidak terinstal:

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

Langkah 4: Implementasi Tombol Pembayaran di Aplikasi Capacitor Anda

Now, tambahkan tombol pembayaran ke aplikasi Anda:

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

Mengapa Safari Penting: Membuka tautan pembayaran di Safari (via window.open) daripada browser aplikasi internal lebih bermanfaat karena pengguna yang telah menyimpan informasi pembayaran mereka dengan Stripe Link akan memiliki kreditens mereka secara otomatis tersedia. Hal ini menciptakan pengalaman checkout yang lebih halus di mana pengguna tidak perlu mengulangi informasi kartu kredit mereka, secara signifikan mengurangi gesekan dan tingkat kecualan.

Langkah 5: Mengatasi Tautan Universal di Aplikasi Anda

Konfigurasi aplikasi Anda untuk mengatasi tautan universal ketika pengguna diarahkan kembali:

Langkah pertama, instal plugin App:

npm install @capacitor/app

Mendaftarkan plugin App di aplikasi Anda:

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
}

Langkah 6: Mengatur Webhook untuk Penukaran Pesanan

Akhirnya, konfigurasi webhook di server Anda untuk mengatasi pembayaran sukses:

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

Kemampuan Kompatibilitas Android

Marilah kita jelas: putusan Epic v. Apple telah secara fundamental mengubah landskap pembayaran mobile. Tidak hanya mempengaruhi aplikasi iOS, tetapi juga memperkuat posisi pengembang Android yang telah menggunakan metode pembayaran eksternal.

Para pengembang Android sekarang dapat menerapkan solusi pembayaran eksternal dengan keyakinan yang lengkap. Keputusan pengadilan yang telah ditetapkan oleh Apple secara efektif melindungi pengembang di berbagai platform dari potensi pembatasan di masa depan. Keputusan pengadilan ini telah memvalidasi apa yang banyak pengembang Android lakukan selama bertahun-tahun - menawarkan opsi pembayaran alternatif dengan biaya yang lebih rendah.

Play Store Google selalu kurang restriktif tentang metode pembayaran eksternal daripada Apple, dan sekarang dengan keputusan hukum yang telah ditetapkan, ada hampir tidak ada risiko dalam menerapkan Stripe atau penyedia pembayaran eksternal lainnya di aplikasi Android Anda. Anda dapat melanjutkan dengan implementasi ini dengan yakin bahwa Anda berada di atas tanah hukum yang solid.

Implementasi yang telah kami bahas untuk iOS hampir identik untuk perangkat Android. Karena Play Store Google tidak memiliki pembatasan yang sama tentang metode pembayaran eksternal, Anda dapat menggunakan pendekatan Link Pembayaran Stripe yang sama tanpa perlu dialog diskusi khusus.

Untuk menghandle deep linking (setara dengan universal links di iOS), Anda akan perlu:

Mengatur App Links di aplikasi Anda untuk menghandle URL redirect AndroidManifest.xml Membuat file
di domain Anda dengan detail aplikasi Anda .well-known/assetlinks.json Menggunakan logika pemanggil yang sama untuk memproses pembayaran sukses
Keindahan __CAPGO_KEEP_0__ adalah bahwa setelah Anda menerapkan konfigurasi platform khusus, aliran pembayaran sebenarnya __CAPGO_KEEP_1__ tetap sama di kedua platform. appUrlOpen Pengembang Android sekarang dapat menerapkan solusi pembayaran eksternal dengan keyakinan yang lengkap.

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.

Membuat Antarmuka Pembayaran

Contoh Button Pembayaran di Vue yang dapat Anda tambahkan ke aplikasi Capacitor Anda:

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

Menangani Wilayah yang Berbeda

Karena pedoman baru Apple hanya berlaku untuk aplikasi di App Store Amerika Serikat, Anda perlu strategi untuk mendeteksi wilayah pengguna dan menerapkan metode pembayaran yang tepat. Berikut adalah pendekatan yang lebih dapat diandalkan menggunakan lokasi geografis 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);
  }
}

Pendekatan ini menggunakan layanan gratis ipapi.co untuk menentukan negara pengguna berdasarkan alamat IP mereka. Anda juga dapat menggunakan layanan geolokasi lain seperti MaxMind, atau menerapkan pengecekan ini di server untuk keamanan tambahan.

Peringatan: Meskipun pendekatan ini berfungsi, penting untuk diingat bahwa lokasi geografis IP tidak selalu akurat 100%. Untuk aplikasi mission-critical, pertimbangkan menggunakan metode deteksi lokasi yang lebih akurat atau memungkinkan pengguna untuk memilih wilayah secara manual.

Deteksi Lokasi yang Lebih Akurat dengan Plugin Capacitor

Untuk deteksi lokasi yang lebih akurat, Anda dapat menggunakan plugin Capacitor Geolocation bersama dengan @capgo/capacitor-nativegeocoder untuk menentukan negara pengguna dengan presisi yang lebih tinggi:

Langkah Pertama, instal plugin yang diperlukan:

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

Konfigurasi plugin di project Capacitor Anda. Tambahkan kode berikut ke 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;

Implementasikan deteksi wilayah berdasarkan lokasi:

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

Implementasi ini menyediakan cara yang lebih akurat untuk menentukan apakah pengguna berada di Amerika Serikat secara fisik. Pertama-tama, ia mencoba menggunakan GPS perangkat dan geokoder native untuk menentukan negara. Jika itu gagal (disebabkan oleh masalah izin atau kesalahan lainnya), ia kembali ke deteksi berdasarkan IP.

Hatuhkan izin yang diperlukan ke dalam info.plist Hatuhkan izin yang diperlukan ke dalam AndroidManifest.xml Hatuhkan izin yang diperlukan ke dalam

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

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

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

Menggunakan pendekatan ini memberikan cara yang paling akurat untuk menentukan apakah pengguna berhak atas opsi pembayaran eksternal di bawah pedoman baru Apple.

Pengelolaan Langganan

Salah satu kelebihan utama menggunakan Stripe untuk pembayaran adalah kemampuan untuk menawarkan dan mengelola langganan. Berikut cara mengelola manajemen langganan di aplikasi Capacitor Anda:

1. Membuat Halaman Manajemen Langganan

Tambahkan halaman manajemen langganan di aplikasi Anda untuk menampilkan langganan aktif pengguna:

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

1. Portal Pelanggan untuk Pengelolaan Langganan

Stripe menawarkan Portal Pelanggan yang memungkinkan pengguna mengelola langganan mereka. Anda dapat membuat tautan ke portal ini dari server Anda:

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

Menggunakan Aplikasi untuk Menghindari Keterlibatan App Store

Untuk memastikan implementasi Anda sesuai dengan pedoman Apple:

Termasuk diskusi yang tepat tentang pembelian eksternal
Mengimplementasikan jendela modal yang memberitahu pengguna bahwa mereka meninggalkan aplikasi (sebagaimana yang diperlukan oleh Apple)
Jangan mencoba menghindari komisi Apple pada pembelian yang dibuat di dalam aplikasi
Mengkomunikasikan dengan jelas kepada pengguna bahwa Apple tidak bertanggung jawab atas transaksi

Contoh Implementasi Diskusi Modal yang Diperlukan:

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

Menguji Implementasi Anda

Untuk menguji implementasi Anda:

Mengklik tombol pembayaran Anda di aplikasi, yang harus menampilkan diskusi dan kemudian membuka halaman pembayaran Stripe
Menggunakan kartu uji pembayaran Stripe 4242 4242 4242 4242
Setelah pembayaran, Anda harus diarahkan kembali ke aplikasi Anda melalui tautan universal
Periksa bahwa webhook Anda menerima checkout.session.completed event

Kesimpulan

Kemampuan menggunakan opsi pembayaran eksternal untuk barang digital di aplikasi iOS adalah perubahan yang signifikan yang memberikan developer lebih banyak fleksibilitas. Meskipun perubahan ini saat ini hanya berlaku untuk aplikasi di App Store Amerika Serikat, namun memberikan alternatif penting dari sistem pembelian dalam aplikasi Apple.

Dengan menggunakan Tautan Pembayaran Stripe bersama dengan Capacitor, Anda dapat melaksanakan pengalaman checkout yang terstruktur dengan cepat sambil mempertahankan konsistensi dengan pedoman Apple. Namun, untuk pengguna di luar Amerika Serikat di mana sistem pembelian dalam aplikasi Apple masih berlaku, @capgo/native-purchases mengimplementasikan StoreKit dan Billing Google Play secara langsung. Pendekatan ini juga memberikan keuntungan dari infrastruktur pembayaran yang kuat Stripe, biaya pengolahan yang lebih rendah (3% vs 30%), dan pembayaran yang lebih cepat (hari-hari bukan bulan-bulan) dibandingkan dengan sistem pembelian dalam aplikasi Apple.

Hati-hati bahwa Anda harus menangani semua dukungan pelanggan dan masalah pengembalian uang secara langsung, karena transaksi ini terjadi di luar ekosistem Apple.

Apakah Anda telah mengimplementasikan Tautan Pembayaran Stripe di aplikasi Capacitor Anda? Bagikan pengalaman Anda di komentar di bawah!

Pertanyaan yang Sering Diajukan

Q: Apakah pendekatan ini sesuai dengan pedoman Apple?
A: Ya, sejak 1 Mei 2025, Apple memungkinkan penggunaan metode pembayaran eksternal untuk barang dan jasa digital di aplikasi yang didistribusikan di App Store Amerika Serikat, selama Anda mencantumkan diskusi yang diperlukan.

Q: Apakah saya perlu membayar komisi Apple ketika menggunakan metode pembayaran eksternal?
A: Tidak, salah satu manfaat utama dari aturan baru adalah bahwa pembayaran yang diproses di luar sistem Apple tidak berlaku untuk komisi mereka.

Q: Apakah perusahaan saya perlu berbasis di Amerika Serikat untuk menikmati aturan baru ini?
A: Tidak, perusahaan dari mana saja di dunia dapat menerapkan metode pembayaran eksternal selama aplikasi Anda tersedia di App Store Amerika Serikat dan pengguna yang melakukan pembelian berada di Amerika Serikat. Aturan ini berlaku untuk pasar (App Store Amerika Serikat) dan lokasi pengguna, bukan lokasi perusahaan Anda. Ini berarti pengembang dari Eropa, Asia, Amerika Selatan, atau mana saja dapat menerapkan Tautan Pembayaran Stripe untuk pelanggan Amerika Serikat mereka.

Q: Apa yang terjadi jika pengguna di luar Amerika Serikat mencoba menggunakan opsi pembayaran eksternal?
A: Anda harus menerapkan deteksi wilayah (seperti yang ditunjukkan dalam artikel) untuk hanya menawarkan opsi pembayaran eksternal kepada pengguna di Amerika Serikat. Untuk wilayah lain, Anda harus terus menggunakan sistem pembelian dalam aplikasi Apple.

Q: Apakah saya dapat menggunakan ini untuk barang fisik atau jasa yang dikonsumsi di luar aplikasi?
A: Ya, Apple telah selalu memungkinkan metode pembayaran eksternal untuk barang dan jasa fisik yang dikonsumsi di luar aplikasi (seperti berbagi perjalanan atau pengiriman makanan).

Teruskan dari Pembayaran Stripe di Capacitor: Pedoman Baru Apple

Jika Anda menggunakan Pembayaran Stripe di Capacitor: Pedoman Baru Apple untuk merencanakan keamanan dan keterpaduan, hubungkannya dengan Enkripsi untuk detail implementasi di Enkripsi, Keterpaduan untuk detail implementasi di Keterpaduan, Capgo Scanner Keamanan untuk alur kerja produk di Capgo Scanner Keamanan, Capgo Keamanan untuk alur kerja produk di Capgo Keamanan, dan Capgo Pusat Kepercayaan untuk alur kerja produk di Capgo Pusat Kepercayaan.