Apple의 새로운 지침에 따라 Capacitor 앱에서 스트라이프 결제 링크를 구현하는 방법
2025년 5월 1일부터 Apple은 Epic v. Apple 사례 판결 이후 App Store Review 지침에 중요한 변경 사항을 도입했습니다. 이 변경 사항은 미국의 앱 개발자에게 디지털 상품 및 서비스에 대한 외부 결제 방법에 대한 링크를 제공할 수 있도록 허용하며, Apple의 인앱 구매 시스템에 대한 대안을 열어줍니다.모바일 결제를 영원히 바꾼 에픽의 대결
이 순간에 이르기까지의 길은 길고 논쟁적이었다. 2020년 8월 에픽 게임즈, 포트나이트의 창조주가 Apple의 App Store 지침을 위반하기 위해 Apple의 30% 수수료를 피하기 위해 직접 결제 옵션을 구현했다. Apple은 포트나이트를 App Store에서 제거하고 에픽은 iOS 앱 배포 및 인앱 결제에 대한 Apple의 통제를 도전하기 위해 소송을 제기했다.
법적 투쟁, 항소, 반항소가 수년 동안 계속되자, 법원은 Apple이 개발자에게 사용자에게 외부 앱에서 대안적인 결제 방법에 대한 링크를 제공할 수 있도록 해야 한다고 판결했다. 이 결정은 2008년부터 시작된 App Store 생태계의 기본적인 금융 모델을 바꾸는 것이다.
최종 판결 - 더 이상 항소 없음
2025년 5월 1일부터 Apple은 Epic v. Apple 사례 판결 이후 App Store Review 지침에 중요한 변경 사항을 도입했습니다.
What makes this ruling particularly significant is that it’s final and cannot be appealed further. The Supreme Court declined to hear Apple’s appeal in early 2025, cementing the lower court’s decision as the law of the land. This means developers can implement external payment methods with confidence that Apple cannot reverse this decision through further legal challenges.
법률에 의해 동일한 대우를 보장합니다.
Most importantly, the ruling explicitly states that Apple cannot discriminate against apps that use external payment methods. The court specifically prohibited Apple from:
- Apple이 외부 결제 방법을 사용하는 앱에 대해 차별을 하지 못하도록 규정하고 있습니다. Apple은 다음과 같은 것을 금지했습니다.
- Charging additional fees or imposing extra requirements on apps that use external payment methods
- Apple은 외부 결제 방법을 사용하는 앱에 대해 추가 요금을 부과하거나 추가적인 요구 사항을 부과할 수 없습니다.
- Giving preferential treatment in search results or featuring to apps that exclusively use Apple’s IAP system
Apple은 Apple의 IAP 시스템만 사용하는 앱에 대해 선호하는 검색 결과나 특징을 제공할 수 없습니다. (IAP: In-App Purchase, 앱 내 구매 시스템을 의미합니다.)
The ruling represents one of the most significant challenges to Apple’s walled garden approach and marks a pivotal shift in how mobile app monetization can work. For developers who have long complained about Apple’s 30% commission (reduced to 15% for small businesses), this ruling offers a path to higher profit margins and more control over the customer experience.
Apple의 In-App 구매 대신 Stripe을 사용하는 데 따른 금융 이익
The financial implications of this change are substantial for developers:
-
Apple의 Payment Processing 수수료를 줄이기: Apple typically charges a 30% commission on in-app purchases (15% for small businesses), while Stripe’s fee is only around 2.9% + $0.30 per transaction. This difference can significantly increase your revenue margins.
-
빠른 지불: With Apple, you typically wait 45-90 days to receive your funds. Stripe, on the other hand, deposits payments to your bank account within 2-3 business days.
-
간소화된 환불 처리: Handle refunds directly through Stripe’s dashboard instead of going through Apple’s more complex refund system.
These cost savings and improved cash flow can be game-changing, especially for smaller developers and businesses.
이 글에서는 Capacitor 앱에서 Stripe Payment Links를 구현하는 방법을 설명합니다. 이 방법은 Apple의 updated guidelines에 따라 구현되며, Apple의 In-App 구매 규정에 따라 새로운 규칙을 활용할 수 있습니다. In this article, we’ll explore how to implement Stripe Payment Links in your __CAPGO_KEEP_0__ app to take advantage of these new rules, while ensuring compliance with Apple’s updated guidelines.
이 구현은 Stripe의 공식 Payment Links 문서에 기반하여 Capacitor 앱을 위해 특별히 적합되었습니다.
새로운 지침 이해
업데이트 된 App Store 리뷰 지침은 개발자에게 사용자에게 외부 웹사이트로 결제 처리를 위한 링크를 제공할 수 있도록 허용합니다. 특히 디지털 상품 및 구독과 관련하여 이 변경 사항은 현재 미국 App Store에 배포된 앱에만 적용됩니다.
중요한 점을 이해하세요:
- 디지털 상품 내에서 앱에서 외부 결제 옵션에 대한 링크를 제공할 수 있습니다.
- 이 규칙은 미국 App Store에 배포된 앱에만 적용됩니다.
- 애플의 disclosure 요구 사항을 준수해야 합니다.
- 고객 지원 및 환불 처리에 대한 모든 책임은 여전히 개발자에게 있습니다.
Setting Up Stripe Payment Links in Your Capacitor App
기술 구현에 대해 자세히 알아보겠습니다:
Step 1: Stripe 대시보드에서 결제 링크를 생성하세요.
먼저 Stripe 대시보드에서 결제 링크를 생성하세요:
- Stripe 대시보드의 결제 링크 섹션으로 이동하세요.
- ‘+ New’을 클릭하여 새로운 결제 링크를 생성하세요.
- 상품 또는 구독 정보를 정의하세요.
- ‘결제 후’ 설정에서 ‘결제 확인 페이지를 표시하지 않음’을 선택하세요.
- 성공 URL로 UNIVERSAL LINK를 설정하세요 (이후에 설정할 예정입니다).
- 결제 링크를 생성하기 위해 ‘Create Link’을 클릭하세요.
Step 2: Capacitor 앱에서 UNIVERSAL LINK를 설정하세요.
결제 완료 후 사용자에게 앱으로 리다이렉트 하기 위해 UNIVERSAL LINK를 구성하세요:
- 도메인에 ‘file’를 생성하세요:
apple-app-site-association파일을 생성하세요:
{
"applinks": {
"apps": [],
"details": [
{
"appIDs": ["YOURTEAMID.com.yourdomain.yourapp"],
"components": [
{
"/": "/checkout_redirect*",
"comment": "Matches any URL whose path starts with /checkout_redirect"
}
]
}
]
}
}-
이 파일을 호스팅하세요.
https://yourdomain.com/.well-known/apple-app-site-association -
이 파일이 올바른 MIME 타입으로 제공되는지 확인하세요.
application/json -
Capacitor 앱을 universal 링크를 처리하도록 구성하려면 올바른 권한을 추가해야 합니다. 먼저,
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;- __CAPGO_KEEP_0__ 앱에 다음 권한을 추가하세요.
- Xcode 프로젝트를 열어보세요.
- 앱 목표를 선택하세요.
- “Signing & Capabilities”로 이동하세요.
- “+ Capability”을 클릭하고 “Associated Domains”을 선택하세요.
- 추가하세요.
applinks:yourdomain.com
Step 3: __CAPGO_KEEP_0__ 앱에 결제 버튼을 Implement하세요.
__CAPGO_KEEP_0__ 앱에 결제 버튼을 Implement하려면,
<!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>Step 4: Implement the Payment Button in Your Capacitor 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');
}Why Safari Matters: Safari (via
window.open)를 사용하여 앱 내 브라우저 대신 결제 링크를 열면, Stripe Link에서 이전에 결제 정보를 저장한 사용자들은 자동으로 자격 증명을 사용할 수 있습니다. 이로 인해 사용자가 다시 신용 카드 정보를 입력하지 않아도 체크아웃 경험을 더 편리하게 사용할 수 있으며, 사용자 탈출률과 충돌률을 크게 줄일 수 있습니다.
Step 5: 앱에서 Universal Links를 처리하세요
사용자가 다시 리다이렉트 될 때 universal links를 처리하기 위해 앱을 구성하세요:
- 첫 번째로 App 플러그인을 설치하세요:
npm install @capacitor/app- 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
}Step 6: 주문 처리를 위한 Webhook 설정
마지막으로, 서버에서 성공적인 결제를 처리하기 위해 webhook을 구성하세요:
// 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'));Android 호환성
Epic v. Apple 판결은 iOS 앱에 직접 영향을 미치며, Android 개발자에게 외부 결제 방법을 사용할 수 있는 위치를 강화했습니다.
안드로이드 개발자들은 이제 완전한 신뢰감으로 외부 결제 솔루션을 구현할 수 있습니다. 애플 판결의 선행 사례는 개발자들이 플랫폼을 막론하고 잠재적인 미래 제한으로부터 보호합니다. 이 법적 판결은 많은 안드로이드 개발자가 이미 수년 동안 수행해 왔던 것과 동일한 것을 확인했습니다 - 낮은 수수료의 대안 결제 옵션을 제공합니다.
구글 플레이 스토어는 항상 애플보다 외부 결제 방법에 대한 제한이 적었으며, 법적 선행 사례가established되면서 이제는 Stripe 또는 다른 외부 결제 제공자에 대한 구현을 위해 virtually의 위험이 없습니다. 앱에 이러한 구현을 진행할 수 있습니다. 이제는 법적 지반에 서서 진행할 수 있습니다.
iOS에 대한 구현 방법은 거의 동일한 안드로이드 장치에 대해 작동합니다. 구글 플레이 스토어는 외부 결제 방법에 대한 제한이 없기 때문에, Stripe Payment Links 접근 방식은 동일하게 사용할 수 있습니다. 특별한 disclosure dialogs가 필요하지 않습니다.
깊이 연결 (iOS의 universal links와 동일)을 처리하기 위해, 다음을 수행해야 합니다:
- App Links를 설정하여
AndroidManifest.xmlredirect URL을 처리하기 위해 - 도메인에 앱의 세부 정보가 포함된
.well-known/assetlinks.json파일을 생성합니다. - 성공적인 결제를 처리하기 위해 동일한
appUrlOpenlistener logic을 사용합니다.
Capacitor의 아름다움은 플랫폼별 구성을 구현한 후 실제 결제 흐름 code이 두 플랫폼 모두에서 동일하게 유지되는 것입니다.
결제 UI를 만들기
Vue에서 사용할 수 있는 결제 버튼 컴포넌트의 예시입니다. 이 컴포넌트를 Capacitor 앱에 추가하세요:
<template>
<div class="payment-container">
<div class="pricing-card">
<h2 class="mb-4 text-xl font-bold">{{ product.name }}</h2>
<p class="mb-6 text-gray-600">{{ product.description }}</p>
<div class="mb-6 price-tag">
<span class="text-2xl font-bold">${{ product.price }}</span>
<span v-if="product.isSubscription" class="text-sm text-gray-500">/month</span>
</div>
<button
@click="handlePayment"
class="py-3 w-full font-medium text-white bg-indigo-600 rounded-lg transition-colors hover:bg-indigo-700"
>
Purchase Now
</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { Dialog } from '@capacitor/dialog';
const props = defineProps({
product: {
type: Object,
required: true
},
userEmail: {
type: String,
default: ''
},
userId: {
type: String,
required: true
}
});
const isLoading = ref(false);
async function showExternalPaymentDisclosure() {
const { value } = await Dialog.confirm({
title: 'Leaving App for Payment',
message: 'You are about to leave this app to make a payment. Apple is not responsible for the privacy or security of payments that are not made through the App Store. All payment-related issues, including refunds, must be handled by our support team.',
okButtonTitle: 'Continue',
cancelButtonTitle: 'Cancel'
});
return value;
}
async function openPaymentLink() {
// Use your actual Stripe payment link
const baseUrl = 'https://buy.stripe.com/your_payment_link';
// Add URL parameters to customize the experience
const params = new URLSearchParams({
prefilled_email: encodeURIComponent(props.userEmail),
client_reference_id: props.userId
});
const fullUrl = `${baseUrl}?${params.toString()}`;
// Simple window.open works in both web and Capacitor
// Using _blank opens in Safari on iOS which is important for users with saved Stripe Link credentials
window.open(fullUrl, '_blank');
}
async function handlePayment() {
isLoading.value = true;
try {
// Only show the disclosure on iOS
if (window.Capacitor?.getPlatform() === 'ios') {
const userConfirmed = await showExternalPaymentDisclosure();
if (!userConfirmed) return;
}
await openPaymentLink();
} catch (error) {
console.error('Payment error:', error);
await Dialog.alert({
title: 'Payment Error',
message: 'There was an error initiating the payment. Please try again.'
});
} finally {
isLoading.value = false;
}
}
</script>다양한 지역을 처리하는 방법
새로운 Apple 지침은 미국 App Store에만 적용되므로 사용자 지역을 감지하고 적절한 결제 방법을 적용하는 전략이 필요합니다. 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);
}
}이 방법은 무료 ipapi.co 서비스를 사용하여 사용자의 IP 주소에 따라 국가를 결정합니다. MaxMind와 같은 다른 지리 정보 서비스를 사용하거나 서버 측에서 이 체크를 추가로 구현하여 보안성을 높일 수 있습니다.
주의: 이 방법은 작동하지만 IP 지리 정보가 항상 100% 정확하지 않다는 점을 기억하세요. mission-critical 애플리케이션의 경우 여러 감지 방법을 사용하거나 사용자가 지역을 수동으로 선택하도록 허용하세요.
Capacitor 플러그인으로 더 정확한 위치 감지를 위한 Capacitor 위치 플러그인
더 정확한 위치 감지를 위해 Capacitor 위치 플러그인과 @capgo/capacitor-nativegeocoder를 사용하여 사용자의 국가를 더 높은 정확도로 결정하세요:
- 필요한 플러그인을 설치하세요:
npm install @capacitor/geolocation @capgo/capacitor-nativegeocoder- Capacitor 프로젝트에서 플러그인을 구성하세요. Capacitor에 다음을 추가하세요:
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;- Implement the location-based region detection:
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);
}
}미국에 실제로 위치한 사용자 여부를 더 정확하게 판단할 수 있는 방법을 제공합니다. GPS와 네이티브 지오코더를 사용하여 국가를 결정하려고 시도합니다. 권한 문제 또는 기타 오류로 실패하면 IP 기반 탐지로 FALLBACK합니다.
__CAPGO_KEEP_0__ 앱에 필요한 권한을 추가하십시오. info.plist (iOS) 및 AndroidManifest.xml (Android) 파일에 추가하십시오.
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>Android (android/app/src/main/AndroidManifest.xml):
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />이 방법을 사용하면 사용자가 새로운 애플 지침에 따라 외부 결제 옵션을 받을 자격이 있는지 가장 정확하게 판단할 수 있습니다.
구독 관리
Stripe를 사용하는 가장 큰 장점 중 하나는 구독을 제공하고 관리할 수 있다는 것입니다. Capacitor 앱에서 구독 관리를 처리하는 방법을 알아보겠습니다.
1. 구독 관리 페이지 만들기
__CAPGO_KEEP_0__ 앱에 구독 관리 페이지를 추가하여 사용자의 활성 구독을 표시하십시오:
<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. 구독 관리를 위한 고객 포털
__CAPGO_KEEP_0__은 구독 관리를 위한 고객 포털을 제공합니다. 사용자는 이 포털에서 구독을 관리할 수 있습니다. 서버에서 이 포털에 대한 링크를 생성할 수 있습니다:
// 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;
}애플 스토어 준수
애플의 지침을 준수하기 위해 구현을 확인하려면:
- 외부 구매에 대한 적절한 고지를 포함하십시오
- 애플의 지침에 따라 앱을 떠나는 사용자에게 알리는 모달 시트를 implement하십시오
- 앱 내에서 구매한 애플의 수수료를 circumvent하지 마십시오
- 사용자에게 애플이 거래에 책임이 없다는 것을 명확하게 전달하십시오
구현을 구현하는 예시:
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);
}
}구현을 테스트하려면:
앱 내의 결제 버튼을 클릭하여 disclosure를 표시하고 Stripe 결제 페이지를 열 수 있습니다
- Click your payment button in your app, which should show the disclosure and then open the Stripe payment page
- Stripe 테스트 카드를 사용하여 테스트 결제를 완료하세요
4242 4242 4242 4242 - 결제 후, Universal 링크를 통해 앱으로 돌아가야 합니다
- __CAPGO_KEEP_0__ 웹후크가 이벤트를 받았는지 확인하세요
checkout.session.completed이벤트
결론
iOS 앱에서 디지털 상품에 대한 외부 결제 옵션을 사용할 수 있는 능력은 개발자에게 더 많은 유연성을 제공하는 중요한 변화입니다. 이 변경은 현재 미국 앱 스토어에만 적용되지만, Apple의 내 앱 구매 시스템에 대한 중요한 대안을 제공합니다.
Stripe Payment Links를 사용하여 Capacitor, Apple의 지침을 준수하면서도 단순화된 체크아웃 경험을 구현할 수 있습니다. 미국 밖의 사용자에게는 Apple의 내 앱 구매 시스템이 적용되므로, @capgo/native-purchases StoreKit과 Google Play Billing을 직접 implement합니다. 이 접근 방식은 또한 Stripe의 강력한 결제 인프라, Apple의 내 앱 구매 시스템보다 낮은 처리 수수료 (3% vs 30%), 빠른 지불 (일주일 이내 vs 몇 달) 등의 이점을 제공합니다.
Apple의 생태계 외부에서 발생하는 이 거래에 대한 모든 고객 지원 및 환불 문제를 직접 처리해야 하다는 점을 기억하세요.
Capacitor 앱에 Stripe Payment Links를 구현했나요? 댓글에서 경험을 공유해 보세요!
FAQs
Q: 이 방법은 애플의 지침과 호환되나요?
A: 2025년 5월 1일부터, 미국 앱 스토어에서 배포되는 앱에서 디지털 상품 및 서비스에 대한 외부 결제 방법에 대한 링크를 허용하고, 필요한 고지 사항을 포함하는 경우, 애플의 지침을 준수합니다.
Q: 외부 결제 방법을 사용할 때 애플의 수수료를 지불해야 하나요?
A: 새로운 규칙의 주요 이점 중 하나는 애플의 시스템 외부에서 처리되는 결제는 그들의 수수료에 해당하지 않습니다.
Q: 이 새로운 규칙을 활용하기 위해 회사 위치가 미국에 위치해야 하나요?
A: 아니오, 이 새로운 규칙을 활용하기 위해 회사 위치가 미국에 위치해야 하는 것은 아닙니다. 앱이 미국 앱 스토어에 배포되어 있고, 구매를 하는 사용자가 미국에 위치한 경우, 세계 어디에서나 회사 위치가 있는 개발자가 US 앱 스토어에서 Stripe Payment Links를 구현할 수 있습니다. 이 규정은 사용자의 위치와 시장(US 앱 스토어)에 적용되며, 회사 위치에 적용되지 않습니다. 따라서 유럽, 아시아, 남미, 또는 어디에서든 개발자가 US 기반 고객에게 Stripe Payment Links를 구현할 수 있습니다.
Q: 미국 밖의 사용자가 외부 결제 옵션을 사용하려고 할 때 어떻게 되나요?
A: 미국 사용자만 외부 결제 옵션을 제공하기 위해 지역 감지 기능을 implement(기사에서 설명한 것처럼)을 하여야 합니다. 다른 지역의 사용자에게는 애플의 인앱 구매 시스템을 계속 사용해야 합니다.
Q: 이 방법을 물리적 상품 또는 앱 외부에서 소비되는 서비스에 사용할 수 있나요?
A: 예, 애플은 항상 앱 외부에서 소비되는 물리적 제품 및 서비스 (라이드 셰어링 또는 음식 배달과 같은) 에 대한 외부 결제 방법을 허용했습니다.
Stripe 결제에서 계속하기 Capacitor: 새로운 애플 지침
이러한 경우 Stripe 결제에서 계속하기 Capacitor: 새로운 애플 지침 보안과 규정 준수를 계획하기 위해 사용 중인 Stripe 결제에서 계속하기 __CAPGO_KEEP_0__: 새로운 애플 지침 을 보안과 규정 준수를 위한 구현 세부 정보에 에 연결하세요. 규정 준수를 위한 구현 세부 정보에 Capgo Security Scanner for the product workflow in Capgo Security Scanner, Capgo 보안 스캐너 제품 워크플로우에서 Capgo 보안에 대해 Capgo 신뢰 센터 제품 워크플로우에서 Capgo 신뢰 센터에 대해
