Het integreren van in-app aankoop (IAP) functionaliteit in een Capacitor app, vooral voor een abonnementsdienst, vereist enkele stappen en configuraties voor zowel iOS als Android. Hieronder vind je een overzicht van de stappen, benodigde configuraties, en best practices, inclusief voorbeeldcode. **1. Kies een geschikte IAP plugin** Gebruik bijvoorbeeld [capacitor-in-app-purchase](https://github.com/diogocezar/capacitor-in-app-purchase) of een andere compatibele plugin die IAP ondersteunt. **2. Installeer en configureer de plugin** ```bash npm install capacitor-in-app-purchase npx cap sync ``` **3. Platform-specifieke configuraties** **iOS:** - Open Xcode project (`ios/App/App.xcworkspace`) - Ga naar `Signing & Capabilities` en voeg 'In-App Purchase' toe - Voeg in App Store Connect je in-app aankopen toe (abonnementen) - Zorg dat je App ID en provisioning profiles correct zijn ingesteld **Android:** - Voeg de in-app aankopen toe via Google Play Console - Voeg de product-ID’s toe voor je abonnementen - Update je `build.gradle` met de juiste versie van de billing library, indien nodig **4. In-App Aankoop Producten Configureren** Definieer je abonnementen in App Store Connect en Google Play Console met unieke product-ID’s. **5. Implementatie in je app** Hier is een voorbeeld van basiscode voor het laden en kopen van een abonnement: ```typescript import { IAP } from 'capacitor-in-app-purchase'; async function initIAP() { await IAP.initialize(); // Verkrijg beschikbare producten const products = await IAP.getProducts({ productIds: ['abonnement_1maand', 'abonnement_1jaar'] }); console.log('Beschikbare producten:', products); } async function koopProduct(productId: string) { try { const purchase = await IAP.requestPurchase({ productId }); // Verwerk de aankoop if (purchase.state === 'purchased') { // Bevestig en activeer abonnement handleSuccessfulPurchase(purchase); } } catch (error) { console.error('Aankoop mislukt:', error); } } function handleSuccessfulPurchase(purchase: any) { // Verifieer aankoop indien mogelijk (bijv. via server) // Bewaar aankoopstatus in je backend of lokale opslag // Activeer functionaliteit voor gebruiker console.log('Aankoop succesvol:', purchase); } ``` **6. Beveiliging en validatie** - **Server-side verificatie:** Laat aankoopgegevens door je backend controleren via Apple/Google servers. Bijvoorbeeld, voor iOS gebruik je de receipt-data; voor Android de purchase token. - **Gebruik van receipt data:** Verzamel receipt informatie en verifieer deze op je server om frauduleuze aankopen te voorkomen. **7. Beheer van abonnementen** - Controleer regelmatig de aankoopstatus en vervaldata - Gebruik bijvoorbeeld webhooks (Google Play) of receipt verificatie (Apple) om abonnementsstatus te controleren **8. Best practices voor een soepele gebruikerservaring** - Toon duidelijke informatie over de aankoop en abonnementsvoorwaarden - Bied een eenvoudige manier om abonnement te beheren of te annuleren - Implementeer gepaste foutafhandeling en feedback - Zorg dat aankopen en verificaties betrouwbaar worden afgehandeld, liefst via je backend **Samenvatting van belangrijke punten** | Stap | Actie | Platform | Notities | |--------|---------|---------|-----------| | 1 | Plugin installeren | Beide | Capacitor plugin voor IAP | | 2 | Configuratie | iOS en Android | App store instellingen + in-app producten | | 3 | Producten laden | In app | `getProducts()` | | 4 | Aankoop doen | In app | `requestPurchase()` | | 5 | Aankoop verifiëren | Backend | Receipt of purchase token | | 6 | Abonnement beheren | Backend | Verificatie, vervaldatum, hernieuwingen | **Belangrijk:** - Test je aankopen in de sandbox (Apple) en testomgeving (Google). - Zorg dat alle communicatie met de backend secure is (SSL). - Documenteer je aankoopflow duidelijk voor gebruikers. Met deze stappen en best practices kun je een veilige en gebruikersvriendelijke in-app aankoop functionaliteit voor abonnementen implementeren in je Capacitor app.

Hier is een stapsgewijze handleiding voor het integreren van in-app aankopen voor abonnementen in je Capacitor app: ## 1. Installatie en Setup ```bash npm install @capacitor-community/in-app-purchases npx cap sync ``` ## 2. iOS Configuratie ### App Store Connect Configuratie: - Maak app- en abonnementsproducten aan in App Store Connect - Zorg dat je betaalovereenkomst is ondertekend ### Xcode Configuratie: Voeg dit toe aan je `capacitor.config.ts`: ```typescript const config: CapacitorConfig = { plugins: { InAppPurchases: { ios: { autoInitialize: true } } } }; ``` ## 3. Android Configuratie ### Google Play Console: - Maak je app en abonnementsproducten aan - Upload je app naar het interne testkanaal ### Android Manifest: Voeg deze permissie toe: ```xml <uses-permission android:name="com.android.vending.BILLING" /> ``` ## 4. Basis Implementatie ```typescript import { InAppPurchases } from '@capacitor-community/in-app-purchases'; // Initialisatie async initializePurchases() { try { await InAppPurchases.initialize(); this.setupListeners(); } catch (error) { console.error('Initialisatie mislukt:', error); } } // Luisteraars instellen setupListeners() { InAppPurchases.addListener('productPurchased', (data) => { this.handlePurchaseSuccess(data); }); InAppPurchases.addListener('purchaseFailed', (data) => { this.handlePurchaseError(data); }); } ``` ## 5. Producten Ophalen en Tonen ```typescript async getProducts() { try { const result = await InAppPurchases.getProducts({ productIdentifiers: [ 'maandabonnement', 'jaarabonnement', 'premium_abonnement' ] }); return result.products; } catch (error) { console.error('Producten ophalen mislukt:', error); } } // Producten weergeven in UI displayProducts(products) { products.forEach(product => { console.log(` Product: ${product.title} Beschrijving: ${product.description} Prijs: ${product.price} Abonnementsperiode: ${product.subscriptionPeriod} `); }); } ``` ## 6. Aankoop Proces ```typescript async purchaseProduct(productId: string) { try { // Toon laadindicator this.showLoading(); const result = await InAppPurchases.purchase({ productIdentifier: productId, quantity: 1 }); // Handle result in listener } catch (error) { this.hideLoading(); this.showError('Aankoop mislukt. Probeer het opnieuw.'); } } ``` ## 7. Aankoop Verificatie (Belangrijk!) ```typescript async handlePurchaseSuccess(purchaseData) { try { // Verifieer aankoop met je backend const verification = await this.verifyPurchaseWithBackend( purchaseData.receipt, purchaseData.transactionId ); if (verification.valid) { // Activeer abonnement voor gebruiker await this.activateSubscription(purchaseData.productIdentifier); this.showSuccess('Abonnement geactiveerd!'); } else { this.showError('Aankoopverificatie mislukt'); } } catch (error) { console.error('Verificatie fout:', error); } finally { this.hideLoading(); } } // Backend verificatie async verifyPurchaseWithBackend(receipt: string, transactionId: string) { const response = await fetch('https://jouw-backend.com/verify-purchase', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${await this.getUserToken()}` }, body: JSON.stringify({ receipt, transactionId, platform: this.getPlatform() }) }); return await response.json(); } ``` ## 8. Best Practices voor Gebruikerservaring ### Foutafhandeling: ```typescript handlePurchaseError(error) { this.hideLoading(); switch (error.code) { case 'E_USER_CANCELLED': // Gebruiker heeft geannuleerd - geen actie nodig break; case 'E_ITEM_UNAVAILABLE': this.showError('Product niet beschikbaar'); break; case 'E_NETWORK_ERROR': this.showError('Netwerkfout. Controleer je verbinding'); break; default: this.showError('Aankoop mislukt. Probeer het later opnieuw'); } } ``` ### Abonnementsstatus Controleren: ```typescript async checkSubscriptionStatus() { try { const purchases = await InAppPurchases.getPurchases(); for (const purchase of purchases.purchases) { if (purchase.state === 'approved' || purchase.state === 'restored') { const isValid = await this.verifyPurchaseWithBackend( purchase.receipt, purchase.transactionId ); if (isValid) { return this.activateSubscription(purchase.productIdentifier); } } } return this.deactivateSubscription(); } catch (error) { console.error('Status controle mislukt:', error); } } ``` ## 9. Beveiligingsmaatregelen - **Backend verificatie**: Verifieer alle aankopen server-side - **Receipt validatie**: Gebruik Apple/Google servers voor receipt validatie - **Tijd synchronisatie**: Zorg voor juiste tijd op server voor abonnementschecks - **Rate limiting**: Beperk aankooppogingen om misbruik te voorkomen ## 10. Testen ### iOS Testen: - Gebruik Sandbox testers in App Store Connect - Test op fysiek apparaat (niet simulator) ### Android Testen: - Upload app naar intern testkanaal - Gebruik testaccounts toegevoegd in Google Play Console Deze implementatie zorgt voor een veilige en gebruiksvriendelijke abonnementservaring in je Capacitor app. Zorg ervoor dat je alle App Store en Google Play richtlijnen volgt voor in-app aankopen.